Reputation: 10705

Draw horizontal rule in React Native

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>

Upvotes: 187

Answers (25)

Anshuman Bisoyi

Reputation: 236

Upvotes: 0

Mohd. Anas Siddiqui

Reputation: 783

Just paste this code in View it will work perfectly.

Line: {
    borderBottomColor: "black",
    borderBottomWidth: 1
}

Upvotes: -1

Krish Chary

Reputation: 109

just add the following code to get your desired result : <View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />

Upvotes: 3

Shahriyar

Reputation: 23

You can use this with native base package

<Flex alignItems='center' justifyContent='center' direction='row'>
   <Divider width={150} mx="5" />
   <Text>OR</Text>
   <Divider width={150} mx="5" />
</Flex>

Upvotes: 1

Juma Josephat

Reputation: 41

Use an empty View and give it CSS styles, In the View, put an empty Text for the view not to be ignored as seen in the snippet below

<View style={{ height: 1, width: "100%",backgroundColor: "black",}}><Text></Text></View>

Upvotes: 0

Antoine Grandchamp

Reputation: 7470

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

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: StyleSheet.hairlineWidth,
  }}
/>

Upvotes: 480

rafiulah

Reputation: 159

For horizontal line in React native<Text style={{ height:1,width:"100%",backgroundColor:"black",margin:5}}></Text>

Upvotes: 0

AIK

Reputation: 528

You can use the View like this to render a horizontal rule:

<View style={{ backgroundColor : "your color", height : 1 }} />

Upvotes: 0

Amish Shabani

Reputation: 759

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

Upvotes: 0

Sneh Parikh

Reputation: 15

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;

Upvotes: 0

Azhar Zafar

Reputation: 1724

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>

Upvotes: 121

Zaid Pathan

Reputation: 16820

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 />

Upvotes: 9

Darapsas

Reputation: 101

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

Upvotes: 0

Park Keeper

Reputation: 590

Just create a View component which has small height.

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

Upvotes: 0

shanthan

Reputation: 612

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

Upvotes: 2

Sree

Reputation: 319

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.

Upvotes: 6

Laszlo

Reputation: 33

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

Upvotes: 0

Mohamed Ben Hartouz

Reputation: 179

import {Dimensions} from 'react-native'

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

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

Upvotes: 0

Smit Thakkar

Reputation: 440

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.

Upvotes: 31

mehulmpt

Reputation: 16597

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} />

Upvotes: 7

sarin upreti

Reputation: 346

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

Upvotes: 10

Martin Chinome

Reputation: 429

I recently had this problem.

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

with this result:

Upvotes: 13

J Dorrian

Reputation: 204

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

<Hr lineColor='#b3b3b3'/>

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

Upvotes: -1

Filip Ilievski

Reputation: 337

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>

Upvotes: 3

Viktor Sec

Reputation: 3085

Why don't you do something like this?

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

Upvotes: 1

Draw horizontal rule in React Native

Answers (25)

Related Questions