How to Show Dashed Border in React Native

Proper usage of the border and border styles is important to set your UI design appealing to users. There are three types of border types namely solid, dotted, and dashed in react native. The style property which we use to change border style is borderStyle.

Let’s check how to create a dashed border in react native using the following example.

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

const Example = () => {
  return (
    <View
      style={{
        width: 300,
        height: 200,
        borderStyle: 'dashed',
        borderWidth: 1,
        borderRadius: 10,
        margin: 20,
      }}
    />
  );
};

export default Example;

As you can see, it’s a simple code snippet. The borderStyle and borderWidth properties help to show the View component with dashed borders.

Following is the output of the above example.

That’s how you show dashed border lines in react native. I hope this short tutorial will be helpful for you.