IjzerenHein / IjzerenHein/react-native-shared-element
Support for Rotated elements
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 113
- PR merge metrics
- No merged PRs in 30d
Description
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(
props.navigation.navigate('Details')}>
);
}
// 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 (
props.navigation.goBack()}>
);
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
No source file, test, or entry point is named in the issue. Start by reproducing the provided React Navigation example and tracing the shared-element transition implementation; done means rotated elements animate to the destination rotation and rotate back correctly when navigating back.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100