CODEWITHSUNDEEP
reactjsreact-nativetextreact-propsonpress
Andy Lebowitz
Andy Lebowitz

Reputation: 1501

(React Native) onPress doesn't work for Text component

I'm trying to get the onPress to work, but "hi" is not being printed. In fact, the gray default background that should show behind the text when it is clicked does not show. If I replace the nested text with a TouchableHighlight component, it does print. However, this needs to be a continuous flow of text that wraps onto the next line, so TouchableHighlight will not be suitable.

<Text>   
    <Text>Thanks for visiting the app! Please click </Text>
    <Text onPress={() => { console.log("hi") }}> here right now! </Text>
    <Text>to sign in</Text>
</Text>

The actual code is slightly more complex than the above, but it's basically a few text components nested inside one larger text component (this is so the text can wrap to next line and looks like one piece of text). Any ideas on how to get onPress for the text component to work? Thanks!

What it should look like (bold text represents what's clickable):

Please click here
right now to sign in.

What it should NOT look like (cannot use View as outside holder instead of text):

Please click here right to sign in. 
             now

Upvotes: 5

Views: 11285

Answers (2)

Curious Kid
Curious Kid

Reputation: 1

<Text 
style={{ color: "darkgrey" }}>
Dont have an account ?
</Text>

<Text 
style={{ color: "blue", textDecorationLine:'underline' }} 
onPress={() => navigation.navigate("Register")}> 
Sign up </Text>

Upvotes: 0

B. Mohammad
B. Mohammad

Reputation: 2464

I had a similar issue and i used a combination of Text and TouchableOpacity wrapper in a View with flexWrap : wrap, check out a demo

here is the code :


const test = () => {
  return ( 
    <View style={styles.container}>
      <Text style={styles.textPart1}>
      test you text {' '}
      </Text>
      <TouchableOpacity>
        <Text style={styles.textPart2}>
       clickable text
        </Text>
        </TouchableOpacity>    
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap',
    justifyContent: 'center',
    alignContent: 'center',
    padding: 10,
  },
  textPart1: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#5F5F5F',
  },
  textPart2: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#428947',
    textDecorationLine: 'underline',
  },
});

Upvotes: 1

Related Questions