Weird behaviour of a simple animation ?

[shulinnn]

Hello. Im using this basic code. The animation should behave that when i click on certain container that the container stays with flex : 1 and the rest will get flex: 0.
But it behaves that when i click on first container only thing i see on the screen is secnd container and third one. Which should not happen. Anyone know where did i got mistaken ? Thanks in advance.

import { ImageBackground, Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
import React, { useState } from 'react';
import humanBg from "./assets/human_bg.jpg";
import orcBg from "./assets/orc_bg.jpg";
import nightElfBg from "./assets/nightElf_bg.jpg";
import undeadBg from "./assets/test.jpg";
import humanEmblem from "./assets/human_emblem.png";
import orcEmblem from "./assets/orc_emblem.png";
import elfEmblem from "./assets/elf_emblem.png";
import { StatusBar } from 'expo-status-bar';
import { Image } from "expo-image";

export default function App() {

  const selectedRace = useSharedValue(null);


  const handleFlexStyle = (raceStr) => useAnimatedStyle(() => {
    if (selectedRace.value === null) {
      // Initial state: all containers have flex value of 1
      return { flex: withTiming(1) };
    } else if (selectedRace.value === raceStr) {
      // Selected race: expands to flex value of 1
      return { flex: withTiming(1) };
    } else {
      // Other races: collapse to flex value of 0
      return { flex: withTiming(0) };
    }
  })

  return (
    <React.Fragment>
      <StatusBar hidden />
      <SafeAreaView>
        <View style={styles.container}>
          <Animated.View style={[{
            backgroundColor: "rgba(30,47,66,.9)",
            height: "25%"
          }, handleFlexStyle("human")]}>
            <Pressable onPress={() => (selectedRace.value = "human")}>
              <ImageBackground source={humanBg} style={{ height: "100%" }} imageStyle={{ opacity: .1 }}>
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center", width: "100%" }}>
                  <Image source={humanEmblem} style={{ width: "50%", flex: 1 }} contentFit='contain' />
                </View>
              </ImageBackground>
            </Pressable>
          </Animated.View>
          <Animated.View style={[{
            backgroundColor: "rgba(77,40,34,.9)",
            height: "25%"
          }, handleFlexStyle("orc")]}>
            <Pressable onPress={() => (selectedRace.value = "orc")}>
              <ImageBackground source={orcBg} style={{ height: "100%" }} imageStyle={{ opacity: .1 }}>
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center", width: "100%" }}>
                  <Image source={orcEmblem} style={{ width: "50%", flex: 1 }} contentFit='contain' />
                </View>
              </ImageBackground>
            </Pressable>
          </Animated.View>
          <Animated.View style={[{
            backgroundColor: "rgba(35,90,69,.9)",
            height: "100%"
          }, handleFlexStyle("elf")]}>
            <Pressable onPress={() => (selectedRace.value = "elf")}>
              <ImageBackground source={nightElfBg} style={{ height: "100%" }} imageStyle={{ opacity: .1 }}>
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center", width: "100%" }}>
                  <Image source={elfEmblem} style={{ width: "50%", flex: 1 }} contentFit='contain' />
                </View>
              </ImageBackground>
            </Pressable>
          </Animated.View>
          <Animated.View style={[{
            backgroundColor: "rgba(44,42,66,.9)",
            height: "25%"
          }, handleFlexStyle("undead")]}>
            <Pressable onPress={() => (selectedRace.value = "undead")}>
              <ImageBackground source={undeadBg} style={{ height: "100%" }} imageStyle={{ opacity: .1 }}>
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center", width: "100%" }}>
                  <Image source={elfEmblem} style={{ width: "50%", flex: 1 }} contentFit='contain' />
                </View>
              </ImageBackground>
            </Pressable>
          </Animated.View>
        </View>
      </SafeAreaView >
    </React.Fragment >
  );
}
const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    backgroundColor: '#282B3A',
  }
});

[MatiPl01]

Hey!

I think this is what you are trying to achieve, right?

Screen.Recording.2024-07-09.at.00.43.47.mp4

The issue in your implementation is caused by setting the height explicitly in the style of the Animated.View. height shouldn't be mixed with flex properties and, if you want to animate the flex property, remove the height.

[MatiPl01]

Here is my implementation that I used for testing:

import { Pressable, StyleSheet, View } from 'react-native';
import type { SharedValue } from 'react-native-reanimated';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  runOnUI,
} from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
import React from 'react';

export default function App() {
  const selectedRace = useSharedValue<string | null>(null);

  return (
    <>
      <SafeAreaView>
        <View style={styles.container}>
          <FlexContainer
            race="human"
            selectedRace={selectedRace}
            backgroundColor="rgba(30,47,66,.9)"
          />
          <FlexContainer
            race="orc"
            selectedRace={selectedRace}
            backgroundColor="rgba(77,40,34,.9)"
          />
          <FlexContainer
            race="elf"
            selectedRace={selectedRace}
            backgroundColor="rgba(35,90,69,.9)"
          />
          <FlexContainer
            race="undead"
            selectedRace={selectedRace}
            backgroundColor="rgba(44,42,66,.9)"
          />
        </View>
      </SafeAreaView>
    </>
  );
}

type FlexContainerProps = {
  race: string;
  selectedRace: SharedValue<string | null>;
  backgroundColor: string;
};

function FlexContainer({
  race,
  selectedRace,
  backgroundColor,
}: FlexContainerProps) {
  const animatedStyle = useAnimatedStyle(() => {
    if (selectedRace.value === null) {
      // Initial state: all containers have flex value of 1
      return { flex: withTiming(1) };
    } else if (selectedRace.value === race) {
      // Selected
      return { flex: withTiming(1) };
    }
    // Other
    return { flex: withTiming(0) };
  });

  const select = runOnUI((raceStr: string) => {
    if (selectedRace.value === raceStr) {
      selectedRace.value = null;
    } else {
      selectedRace.value = raceStr;
    }
  });

  return (
    <Animated.View style={[{ backgroundColor }, animatedStyle]}>
      <Pressable onPress={() => select(race)} style={styles.fill} />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: '#282B3A',
  },
  fill: {
    flex: 1,
  },
});

[MatiPl01]

I cleaned up your code a bit to remove images that I have don't have locally and avoid conditional hooks rendering