How can I display dotted line in react native

Question

I need to display a dotted line in a view

I have tried borderTopWidth: 1, borderStyle: 'dashed' for a view.

Answer 1

Just add borderRadius it will work

<View style={{
    borderStyle: 'dotted',
    borderWidth: 1,
    borderRadius: 1,
  }}>
</View>

Answer 2

Or you can just do this if you want a dashed horizontal line:

    <Text ellipsizeMode="clip" numberOfLines={1}>
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - -
    </Text>

Answer 3

write your code like this:

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dotted' }} />

In case you don't like that, this is the ultimate answer (I wrote this with 'dashed' borderStyle in order to be seen more clearly.

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed', zIndex: 0, }}>
  <View style={{ position: 'absolute', left: 0, bottom: 0, width: '100%', height: 1, backgroundColor: 'white', zIndex: 1 }} />
</View>

Answer 4

You can try this one also, it give you perfect dotted line.

<View style={{borderWidth:0.3, borderStyle:'dashed', borderRadius:1,borderColor:'black'}}></View>

Answer 5

import React from "react";
import * as Svg from "react-native-svg";

type IVerticalDashedLine = {
  height: number;
  width: number;
  color: Svg.Color;
};

export default function VerticalDashedLine({
  height,
  width,
  color,
}: IVerticalDashedLine) {
  return (
    <Svg.Svg height={height} width={width} style={{ alignSelf: "center" }}>
      <Svg.Line
        stroke={color}
        strokeWidth={width}
        strokeDasharray="3, 2"
        x1="0"
        y1="0"
        x2="0"
        y2={height}
      />
    </Svg.Svg>
  );
}

Answer 6

You can use below library that will help you to achieve your design as dotted.

react-native-dash

A super simple component for react-native to draw customisable dashed lines

Installation

npm i --save react-native-dash

Usage

import Dash from 'react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex
render() {
    return <Dash style={{width:100, height:1}}/>
}

//draws a vertical dashed line with defaults.
render() {
    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}

You can get more information then may visit above link.

Thank you

Answer 7

TL;DR: If you need any kind of control, and not a hacky solution, use a third-party solution like react-native-dash.

There is no easy way to make a dotted line in React Native (at least as of version 0.59, May 2019). The problem with using something like a dotted or dashed borderStyle on a <View /> component is that it will apply to all 4 sides of that view box. That means you will get super tight groupings of dots and dashes, with no out-of-the-box solution for controlling the dash or dot spacing or size. It's fine for doing a simple dotted or dashed box, but not a line.

Answer 8

Thanks @Amir Gorji for this one. If you want only one side of a view's borders to be dashed, the bottom one for example, use this:

<View 
    style={{ 
        height: 100,
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 1,
        borderStyle: 'dashed',
        zIndex: 0
    }}
>
    <View style={{ position: 'absolute', left: -1, top: -1, width: '100%', height: 1, backgroundColor: 'white', zIndex: 1 }} />
    <View style={{ position: 'absolute', left: -1, top: -1, width: 1, height: '100%', backgroundColor: 'white', zIndex: 1 }} />
    <View style={{ position: 'absolute', right: -1, top: -1, width: 1, height: '100%', backgroundColor: 'white', zIndex: 1 }} />
</View>

It's not perfect, but it's the best I could find.

P.S. react-native-dash does not work.

Answer 9

My Solution for dashed line works for horizontal and portrait mode that uses '-' (negative symbol).

Adjust fontSize and letterSpacing to get the desired result as the fontFamily for this example is OpenSans. The result might be different.

import React from 'react';
import {color} from '../../theme';
import {View} from 'react-native';
import {Text} from '../text';

const CONTAINER = {
  flexDirection: 'row',
  justifyContent: 'center',
  overflow: 'hidden',
  width: '100%',
};

const DASHED = {
  color: color.primary,
  letterSpacing: -1.87,
  fontSize: 18,
};

export function Divider() {
  return (
    <View style={CONTAINER}>
      {[...Array(60)].map((_, ind) => {
        return (
          <Text key={ind} style={DASHED}>
            {' '}
            --{' '}
          </Text>
        );
      })}
    </View>
  );
}

Answer 10

A few people have suggested using the react-native-dash library, which now seems to be unmaintained and requires third party dependencies (which can potentially cause issues).

An alternative solution is the react-native-dashed-line package which has been written from the ground up, using hooks and functional components. It has no dependencies and can be used as follows

<DashedLine dashLength={5} />

<DashedLine dashLength={10} dashThickness={8} />

Answer 11

Here is a solution with no library.

Answer 12

I use the Text component with a trick to draw a dashed line like this :

 <Text ellipsizeMode="clip" numberOfLines={1} style={{ opacity: 0.1 }}>
          {Array.from(Array(100).keys()).map((each) => {
            return "-    ";
          })}
 </Text>