Style part of a text component - flexbox

Question

I am trying to make react native components where different words in the same component have different styling.
For example I have buttons with name and subtitle on the button, I want the subtitle text to be smaller.
<Text style={styles.buttonText}>{speciesArry[i].title} {"\n"} {speciesArry[i].subtitle}</Text>
I need to wrap the subtitle in its own component so that I can style it?
A second example
I have another button with the text component
Green - best Choice
I need the the word "green" to be green.

Answer 1

For the first question, a button with a title and a subtitle, you can wrap a view in a TouchableHighlight and then place multiple Text elements to create a title and a subtitle:
<TouchableHighlight style={{height:70, backgroundColor: 'blue'}}>
<View style={{flexDirection: 'column', }}>
<Text style={{textAlign:'center', color: 'white', fontSize:22, marginTop:10}}>MAIN TEXT</Text>
<Text style={{textAlign:'center', color: 'white', fontSize:14}}>Subtitle</Text>
</View>
</TouchableHighlight>
For the second question, having different styling within a single text component, you need to wrap text components within text components, the way you might do with a span in html:
<Text style={styles.mainStyle}>This text is red, <Text style={styles.blacktext}>this text is black, </Text><Text style={styles.boldgreen}>this text is bold and green!</Text></Text>
And the button example you provided above would look something like this:
<TouchableHighlight style={{height:70, backgroundColor: 'orange'}}>
<View style={{ flexDirection: 'row', justifyContent:'center'}}>
<Text style={{fontSize:18, marginTop: 22}}><Text style={{color: 'green'}}>Green</Text> - best Choice</Text>
</View>
</TouchableHighlight>
For the float:right question: There is no anything exactly like it in flexbox, but there is something very similar to it called: justifyContent: 'flex-end'. Below is how that would look, and I've updated the origin project to reflect the below code:
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Text>Floating right</Text>
</View>
I've set up a full working project with the above examples here, and pasted the entire code for the project below as well. Hope this helps!
https://rnplay.org/apps/KqE-cA
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={{marginTop:70}}>
<TouchableHighlight style={{height:70, backgroundColor: 'blue'}}>
<View style={{flexDirection: 'column', }}>
<Text style={{textAlign:'center', color: 'white', fontSize:22, marginTop:10}}>MAIN TEXT</Text>
<Text style={{textAlign:'center', color: 'white', fontSize:14}}>Subtitle</Text>
</View>
</TouchableHighlight>
</View>
<View style={{marginTop:20}}>
<Text style={styles.mainStyle}>This text is red, <Text style={styles.blacktext}>this text is black, </Text><Text style={styles.boldgreen}>this text is bold and green!</Text></Text>
</View>
<View style={{marginTop:20}}>
<TouchableHighlight style={{height:70, backgroundColor: 'orange'}}>
<View style={{ flexDirection: 'row', justifyContent:'center'}}>
<Text style={{fontSize:18, marginTop: 22}}><Text style={{color: 'green'}}>Green</Text> - best Choice</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
mainStyle: {
color: 'red'
},
blacktext: {
color: 'black'
},
boldgreen: {
color: 'green',
fontWeight: 'bold'
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);