Skip to content

Commit

Permalink
Persist current screen during fast refresh on web (#4343)
Browse files Browse the repository at this point in the history
## Summary

Previously, WebExample used to return to home screen after each fast
refresh which was quite a poor developer experience. This PR adds
linking so that the current screen persists. Note that the missing back
button after fast refresh is a well-known issue in react-navigation for
web but fortunately the browser back button works just fine.


https://user-images.githubusercontent.com/20516055/230615121-4b6d96db-23ca-4540-974a-0f76f9869bc2.mp4

## Test plan

1. Launch WebExample
2. Open Bokeh example
3. Save BokehExample.tsx to trigger fast refresh
4. The app shouldn't go back to home screen
  • Loading branch information
tomekzaw committed Apr 12, 2023
1 parent 7a6424a commit 66dc049
Showing 1 changed file with 15 additions and 1 deletion.
16 changes: 15 additions & 1 deletion app/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ import {
NativeStackNavigationProp,
createNativeStackNavigator,
} from '@react-navigation/native-stack';
import { NavigationContainer, PathConfigMap } from '@react-navigation/native';

import AsyncStorage from '@react-native-async-storage/async-storage';
import { EXAMPLES } from './examples';
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';

type RootStackParamList = { [P in keyof typeof EXAMPLES]: undefined } & {
Expand Down Expand Up @@ -104,6 +104,19 @@ function ItemSeparator() {

const Stack = createNativeStackNavigator<RootStackParamList>();

const linking = {
prefixes: [],
config: {
screens: EXAMPLES_NAMES.reduce<PathConfigMap<RootStackParamList>>(
(acc, name) => {
acc[name] = name;
return acc;
},
{ Home: '' }
),
},
};

// copied from https://reactnavigation.org/docs/state-persistence/
const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';

Expand Down Expand Up @@ -148,6 +161,7 @@ export default function App() {
return (
<GestureHandlerRootView style={styles.container}>
<NavigationContainer
linking={linking}
initialState={initialState}
onStateChange={(state) =>
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
Expand Down

0 comments on commit 66dc049

Please sign in to comment.