React Native, onPress not working on icon imported from fontAwesome-CodePudding

I am building my first React Native app and needed to use fontAwesome for a star icon. I needed to use the onPress function to update the highlight variable and change the star's color. But when I tried to run it in expo and pressed on a star, nothing happened and the variable remained the same.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, Image, Button } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons'
import React, {useState, useEffect} from 'react'

export default function Detail(props) {
  const movie = props.navigation.getParam('movie', null) 
  const [ highlight, setHeighlight] = useState(0)

  const rateclicked = () => {
      console.log(highlight);
  }


  return (
    <View style={styles.container}>

        <View style={styles.starContainer}>
            <FontAwesomeIcon style={movie.avg_rating > 0 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 1 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 2 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 3 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 4 ? styles.orange : styles.white} icon={faStar}/>
            <Text style={styles.white}>({movie.no_of_ratings})</Text>
        </View>

        <Text style={styles.description}> {movie.description}</Text>
        <View style={{borderBottomColor: 'white', borderBottomWidth: 2}}/>
        <Text style={styles.description}>Rate it !!!</Text>

        <View style={styles.starContainer}>
            <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(1)}/>
            <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(2)}/>
            <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(3)}/>
            <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(4)}/>
            <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(5)}/>
            
        </View>
        <Button title="Rate" onPress={() => rateclicked()}/>
    </View>
  );
}

Detail.navigationOptions = screenProps => ({
    title: screenProps.navigation.getParam('title'),
    headerStyle: {
        backgroundColor: 'orange',

    },
    headerTintColor: '#fff',
    headerTitleStyle: {
        fontWeight: 'bold',
        fontSize: 24,
    },
    headerRight: () => {
        <Button title="Edit" color="white"
        onPress={() => screenProps.navigation.navigate("Edit", {movie: screenProps.navigation.getParam("movie")})} />
    
    },


})

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    padding: 10,
    backgroundColor: '#282C35',
    
  },

  item: {
    flex: 1,
    padding: 10,
    height: 50,
    backgroundColor: '#282C35'

  },

  itemText: {
    color:'#ffff',
    fontSize: 24,
  },

  starContainer: {
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
  },

  orange: {
      color: 'orange',

  },

  white: {
      color: 'white',
  },

  description: {
    fontSize: 20,
    color: 'white',
    padding: 10,
  },

  purple: {
    color: 'purple'
  },

  grey: {
      color: 'grey'
  },
});

How can I solve this issue?

CodePudding user response：

Not everything is clickable in React Native as it's with HTML elements. FontAwesomeIcon is one of the components that does not have an onPress property. You need for example to wrap it inside a Pressable component, like so:

// you import it at the top of the component
import { Pressable } from "react-native"

<Pressable onPress={()=> setHeighlight(1)}>
  <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} />
</Pressable>