Draw vertical dotted line in react native

Question

Can anyone suggest how to do these dotted vertical lines between icons in React Native?

Try something answered here [How can I display dotted line in react native](https://stackoverflow.com/questions/55588821/how-can-i-display-dotted-line-in-react-native) — Eduardo Schork, Nov 06 '19 at 11:23
I checked but it is only one dot. If I want to apply I have to do more than 15 Views tags. It is too much code/ — Jasur Kurbanov, Nov 06 '19 at 11:31

Lenoarod · Answer 1 · 2019-11-06T13:26:19.467

firstly, you can search for the third library, if you want more style. I find the react-native-dash library. you can use like the following:

 <Dash dashGap={3} style={{width:1, height:100, flexDirection:'column',}}/>

then, if you want to define a component by yourself, you can use the style, and put it in the pure component

export const DotLine = (props) => {

  return({
     <View style={{
        borderStyle: 'dotted',
        height:200,
        borderLeftWidth:5
       }}/>

   })

}

//then use it in other components
<Icon/><DotLine/><Icon/>

Draw vertical dotted line in react native

1 Answers1