Support for Rotated elements

[josh0707]

Hi, Thank you for this library and the React Navigation binding.

Currently the library supports transition when element was scaled. Could it also support transition when element was rotated ?

Current behavior: The element jumps from a rotated position to the next position without any transition.

Expected behavior: During the transition, the element rotates to its new position, then on back button pressed, the element rotates back to its previous position.

Example:

// Main Screen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#C14534',
  },
  paper: {
    backgroundColor: '#EC806E',
    position: 'absolute',
    left: 10,
    top: Dimensions.get('window').height * 0.5 - 150,
    width: Dimensions.get('window').width * 0.65,
    height: Dimensions.get('window').height * 0.45,

    transform: [{ rotate: '-20deg' }],

    shadowColor: '#000',
    shadowRadius: 5,
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.4,
  },
});

export const MainScreen = (props: IMainProps) => {
  return(
    <TouchableOpacity activeOpacity={1} style={styles.container}  
      onPress={()=> props.navigation.navigate('Details')}>

      <SharedElement id='paper' style={styles.paper}>
        <View />
      </SharedElement >

    </TouchableOpacity>
  );
}

// Details Screen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#C14534',
  },
  paper: {
    backgroundColor: '#FFFFFF',
    position: 'absolute',
    left: 0,
    top: Dimensions.get('window').height * 0.5,
    bottom: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 70,
    padding: 10,
  },
});

export const DetailsScreen = (props: IMainProps) => {
  return (
    <TouchableOpacity activeOpacity={1} style={styles.container} 
      onPress={()=> props.navigation.goBack()}>

      <SharedElement id='paper' style={styles.paper}>
        <View />
      </SharedElement >

    </TouchableOpacity>
  );
}

[IjzerenHein]

Hi, can you share a Video demonstrating the problem?

[josh0707]

As you can see, the shared elements scale but don't rotate to their new position.

[josh0707]

Here is the expected result:

[IjzerenHein]

Yup I'm seeing it. This one will be a bit tricky to implement. Will try to take it into consideration for the next update.

[Jojr]

@josh0707 I trying to do this same approach here. Is there any way to just add that right now?

[amak07]

@IjzerenHein would love to see this as an enhancement for transitioning shared elements that rotate at the destination. Thanks for the library so far!

[jp928]

Same here!

[jp928]

As a workaround, I am using when detail screen enters in

useFocusEffect(
  React.useCallback(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      // rotate animation
    });

    return () => task.cancel();
  }, [])
);

and

React.useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', (data) => {
      // rotate animation
    });

    return unsubscribe;
  }, [navigation]);

when detail screen moves out