Tips to know How to Draw a Horizontal Line in React Native

Just like we have libraries to develop projects easily, we also hand frameworks. When it comes to JavaScript, we have both libraries and frameworks. React Native is a framework that helps programmers to build robust mobile applications. This JavaScript framework is so popular all over the world as it proffers a wide range of built-in APIs and components. When you are working on react native, you may try various projects, especially the newbies. Today we discuss one of such projects, and that is how to draw a horizontal line in React Native.

It is a project that you may be trying, but complete guidance is sometimes really needed. We at Tutopal are here to help you start the project with simple and easy-to-apply tips. Let’s figure out the way to draw a horizontal line

Draw A Horizontal Line

To draw a line horizontally using react native, we have a few effective ways. We highlight different example scenarios so that you can easily draw a horizontal line.

You need to add border color and width by and within the view. You can code it like this

import * as React from 'react';
import { Text, View } from 'react-native';

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <Text>hello</Text>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
      <Text>world</Text>
    </View>
  );
};
export default App;

Here, black color is set as the borderBottomColor in order to add a border color. We set 1 in pixels as the borderBottomWidth to set border width.

That’s how you can draw a horizontal line.

Example Scenario 1

If you have a solid white background, then you can use the below code

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

Example Scenario 2

For instance, you are trying to draw a line with the following code

render {
    let color = 'red';
    return (
        <div> 
            There is a red HR
           <hr />
        <div>
    )
}

You need a solution to draw correctly.

Solution

const ColoredLine = ({ color }) => (
    <hr
        style={{
            color: color,
            backgroundColor: color,
            height: 5
        }}
    />
);

Once you place it, you can add this line

<ColoredLine color="red" />

Example Scenario 3

To draw a yellow horizontal line, follow the below code

import React from "react";

const horizontalLine = ({ color }) => (
    <hr
         style={{
           color,
           backgroundColor: color,
           height: 4
         }}
   />
);
export default function App() {
     return (
        <div>
           <horizontalLine color="yellow" />
       </div>
     );
}

Conclusion

We shed light on the example scenarios to help you know how to draw a horizontal line in react native in different ways. I hope you find it helpful! I wish you happy drawing and coding!