React Native Global Store

Overview

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.

Features

• 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.

Installation

1. Install React Native Async Storage (required) if not already installed.
2. Install React Native Global Store:

1npm install react-native-global-store

- OR -

1yarn add react-native-global-store

No linking or Pods required. Ready to use!

Usage

GlobalStoreProvider

Wrap your app with GlobalStoreProvider to provide global state management.

Props

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.

Example

1import React from "react";
2import { GlobalStoreProvider } from "react-native-global-store";
3import App from "./App";
4
5const myInitialState = { theme: "light" };
6
7const Root = () => (
8  <GlobalStoreProvider 
9    initialState={myInitialState} 
10    loadingUI={<LoadingComponent />} 
11    persistedKeys={["theme"]}
12  >
13    <App />
14  </GlobalStoreProvider>
15);
16
17export default Root;

useGlobalStore

A hook for accessing and updating the global state in functional components.

Example

1import React from "react";
2import { useGlobalStore } from "react-native-global-store";
3import { Text, Button } from "react-native";
4
5const MyComponent = () => {
6  const [globalState, setGlobalState] = useGlobalStore();
7
8  return (
9    <>
10      <Text>Current Theme: {globalState.theme}</Text>
11      <Button title="Toggle Theme" onPress={() => 
12        setGlobalState({ theme: globalState.theme === "light" ? "dark" : "light" })
13      } />
14    </>
15  );
16};
17
18export default MyComponent;

connect

A higher-order component (HOC) for connecting class components to the global store.

Example

1import React, { Component } from "react";
2import { View, Text, Button } from "react-native";
3import { connect } from "react-native-global-store";
4
5class SettingsScreen extends Component {
6  render() {
7    const { theme, setGlobalState } = this.props;
8    return (
9      <View>
10        <Text>Current Theme: {theme}</Text>
11        <Button title="Toggle Theme" onPress={() => 
12          setGlobalState({ theme: theme === "light" ? "dark" : "light" })
13        } />
14      </View>
15    );
16  }
17}
18
19export default connect(SettingsScreen);

License

MIT

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.