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