Set useNativeDriver to false, and the centered popup will shift to the right after the animation ends

1. The width and height of modalBox are set to 300
2. Pop up box modalBox setting centered
3. Set useNativeDriver to false
4. After the pop-up animation ends, the position shifts to the right

Reason for the problem: JS layer rendering calculates width and height, and non same thread may cause native animations to not update
Solution: Horizontal centering using alignSelf: 'center', modifying renderContent() can solve this type of problem

`renderContent() {
const size = {
height: this.state.containerHeight,
width: this.state.containerWidth
};
// const offsetX = (this.state.containerWidth - this.state.width) / 2;

return (
<Animated.View
onLayout={this.onViewLayout}
style={[
styles.wrapper,
size,
this.props.style,
{
alignSelf: 'center', //New addition
transform: [
{translateY: this.state.position}
// {translateX: offsetX}
]
}
]}
{...this.state.pan.panHandlers}>
{this.props.children}
</Animated.View>
);
}`

Start by locating renderContent() and inspect the Animated.View styling around the modalBox dimensions, centering, and useNativeDriver behavior. Reproduce the issue with a 300x300 modalBox and useNativeDriver set to false; done means the popup remains horizontally centered after the animation ends.