async-storage VS react-native-navigation

\[@RNC/AsyncStorage\]: NativeModule: AsyncStorage is null. To fix this issue try these steps: • Rebuild and restart the app. • Run the packager with \`--reset-cache\` flag. • If you are using CocoaPods on iOS, run \`pod install\` in the \`ios\` directory and then rebuild and re-run the app. • If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-async-storage/async-storage/issues 5 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; 6 | import { Platform } from 'react-native'; > 7 | import AsyncStorage from '@react-native-async-storage/async-storage';

Storage: redux-persist, @react-native-async-storage/async-storage

You want this: react-native-async-storage

What do you mean by local storage? The browser based localStorage API does not exist by default in react-native. There is an analogue though... The most basic package that most people use, AsyncStorage is just a string based key-value store: https://github.com/react-native-async-storage/async-storage . It's very useful for anything simple. It also has a merge function which lets you automatically update stringified JSON objects without unpacking them and doing the modifications yourself.

Android - SQLite

Since the original React Native AsyncStorage was deprecated, you may be using the community solution: react-native-async-storage. I would personally recommend it!

I think that you using a deprecated package to store your state. Verify if you are using https://github.com/react-native-async-storage/async-storage.

State management, orchestrating HTTP requests, synchronizing client and server state: all these things will apply to React Native. The differences will only arise when the device layer comes into play (for example, if you have to store data on the client, window.localStorage doesn’t exist, but AsyncStorage does.)

Looks like this feature is not available (check here and here) yet. Good luck mate

another option is react-native-navigation which I haven't used yet but as the document says:

The behavior was reported in their issues 2 years ago: https://github.com/wix/react-native-navigation/issues/6174

At this point don't have a clear preference over which package to use in my next project (react-navigation or react-native-navigation) - they both have strengths and weaknesses, one is easier to actually work with, one is faster in terms of execution, one has better APIs, docs, community, etc.

class Home extends React.PureComponent { constructor(props: Props) { super(props); Navigation.events().bindComponent(this); } closeMenu = () => { this._drawer.close(); }; openMenu = () => { this._drawer.open(); }; static options(passProps) { return { topBar: { rightButtons: [ { component: { name: 'MenuButton', passProps: { onClick: () => this.openMenu(), }, }, }, ], }, }; } render() { return ( ... ); }} Reference I got my passProps code from: https://github.com/wix/react-native-navigation/issues/3648

Thanks! React Native to build the app. React Native Navigation from Wix to build the navigation so the app feels native.

There are two major navigation libraries in React Native world: react-navigation and react-native-navigation. They are both widely used among the community.

You can have a look at React Native Navigation: https://wix.github.io/react-native-navigation/

To navigate between screens, you will probably end up using the very popular React Navigation library. There is a great, purely native alternative, React Native Navigation (the names get confused easily), from Wix. It is super performant but not that flexible. Therefore, again: If your design asks you for something custom, you have no choice but to go with React Navigation; luckily, it is a great, well-documented option.