Text and TouchableOpacity text not appearing in straight line

Question

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>

score 2 · Accepted Answer · answered Aug 11 '21 at 21:33

2

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>

answered Aug 11 '21 at 21:33

Ahmed Gaber

3,384
2
12
18

Thanks, I do have that workaround in mind. Still wondering why Touchableopacity will not align with the plain text. – Rizwan Aug 12 '21 at 19:04
This is true, but it is hard to hit. Are there approaches to make the "hitbox" bigger to trigger the onPress function? – Yannick Schröder Jun 27 '22 at 13:11
@YannickSchröder I thought `hitSlop` could be applied to `Text`, but apparently it can only be used in `Pressable`. https://reactnative.dev/docs/pressable#hitslop – Robert Jun 30 '22 at 10:44

score 0 · Answer 2 · answered Jun 30 '22 at 12:00

If you switch the surrounding <Text> to <View> the texts will be vertically aligned:

const styles = StyleSheet.create({
  paragraph: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent:'center',
  },
  text: {
    fontSize: 10,
  },
  link: {
    color: 'blue',
  },
})

// Extend the hit area of the links by 15pt vertically and 5pt horizontally:
const hitSlop = { top: 15, left: 5, bottom: 15, right: 5 }

<View style={[styles.paragraph]}>
  <Text style={[styles.text]}>By clicking Sign up, you agree to Company's </Text>
  <TouchableOpacity hitSlop={hitSlop}>
    <Text style={[styles.text, styles.link]}>Terms of Service</Text>
  </TouchableOpacity>
  <Text style={[styles.text]}> and </Text>
  <TouchableOpacity hitSlop={hitSlop}>
    <Text style={[styles.text, styles.link]}>Privacy Policy</Text>
  </TouchableOpacity>
  <Text style={[styles.text]}>.</Text>
</View>

Please note that the spaces behind Company's and around and are required to have natural spaces around the links.

Text and TouchableOpacity text not appearing in straight line

2 Answers2