if-else statement inside jsx not working as expected-CodePudding

I am trying to animate an image in and out when clicked using React Native reanimated, but the JSX if else condition is not working quite right. Below is the code that works, but only works when clicked for the first time. The state toggled is set to true, so when clicked again it should set the size back to the original and the image should animate back to it and vice versa.

The setup is like so:

export default () => {
  const newNumber = useSharedValue(100);
  const [Toggled, setToggled] = useState(false);

  const style = useAnimatedStyle(() => {
    return {
      width: withSpring(newNumber.value),
      height: withSpring(newNumber.value, {  damping: 10,
      stiffness: 90, }),
      
    };
  });

onPress={() => {
          {Toggled ? newNumber.value = 100 : newNumber.value = 350; setToggled(true)}
        }}

The problem is when I try to add the newNumber.Value = 100 when setting Toggled to false, it gives me an error. I try to add it like this :

{Toggled ? newNumber.value = 100; setToggled(false) : newNumber.value = 350; setToggled(true)}

Why does it accept the first one but not the second?

If I use this, it works, but can it be done the other way?

const isToggled = Toggled;
 
if (isToggled) {
  // alert('Is NOT Toggled');
  newNumber.value = 100;
  setToggled(false)
} else {
// alert('Is Toggled');
  newNumber.value = 350;
  setToggled(true)
}

Thanks

CodePudding user response：

It looks you are just setting a value to newNumber base on Toggled, and then setting the Toggled to its opposite value. So why not do

onPress={() => {
  newNumber.value = Toggled ? 100 : 350
  setToggled(prev=>!prev)
}}