React-native-global-store NPM

React Native Global Store

npmLicense npmVersion

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

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

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;

useGlobalStore

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

Example

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;

connect

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

Example

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);