- The width and height of modalBox are set to 300
- Pop up box modalBox setting centered
- Set useNativeDriver to false
- 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>
);
}`