CODEWITHSUNDEEP
react-nativetexttext-alignmenttouchableopacity
Rizwan
Rizwan

Reputation: 89

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

Upvotes: 3

Views: 2420

Answers (2)

Robert
Robert

Reputation: 1956

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.

Upvotes: 1

Ahmed Gaber
Ahmed Gaber

Reputation: 4004

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>

Upvotes: 6

Related Questions