IjzerenHein / IjzerenHein/react-native-shared-element

Support for Rotated elements

Open
#25 8 comments 3 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.