CODEWITHSUNDEEP
javascriptcssreactjsreact-native
jmedran
jmedran

Reputation: 99

React Native - How can I create a dynamic dotted line (leader) between two words?

I have a component in React Native that simply displays a list of information like so:

Device: Macbook
Port: 8080
OS: Darwin

However, I'd like to display the text like this:

Device.........Macbook
Port..............8080
OS..............Darwin

Given the dimensions of most phone screens may be different, how can I achieve this dotted line in such a way that it dynamically conforms to the phone's dimensions and looks nice / does not spill over to the next line within the <View> / flexbox?

Upvotes: 1

Views: 1295

Answers (1)

Anya Schechter
Anya Schechter

Reputation: 36

Try adding borderRadius.

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

Upvotes: 1

Related Questions