The useState variable "focus" is not updating when onPressIn and onPressOut is called, it keeps returning the initial value of "focus"

Question

const LiveTV = () => {

  const [focus, setFocus] = useState(false);

  const Item = ({ item }) => {
    return (
      <Pressable
        style={[styles.channelView, focus ? styles.wrapperFocused : null]}
        onPress={() => {
          setChannelPlaying(item);
        }}
        onPressIn={() => {
          setFocus(true);
          console.log(focus);
        }}
        onPressOut={() => {
          setFocus(false);
          console.log(focus);
        }}
      >
        
      </Pressable>
    );
  };

When the onPressIn is called, it's meant to change the "focus" value to true, but it remains at false and also when the onPressOut is called, it is meant to set the "focus" to false

score 0 · Accepted Answer · answered Dec 24 '22 at 10:24

The reason you are seeing the old state still present in the onPressIn function is because in the time of the trigger of the function the state has no been changed yet. What that means is that basically, the state changes and works as you'd expect it to work on component level, and the value that you are logging in onPressIn is actually correct. If you console.log the state focus above your return you will see that the value changes according to your input. I've made a small snack here, you can see that the state actually works and its represented in the color of the button being different based on the state. https://snack.expo.dev/jdrgi3MlV

The useState variable "focus" is not updating when onPressIn and onPressOut is called, it keeps returning the initial value of "focus"

1 Answers1