react-native nested text with differnt fontsizes (initial, first letter)

Question

I currently write a news reader app in react-native and want to style the first letter of an article as an initial, like below:

For my first attempt I use the nested text aproach. The code is attached below. And this is my current result:

The code in the render function:

<View style={styles.container}>
    <Text style={styles.text}>
        <Text style={styles.initial}>W</Text>
        <Text>
            elcome to React Native! To get started, edit index.android.js To get started, edit index.android.js To get started, edit index.android.js
        </Text>
    </Text>
</View>

My stylesheet:

const fontSize = 14;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    initial: {
        fontSize: fontSize * 2,            
    },
    text: {
        fontSize: fontSize,
        color: '#333333',
    },
});

My Question: How can I style my first char to get a pretty initial?

Environment

• react: 16.0.0-alpha.6
• react-native: 0.44.2
• Android 6.0 on an emulated Nexus 5

Answer 1

you can try in this way too, add the regular style for parent Text element and required style for the "W" text child element.

export default class DemoProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        *<Text>
          <Text style={[styles.textCommon, styles.firstLetter]}>W</Text>
        elcome</Text>*
      </View>
    );
  }
}


  text: {
        fontSize: fontSize,
        color: '#333333',
    }

Answer 2

This is one way of doing it:

export default class DemoProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.textCommon, styles.firstLetter]}>W</Text>
        <Text>elcome</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row'
  },
  textCommon: {
    color: '#333333',
  },
  firstLetter: {
    fontSize: 23,
  }
});