IjzerenHein / IjzerenHein/react-navigation-shared-element
Flickering just before screen transition (only Android)
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
I tried a simple screen transition using this library.
As a result, on Android emulator, flickering occurred just before the screen transition.
Even with the same code, no flickering occurs on iOS emulator.
https://github.com/IjzerenHein/react-navigation-shared-element/assets/94182619/33985d4e-a28c-4794-a348-9aefc5b8ebce
https://github.com/IjzerenHein/react-navigation-shared-element/assets/94182619/b3640bd0-00ca-459f-bec8-e5f0e25a12ca
Environment:
- "react": "18.2.0"
- "react-native": "0.72.6
- "@react-navigation/native": "^6.1.9"
- "react-navigation-shared-element": "^3.1.2"
- "react-native-screens": "^3.26.0"
- "react-native-safe-area-context": "3.3.2"
Code:
```:App.tsx
import React from 'react';
import {Image, StyleSheet, Pressable} from 'react-native';
import {
NavigationContainer,
NavigationProp,
useFocusEffect,
} from '@react-navigation/native';
import {
createSharedElementStackNavigator,
SharedElement,
} from 'react-navigation-shared-element';
type StackParamList = {
List: undefined;
Detail: undefined;
};
const Stack = createSharedElementStackNavigator();
export default function App() {
return (
['image']}
options={{
transitionSpec: {
open: {animation: 'timing', config: {duration: 1000}},
close: {animation: 'timing', config: {duration: 200}},
},
}}
/>
);
}
const ListScreen = ({
navigation,
}: {
navigation: NavigationProp;
}) => {
const [opacity, setOpacity] = React.useState(1);
const handlePress = () => {
setTimeout(() => {
setOpacity(0);
}, 200);
navigation.navigate('Detail');
};
useFocusEffect(() => {
setOpacity(1);
});
return (
);
};
const DetailScreen = () => {
return (
);
};
const styles = StyleSheet.create({
listImg: {
width: 200,
height: 300,
resizeMode: 'contain',
},
detailImg: {
width: 400,
height: 600,
resizeMode: 'contain',
},
});
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the transition from the provided App.tsx and dependency versions on an Android emulator, then compare it with the iOS behavior. Start by tracing the shared-element transition alongside react-native-screens and the delayed opacity change in ListScreen; done means the supplied navigation flow transitions without flickering on Android while preserving the existing behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100