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

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>

Answer 1

You can also try react-native-hr-component

npm i react-native-hr-component --save

Your code:

import Hr from 'react-native-hr-component'

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />

Answer 2

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:

<Divider style={{ backgroundColor: 'blue' }} />

Source

Answer 3

You could simply use an empty View with a bottom border.

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  }}
/>

Answer 4

One can use margin in order to change the width of a line and place it center.

import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />

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.

Answer 5

import {Dimensions} from 'react-native'

const { width, height } = Dimensions.get('window')

<View
  style={{
         borderBottomColor: '#1D3E5E',
         borderBottomWidth: 1,
         width : width , 
  }}
/>

Answer 6

Maybe you should try using react-native-hr something like this:

<Hr lineColor='#b3b3b3'/>

documentation: https://www.npmjs.com/package/react-native-hr