How to stop running old screen on React Native Expo

Question

I use React Navigation for moving the screen.

I set stack screen like this:

<Stack.Screen name="camera" component={Opencamera} options={{headerShow: false}} />
<Stack.Screen name="previewpic" component={Previewpic} options={{headerShow: true}} />

so when I navigate 'camera' to 'previewpic' I can, but process in camera is running. (This issue only occurs on ios devices.)

I need to moving to previewpic screen without camera screen running. thank you.

Which `camera` library are you using? `expo camera` or `react-native-camera`? — A G, May 12 '22 at 12:21
I make face detect in camera screen and I log it, when I moving to `previewpic` screen , terminal log code from camera screen all time — Jap_ppp, May 12 '22 at 13:04
This seems to be an issue with the Expo Camera library itself and not related to react navigation. As unmount is called correctly when we go back from Screen B to Screen A. I'm still looking into how can we stop the Expo Camera upon navigation change — Sudhanshu Bhagwat, Jun 10 '22 at 10:35

score 0 · Answer 1 · edited Oct 28 '22 at 08:41

Option 1: Use the unmountOnBlur property, this will unmount the screen when the route changes;

<Stack.Screen name="camera" component={Opencamera} options={{headerShow: false, unmountOnBlur: true}} />
<Stack.Screen name="previewpic" component={Previewpic} options={{headerShow: true}} />

Option 2: useIsFocused hook:

import { useIsFocused } from '@react-navigation/native';

....
// This hook returns `true` if the screen is focused, `false` otherwise
const isFocused = useIsFocused();

 return (isFocused &&  <Camera  />)
....

How to stop running old screen on React Native Expo

1 Answers1