atomWithStorage not working in ReactNative

[ahdam]

Hello,

I'm facing issues with atomWithStorage on ReactNative.
Current screen setup:
StackScreen1 - no children
StackScreen2 - has a TabNavigator with 3 tabs
TabScreen1
TabScreen2
TabScreen4

I want to save the last accessed tab in AsyncStorage.
The code below works when navigating from StackScreen2 to StackScreen1 and back to StackScreen2. In this case, the value is stored correctly in the atom, and I can read it fine, and set it to the initialRouteName param of the TabNavigator
The problem is every time I refresh the app, the value from the atom is gone (by this I mean it reverts to the default one: {value: "Tab 1"}).

Has anyone encountered this before?

This is my setup:

// atom creation
import {atomWithStorage, createJSONStorage} from 'jotai/utils';
import AsyncStorage from '@react-native-async-storage/async-storage';

const storage = createJSONStorage(() => AsyncStorage);
export const lastAccessedTab = atomWithStorage(
  'last-tab',
  {value: 'Tab 1'},
  storage,
);

// update atom
const TabScreen2 = (): React.JSX.Element => {
  const isFocused = useIsFocused();
  const setLastScreen = useSetAtom(lastAccessedTab);

  useEffect(() => {
    if (isFocused) {
      setLastScreen({value: 'Tab 2'});
    }
  }, [isFocused]);

  return (
    <SafeAreaView>
      <Section title="Tab Screen 2">some content</Section>
    </SafeAreaView>
  );
};

// read from atom
const StackScreen2 = (): React.JSX.Element => {
  const Tab = createMaterialBottomTabNavigator();
  const lastUsedTab = useAtomValue(lastAccessedTab) as any;

  useEffect(() => {
    console.log('lastUsedTab', lastUsedTab);
  }, [lastUsedTab]);

  return (
    <Tab.Navigator initialRouteName={lastUsedTab.value}>
      <Tab.Screen name="Tab 1" component={TabScreen1} />
      <Tab.Screen name="Tab 2" component={TabScreen2} />
      <Tab.Screen name="Tab 3" component={TabScreen3} />
    </Tab.Navigator>
  );
};

[ahdam]

I found the solution.
I needed to add the getOnInit option.
Without this option, the whole atomWithStorage for ReactNative doesn't work as expected.
I would suggest adding this small thing to the documentation.
Or, even better, make this option default to "true" since only by enabling it this atomWithStorage works as expected.

[johannbuscail]

Hello @dai-shi, even after adding getOnInit, the atom in the storage is gone and everything is reset. Is there any other reason this wouldn't work. Here is my function:

const storage = Platform.OS === 'web' ? createJSONStorage() : createJSONStorage(() => AsyncStorage);
export const isOnboardedAtom = atomWithStorage(
	'isOnboardedAtom',
	false,
	storage,
	{
		getOnInit: true,
	}
);

[dai-shi]

It looks good to me. Can you reproduce it with web?

[johannbuscail]

Yes it also resets on the web

[dai-shi]

Can you then create a very minimal reproduction with https://stackblitz.com ?

[johannbuscail]

All solved ! It actually was an error with Expo that needed to be rebuilt. Thanks!

[adelpro]

export const isOnboardedAtom = atomWithStorage(
	'isOnboardedAtom',
	false,
	storage,
	{
		getOnInit: true,
	}
);

How to add types here? thanks

[dai-shi]

jotai/src/vanilla/utils/atomWithStorage.ts

Lines 211 to 216 in 7c8ea63

	export function atomWithStorage<Value>(
	key: string,
	initialValue: Value,
	storage?: SyncStorage<Value>,
	options?: { getOnInit?: boolean },
	): WritableAtom<Value, [SetStateActionWithReset<Value>], void>

Ideally storage could be typed. Otherwise you can explicitly pass Value type.