Category item not clickable (touchable)

React Native
1

hi there,
im on the second part of the react native course but i noticed that the item from the ‘category’ popup dont respond on clicks or touches.
anyone had the same issue?
im talking about this:

Screenshot 2021-03-12 at 21.19.23
Screenshot 2021-03-12 at 21.19.23434×811 92.7 KB

2

Hi there, I’ve noticed the same issue.

Did some file research and found missing info in the “Building CategoryPicketItem component” video. The onPress event in the function is not being called again. Unfortunately I do not know how to fix this but maybe someone else can.

help us out fellow learners!

function CategoryPickerItem({ item, ***onpress***}) {
return (
    <View style={styles.container}>
        <Icon backgroundColor={item.backgroundColor} name={item.icon} size={80} />
        <AppText style={styles.label}>{item.label}</AppText>
    </View>
);

}

Kind regards, Roel

3

I’ve found an solution!! As I said, the onPress event was not handled. You need to add TouchableOpacity with the onPress event like this:

    <View style={styles.container}>
  <TouchableOpacity onPress={onPress}>
    <Icon
      backgroundColor={item.backgroundColor}
      name={item.icon}
      size={80}
    />
  </TouchableOpacity>
  <AppText style={styles.label}>{item.label}</AppText>
</View>

Make sure to restart expo/npm and try to run it again.

Good luck!

2 Likes
4

Also, using Android simulator, there are problems rendering this screen. Here are the styles I used to fix the problems. Also, I changed the data input for one item:

{ label: “Movies &\n Music”, value: 7, backgroundColor: “#cc9966”, icon: “filmstrip” },

And the styles:

container:{

        width: '100%',

        paddingVertical: 15,

        padding:'6%',

        alignItems:"center"

    },

    label:{

        textAlign: 'center',

        paddingVertical:3,

    }