2

I have been trying to use wix react native navigation shared element transition animation. But it is not working and there doesn't seem much help out there regarding this.

Screen 2 is getting pushed in stack but there is no shared element animation. I have tried almost everything. Nothing works

Screen1:

<View style={styles.inputContainer}>

              <Button
                title="SignUp"
                style={{...buttonStyle, ...formDimensions.dimensions}}
                nativeID={`signUpButton1`}
                onPress={() => {
                  this.signUpButtonHandler();
                }}
              />
    </View>

signUpButtonHandler = () => {
    Navigation.push(this.props.componentId, {
      component: {
        name: 'mainApp.SignUpScreen',
      },
      options: {
        animations: {
          push: {
            enabled: true,
            sharedElementTransitions: [
              {
                fromId: `signUpButton1`,
                toId: `signUpButtonDest`,
                duration: 300
              },
            ],
          },
        },
      },
    });
  };

Screen 2:

<View style={styles.inputContainer}>
              <Button
                title="SignUp"
                style={{
                  ...buttonStyle,
                  ...formDimensions.dimensions,
                  ...styles.button,
                }}
                nativeID={`signUpButtonDest`}
                onPress={() => {
                  this.signUpButtonHandler();
                }}
              />

0 Answers0