Nested Texts not aligning (React Native)

DingleberrySmith 0
Viewed 42

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.

enter image description here

It seems to work fine on IOS. Just not on Android.

react-native
2 Answers

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

enter image description here

Gaurav Roy0

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>
    );
  }
}
mainak0
Related