Draw horizontal rule in React Native
React NativeReact Native Problem Overview
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>
React Native Solutions
Solution 1 - React Native
You could simply use an empty View with a bottom border.
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
Solution 2 - React Native
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>
Solution 3 - React Native
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.
Solution 4 - React Native
I recently had this problem.
<Text style={styles.textRegister}> ──────── Register With ────────</Text>
with this result:
Solution 5 - React Native
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'
},
Solution 6 - React Native
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} />
Solution 7 - React Native
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 />
Solution 8 - React Native
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.
Solution 9 - React Native
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>
Solution 10 - React Native
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' }} />
Solution 11 - React Native
Why don't you do something like this?
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'black',
width: 400,
}}
/>
Solution 12 - React Native
Maybe you should try using react-native-hr something like this:
<Hr lineColor='#b3b3b3'/>
documentation: https://www.npmjs.com/package/react-native-hr
Solution 13 - React Native
import {Dimensions} from 'react-native'
const { width, height } = Dimensions.get('window')
<View
style={{
borderBottomColor: '#1D3E5E',
borderBottomWidth: 1,
width : width ,
}}
/>
Solution 14 - React Native
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,
},
})
Solution 15 - React Native
Just create a View component which has small height.
<View style={{backgroundColor:'black', height:10}}/>
Solution 16 - React Native
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',
},
});
Solution 17 - React Native
Another approach:
import { View } from 'react-native';
import { Divider, Text } from 'react-native-paper';
const MyComponent = () => (
<View>
<Text>Lemon</Text>
<Divider />
<Text>Mango</Text>
<Divider />
</View>
);
export default MyComponent;
Solution 18 - React Native
You can use the View like this to render a horizontal rule:
<View style={{ backgroundColor : "your color", height : 1 }} />
Solution 19 - React Native
I use this component. It has two props: 1. Number of dash need. 2. dashWidth. and use it like this:
<Line dashedCount={Math.floor(screenWidth / 12)} dashWidth={8} />
type TLine = {
dashedCount: number;
dashWidth: number;
};
function Line({ dashedCount, dashWidth }: TLine) {
const Dash = ({ dashWidth }) => (
<View
style={{
height: 1,
backgroundColor: 'rgba(255, 255, 255 ,0.3)',
alignSelf: 'stretch',
width: dashWidth
}}
/>
);
const dashed = Array(dashedCount).fill(<Dash dashWidth={dashWidth} />);
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
{dashed}
</View>
);
}
Solution 20 - React Native
For horizontal line in React native<Text style={{ height:1,width:"100%",backgroundColor:"black",margin:5}}></Text>