Search code examples
react-nativetexttext-alignmenttouchableopacity

Text and TouchableOpacity text not appearing in straight line

I am trying to enclose some touchableopacity right next to plain text however, the plain text between two touchables is not appearing in line with touchable texts. PLease guide on how to fix this.

<Text style={{fontSize:10,textAlign:'center',}}>By clicking Sign up, you agree to Company's <TouchableOpacity ><Text style={{fontSize:10, color:'blue'}}>Terms of Service</Text></TouchableOpacity> and <TouchableOpacity><Text style={{fontSize:10, color:'blue'}}>Privacy Policy.</Text></TouchableOpacity></Text>

It renders like this on physical device

Solution

  • no need for touchableopacity because Text has onPress prop.

    <Text style={{fontSize:10,textAlign:'center'}}>

    By clicking Sign up, you agree to Companys 

    <Text 
      onPress={() => alert("Terms of Service is clicked")} 
      style={{fontSize:10, color:'blue'}}>
      Terms of Service
    </Text>

    and

   <Text 
      onPress={() => alert("Privacy Policy is clicked")} 
      style={{fontSize:10, color:'blue'}}>
      Privacy Policy.
   </Text>

</Text>