Draw horizontal rule in React Native

Question

I ve tried react-native-hr package - doesn t work for me nor on Android nor on iOS   Following code is also not suitable because it renders three dots at the end   lt Text numberOfLines  1   gt                                                                                     lt  Text gt

User · Answer

This is in React Native  JSX  code  updated to today     lt View style    styles viewStyleForLine  gt  lt  View gt   const styles   StyleSheet create   viewStyleForLine        borderBottomColor   black        borderBottomWidth  StyleSheet hairlineWidth       alignSelf  stretch       width   100            you can use either alignSelf  stretch  or width   100   both should work    and    borderBottomWidth  StyleSheet hairlineWidth   here StyleSheet hairlineWidth is the thinnest   then    borderBottomWidth  1    and so on to increase thickness of the line

User · Answer

I did it like this  Hope this helps    lt View style  styles hairline    gt   lt Text style  styles loginButtonBelowText1  gt OR lt  Text gt   lt View style  styles hairline    gt    for style   hairline      backgroundColor    A2A2A2     height  2    width  165     loginButtonBelowText1      fontFamily   AvenirNext-Bold     fontSize  14    paddingHorizontal  5    alignSelf   center     color    A2A2A2

User · Answer

import   View  Dimensions   from  react-native   var   width  height     Dimensions get  window       Create Component   lt View style       borderBottomColor   black       borderBottomWidth  0 5      width  width - 20    gt   lt  View gt

User · Answer

If you have a solid background  like white   this could be your solution    lt View style  container  gt     lt View style  styles hr    gt     lt Text style  styles or  gt or lt  Text gt   lt  View gt   const styles   StyleSheet create     container        flex  0      backgroundColor    FFFFFF       width   100           hr        position   relative       top  11      borderBottomColor    000000       borderBottomWidth  1         or        width  30      fontSize  14      textAlign   center       alignSelf   center       backgroundColor    FFFFFF

User · Answer

Creating a reusable Line component worked for me   import React from  react   import   View   from  react-native    export default function Line         return            lt View style                height  1              backgroundColor   rgba 255  255  255  0 3                alignSelf   stretch               gt            Now  Import and use Line anywhere    lt Line   gt

User · Answer

I recently had this problem    lt Text style  styles textRegister  gt  --------  Register With  -------- lt  Text gt    with this result

User · Answer

Just create a View component which has small height    lt View style   backgroundColor  black   height 10    gt

User · Answer

You can use native element divider   Install it with   npm install --save react-native-elements   or with yarn yarn add react-native-elements  import   Divider   from  react-native-elements    Then go with     lt Divider style    backgroundColor   blue       gt    Source

User · Answer

You can also try react-native-hr-component  npm i react-native-hr-component --save   Your code   import Hr from  react-native-hr-component          lt Hr text  Some Text  fontSize  5  lineColor   eee  textPadding  5  textStyles  yourCustomStyles  hrStyles  yourCustomHRStyles    gt

User · Answer

import  Dimensions  from  react-native   const   width  height     Dimensions get  window     lt View   style             borderBottomColor    1D3E5E            borderBottomWidth  1           width   width           gt

User · Answer

Why don t you do something like this    lt View   style        borderBottomWidth  1      borderBottomColor   black       width  400         gt

User · Answer

This is how i solved divider with horizontal lines and text in the midddle    lt View style  styles divider  gt     lt View style  styles hrLine    gt     lt Text style  styles dividerText  gt OR lt  Text gt     lt View style  styles hrLine    gt   lt  View gt    And styles for this   import   Dimensions  StyleSheet   from  react-native   const   width     Dimensions get  window    const styles   StyleSheet create   divider        flexDirection   row       alignItems   center       marginTop  10         hrLine        width  width   3 5      backgroundColor   white       height  1         dividerText        color   white       textAlign   center       width  width   8

User · Answer

One can use margin in order to change the width of a line and place it center   import   StyleSheet   from  react-native   lt View style    styles lineStyle    gt   const styles   StyleSheet create     lineStyle           borderWidth  0 5          borderColor  black           margin 10              if you want to give margin dynamically then you can use Dimension width

User · Answer

Maybe you should try using react-native-hr something like this    lt Hr lineColor   b3b3b3   gt    documentation  https   www npmjs com package react-native-hr

User · Answer

You could simply use an empty View with a bottom border    lt View   style        borderBottomColor   black       borderBottomWidth  1         gt

User · Answer

I was able to draw a separator with flexbox properties even with a text in the center of line    lt View style   flexDirection   row   alignItems   center    gt     lt View style   flex  1  height  1  backgroundColor   black      gt     lt View gt       lt Text style   width  50  textAlign   center    gt Hello lt  Text gt     lt  View gt     lt View style   flex  1  height  1  backgroundColor   black      gt   lt  View gt

[react-native] Draw horizontal rule in React Native

Examples related to react-native