Inline elements implementation

react-native react-native-text
Ivan Chernykh picture Ivan Chernykh · Jan 10, 2016 · Viewed 37.2k times · Source

I want to create Text components and to display them in a row , like span elements in html. If i'm doing it this way:

<View>
  <Text> Start here, </Text> <Text> finish here </Text>
</View>

line is broken between them and it looks like:

Start here,
finish here

How can i prevent line breaking and display them on the same line?

Answer

purii picture purii · Jan 10, 2016

Just set the correct flexDirection. Default is column.

<View style={{flexDirection: 'row'}}>
 <Text> Start here, </Text> <Text> finish here </Text>
</View>

Related questions

How do I make text bold, italic, or underline in React Native?

Surprisingly there isn't one question that groups these all together yet on Stack Overflow; there hasn't been an answer on SO for italics or underline, in fact, only this question for bold. I self-answered this quesiton below.

Read More
Setting a border for react native TextInput

Using React native 0.26, My component is something like this const Search = () => { return ( <View style={styles.backgroundImage}> <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/> </View> ) } And my …

Read More
Adding border only to the one side of the <Text/> component in React Native (iOS)

I am facing something weird issue with React-Native's <Text/> component in iOS. I wanted to apply borderBottomWidth style into <Text/> component but it did NOT work. However, the borderWidth option worked. Worked <Text style={{borderWidth:1}}&…

Read More