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

Creating a reusable Line component worked for me:

import React from 'react';
import { View } from 'react-native';

export default function Line() {
    return (
        <View style={{
            height: 1,
            backgroundColor: 'rgba(255, 255, 255 ,0.3)',
            alignSelf: 'stretch'
        }} />
    )
}

Now, Import and use Line anywhere:

<Line />

Answer 2

This is in React Native (JSX) code, updated to today:

<View style = {styles.viewStyleForLine}></View>

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.

Answer 3

This is how i solved divider with horizontal lines and text in the midddle:

<View style={styles.divider}>
  <View style={styles.hrLine} />
  <Text style={styles.dividerText}>OR</Text>
  <View style={styles.hrLine} />
</View>

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,
  },
})

Answer 4

Just create a View component which has small height.

<View style={{backgroundColor:'black', height:10}}/>

Answer 5

I did it like this. Hope this helps

<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />

for style:

hairline: {
  backgroundColor: '#A2A2A2',
  height: 2,
  width: 165
},

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},

Answer 6

import { View, Dimensions } from 'react-native'

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

// Create Component

<View style={{
   borderBottomColor: 'black', 
   borderBottomWidth: 0.5, 
   width: width - 20,}}>
</View>