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

Question

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

Turns out my solution was to just clean and rebuild the project.... — Andy Lebowitz, Apr 21 '20 at 18:12

B. Mohammad · Answer 1 · 2020-04-21T17:34:25.723

1

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',
  },
});

edited Apr 21 '20 at 17:34

answered Apr 21 '20 at 17:27

B. Mohammad

2,152
1
13
28

Works. Thank you! – Andy Lebowitz Apr 21 '20 at 17:35
Sorry but actually the issue is still there. Yes, I can tap the text, but the outside view doesn't wrap all the text correctly (it's still laying out the text components in a row like they are views) – Andy Lebowitz Apr 21 '20 at 17:40
sorry your example doesn't work. I'll update my question to say what that looks like – Andy Lebowitz Apr 21 '20 at 17:49
no problem, i tested with onPress in Text it does show log https://snack.expo.io/ZVd_tOOgyR – B. Mohammad Apr 21 '20 at 17:52
1

yeah but that's not working on my end and I'm not too sure why – Andy Lebowitz Apr 21 '20 at 17:55
sorry to bother but even your code is working https://snack.expo.io/e0BzEvCUM – B. Mohammad Apr 21 '20 at 18:01
hmm yeah but it's not on my end for some reason. the code is similar, not exactly the same, but the structure is the same – Andy Lebowitz Apr 21 '20 at 18:03

Curious Kid · Answer 2 · 2022-11-03T07:12:39.550

0

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

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

edited Nov 03 '22 at 07:12

answered Nov 03 '22 at 07:07

Curious Kid

1
1

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Nov 03 '22 at 08:32

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

2 Answers2