skip to Main Content

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.

2

Answers


  1. 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>
        );
      }
    }
    
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search