IjzerenHein / IjzerenHein/react-navigation-shared-element

Flickering just before screen transition (only Android)

Open
#282 2 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.