Skip to content

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

@dreamrjj

Description

@dreamrjj
  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>
);
}`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions