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

Why don't you do something like this?

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

Answer 2

I was able to draw a separator with flexbox properties even with a text in the center of line.

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
  <View>
    <Text style={{width: 50, textAlign: 'center'}}>Hello</Text>
  </View>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>

Answer 3

If you have a solid background (like white), this could be your solution:

<View style={container}>
  <View style={styles.hr} />
  <Text style={styles.or}>or</Text>
</View>

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

Answer 4

I recently had this problem.

<Text style={styles.textRegister}> ────────  Register With  ────────</Text>

with this result: