friyiajr / cardshiftanimation Goto Github PK

Hi there,

first of all thanks for your video. It inspired me to integrate your code into my project. Unfortunately, I am running into an issue when dealing with the case of more that 3 cards. For example, when the cards are coming from the backend and you only know the length of the array. Obviously, you cannot create unlimited useSharedValues() for firstPriority, secondPriorty (...nPriority).

So I tried to create an array with priorities rather than initiating each useSharedValue. It works pretty smooth, but it does not seem to update the parent component when I am in the .onEnd() function of the gesture.Pan() domain.

Do you know where the issue could be ?

Keep up the great work :)

`const { height, width } = Dimensions.get("screen");

interface CardContainerProps {
id: number;
name: string;
priorities: SharedValue<number[]>;
priority: number;
}

const CardContainer: FC = ({ id, name, priority, priorities }) => {

const BOTTOM_BUFFER = 30;

const yTranslation = useSharedValue(BOTTOM_BUFFER);

const gesture = Gesture.Pan()
.onBegin(({ translationY }) => {
yTranslation.value = translationY + BOTTOM_BUFFER;
})

.onUpdate(({ translationY }) => {
  yTranslation.value = translationY + BOTTOM_BUFFER;
})
.onEnd(() => {
  let currentPrioritites = priorities.value;

  console.log("Before", priorities.value);

  const lastItem = currentPrioritites[currentPrioritites.length - 1];

  for (let i = currentPrioritites.length - 1; i > 0; i--) {
    currentPrioritites[i] = currentPrioritites[i - 1];
  }

  currentPrioritites[0] = lastItem;

  priorities.value = currentPrioritites;

  console.log("After", priorities.value);

  yTranslation.value = withTiming(BOTTOM_BUFFER, {
    duration: 400,
  });
});

const style = useAnimatedStyle(() => {
return {
position: "absolute",
width: 325,
height: 200,
bottom: 100 - priority * 35,
borderRadius: 20,
zIndex: priority * 100,
backgroundColor: "#fff",
transform: [
{
translateY: yTranslation.value,
},
],
};
});

return (



);
};

const Projects: React.FC = (props: Props) => {
const data = [
{
id: 1,
name: "Name 1 ",
},
{
id: 2,
name: "Name 2",
},
{
id: 3,
name: "Name 3",
},
];

const priorities = useSharedValue<number[]>([0, 1, 2]);

return (


{data.map((d, i) => (

))}


);
};
export default Projects;

const styles = StyleSheet.create({
root: {
flex: 1,
},
flatList: {
marginTop: height * 0.1,
},
container: {
flex: 1,
alignItems: "center",
},
});
`