React Native Global Store is a lightweight and efficient global state management solution for React Native with built-in AsyncStorage persistence. It provides an easy-to-use API for managing state globally without the complexities of Redux or Context APIs.
- No store configuration required.
- No reducers or actions needed.
- Pure JavaScript (TypeScript supported).
- No middleware or dispatch complications.
- Simple API similar to React's
useState. - Easy connection with components using
connect. - Functional component support with
useGlobalStore. - Inspired by Redux but optimized for simplicity and performance.
- Automatically persists selected state keys using AsyncStorage.
- Install React Native Async Storage (required) if not already installed.
- Install React Native Global Store:
npm install react-native-global-store- OR -
yarn add react-native-global-storeNo linking or Pods required. Ready to use!
Wrap your app with GlobalStoreProvider to provide global state management.
| Prop | Type | Default | Description |
|---|---|---|---|
initialState |
object |
{} |
Initial state for the store. |
persistedKeys |
string[] |
[] |
Keys to persist in AsyncStorage. |
loadingUI |
JSX.Element |
<View /> |
UI to display while loading persisted state. |
storageKey |
string |
"GlobalStoreProvider" |
Unique key for AsyncStorage. |
import React from "react";
import { GlobalStoreProvider } from "react-native-global-store";
import App from "./App";
const myInitialState = { theme: "light" };
const Root = () => (
<GlobalStoreProvider
initialState={myInitialState}
loadingUI={<LoadingComponent />}
persistedKeys={["theme"]}
>
<App />
</GlobalStoreProvider>
);
export default Root;A hook for accessing and updating the global state in functional components.
import React from "react";
import { useGlobalStore } from "react-native-global-store";
import { Text, Button } from "react-native";
const MyComponent = () => {
const [globalState, setGlobalState] = useGlobalStore();
return (
<>
<Text>Current Theme: {globalState.theme}</Text>
<Button title="Toggle Theme" onPress={() =>
setGlobalState({ theme: globalState.theme === "light" ? "dark" : "light" })
} />
</>
);
};
export default MyComponent;A higher-order component (HOC) for connecting class components to the global store.
import React, { Component } from "react";
import { View, Text, Button } from "react-native";
import { connect } from "react-native-global-store";
class SettingsScreen extends Component {
render() {
const { theme, setGlobalState } = this.props;
return (
<View>
<Text>Current Theme: {theme}</Text>
<Button title="Toggle Theme" onPress={() =>
setGlobalState({ theme: theme === "light" ? "dark" : "light" })
} />
</View>
);
}
}
export default connect(SettingsScreen);MIT
Contributions are welcome! Feel free to open issues or submit pull requests.