Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for Rotated elements

See original GitHub issue

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>
  );
}