Draw vertical dotted line in react native

Question

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

Answer 1

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