Nested Texts not aligning (React Native) - react-native

Question

I have this basic setup in React Native:
class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.textContainer}>
<View>
<Text style={styles.textHighlighting}>
Testing
</Text>
</View>
.
</Text>
<Text style={styles.textContainer}>
<View>
<Text style={styles.textHighlighting}>
Again
</Text>
</View>
!
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textContainer: {
fontSize: 50
},
textHighlighting: {
backgroundColor: "yellow",
borderRadius: 10,
fontSize: 50
}
})
I am wrapping the inner text in a view because I want it to be highlighted and to be able to add a borderRadius. This seems to break when I don't have the View. But the text I don't have within the View seems to align itself lower vertically than the highlighted text.
It seems to work fine on IOS. Just not on Android.

Answer 1

Check this expo snack https://snack.expo.dev/#gaurav1995/carefree-truffle
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textHighlighting}>
Testing
</Text>
<Text style={styles.newFont} >.</Text>
</View>
<View style={styles.textContainer}>
<Text style={styles.textHighlighting}>
Again
</Text>
<Text style={styles.newFont} >!</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textContainer: {
flexDirection:'row',
marginVertical:5,
padding:2
},
textHighlighting: {
backgroundColor: "yellow",
borderRadius: 10,
fontSize: 50,
},
newFont:{
fontSize:50,
marginLeft:2
}
});

Answer 2

check this out
render() {
return (
<View style={styles.container}>
<Text style={styles.textContainer}>
<Text style={styles.textHighlighting}>Testing</Text>.
</Text>
<Text style={styles.textContainer}>
<Text style={styles.textHighlighting}>Again</Text>!
</Text>
</View>
);
}
}