Animated.View Elements rendering at 0, 0, logging shows their x.value and y.value shared values as correct

[joshon]

I am making a React Native game, there are tiles that a user can drag and drop. This bug is in rendering the tiles I draw with an Animated. View. Most of the time this code works, but after a drag and drop I call a function in a parent file which causes a rendering of the tiles and incorrectly places all the tiles at 0,0. I console.log the x and y shared values, and they are accurate. I do not know how to debug this. Here is the rendering code that fails:

 return (<GestureDetector gesture={isDraggable ? pan : noPan}>
            <Animated.View
                key={"tile" + id}
                style={{
                    ...styles.tile,
                    width: cellSize,
                    height: cellSize,
                    backgroundColor: bgColor,
                    transform: [{translateX: x}, {translateY: y}], // this is what I suspect is failing and returning 0,0
                    zIndex: zindex,
                    shadowOffset: {width: -2, height: 4},
                    shadowOpacity,
                    shadowRadius,
                    elevation,
                }}
            >
                {console.log("Tile rerender: ", tileSV.value.letter, " id:", id, "x: ", x.value, "y: ", y.value)}
                <Text style={
                    {
                        ...styles.tileText, ...{
                            fontSize: cellSize * 0.5,
                        }
                    }
                }
                >
                    {tileSV.value.letter}
                </Text>
            </Animated.View>
        </GestureDetector>
    );
};

[m-bert]

Hi! Would it be possible to look at whole code? It would be much easier if we could run this on our end and check what actually fails.