Style part of a text component

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.

Nader Dabit · Accepted Answer · 2015-12-02T17:40:12.437

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);

Thanks so much that worked, if you dont mind, how do you do the equivalent of float right? — Adam Katz, Dec 02 '15 at 17:12
Sure, you can use something like justifyContent: 'flex-end'. I've edited the above answer to show you an example. — Nader Dabit, Dec 02 '15 at 17:40
Thanks man you are an absolute legend for helping me like this. I tried adding the the justifyContent and it moves the content to the far right, however I want it on the far right of the screen not just on the right of the other components. I think I need to make the button the width of the screen, how do I do that? — Adam Katz, Dec 02 '15 at 18:25
It depends on how the outside views are styled really. I did a sample project at http://stackoverflow.com/questions/34011508/full-width-button-w-flex-box-in-react-native/34011927#34011927 for someone else with a full width button for reference though. — Nader Dabit, Dec 02 '15 at 19:26

Style part of a text component

1 Answers1