On react-native, i would like to open a modal when a deeplink is fired and keep initial stack behind.
It's works when app is in foreground or background.
But when app is inactive and deeplink fired, only AddStack is present. I can't close modal (TakePicture) and show MainStack (Purchase).
How keep the MainStack behind the modal ?
My deeplink is app_scheme://purchases/purchase/new/:purchaseId
function App() {
const ref = useRef();
const logged = useSelector((state) => state.user.logged);
const { getInitialState } = useLinking(ref, {
prefixes: ['app_scheme://'],
config: {
AddStack: {
screens: {
TakePicture: {
path: 'purchases/purchase/new/:purchaseId',
parse: {
purchaseId: Number,
},
},
},
},
},
});
const [isReady, setIsReady] = useState(false);
const [initialState, setInitialState] = useState();
React.useEffect(() => {
Promise.race([
getInitialState(),
new Promise((resolve) =>
// Timeout in 150ms if `getInitialState` doesn't resolve
// Workaround for https://github.com/facebook/react-native/issues/25675
setTimeout(resolve, 150),
),
])
.catch((e) => {
console.error(e);
})
.then((state) => {
if (state !== undefined) {
setInitialState(state);
}
setIsReady(true);
});
}, [getInitialState]);
if (!isReady) {
return null;
}
return (
<NavigationContainer initialState={initialState} ref={ref}>
{logged ? <RootStack /> : <AuthStack />}
</NavigationContainer>
);
}
function RootStack() {
return (
<Stack.Navigator mode="modal" initialRouteName="MainStack">
<Stack.Screen
name="MainStack"
component={MainStack}
options={{ headerShown: false }}
/>
<Stack.Screen
name="AddStack"
component={AddStack}
options={{
headerShown: false,
}}
/>
...
</Stack.Navigator>
);
}
function MainStack() {
return (
<Stack.Navigator initialRouteName="Purchases">
<Stack.Screen
name="Purchases"
component={Purchases}
/>
<Stack.Screen
name="PurchaseDetail"
component={PurchaseDetail}
/>
...
</Stack.Navigator>
);
}
export default function AddStack() {
return (
<Stack.Navigator initialRouteName="TakePicture">
<Stack.Screen
name="TakePicture"
component={TakePicture}
/>
...
</Stack.Navigator>
);
}