How to setup Overmind with React Native (or Expo)

Overmind provides frictionless state management for angular, vue and react. It’s also possible to setup with react native where it provides all the same features:

• live reload
• live manipulation of the state
• type safe everything through typescript
• snapshot testing

No native code is required, so this setup works within the limitations of the expo managed workflow.

This guide assumes you already have an existing react native or expo app setup. If you just want to see the result of this guide, you can check out this repo.

Installation

yarn add overmind overmind-react

or

npm i overmind overmind-react

Setup

Let’s start with the minimum possible state we want to use in our app. In your application root, create a folder called overmind and put the following file into it:

// overmind/state.ts
type State = {
  counter: number;
};

export const state: State = {
  counter: 0,
};

You can already see the first benefits of your typed store: If you have a typo in your state you will get a type warning right away.

To do something with our state, we need to define some actions:

// overmind/actions.ts
import {Action} from 'overmind';

export const increment: Action<number> = ({state}, incrementBy) => {
  state.counter += incrementBy;
};

export const decrement: Action<number> = ({state}, decrementBy) => {
  state.counter -= decrementBy;
};

Next let’s setup our Overmind config:

// overmind/index.ts
import { IConfig } from "overmind";
import { createHook } from "overmind-react";
import { state } from "./state";
import * as actions from './actions';

export const config = {state, actions}

declare module "overmind" {
  interface Config extends IConfig<typeof config> {}
}

export const useOvermind = createHook<typeof config>();

Now that Overmind is created, the last step is to connect it to react native. Up until now everything was setup just like with react, and the last step is only slightly different.

// App.jsx / App.tsx
import { config } from "./overmind";
import { Provider } from "overmind-react";
import { createOvermind } from "overmind";
import Content from './Content';

const overmind = createOvermind(config, {
  devtools: "localhost:3031"
});

export default App = props => {
  return (
    <Provider value={overmind}>
       <Content />
    </Provider>
  );
};

This provider setup is very similar to other state management solutions like redux.

What is Content? In a real app here you would probably have a Router but for this demo it's just a simple component:

// Content.tsx
import React from 'react';
import {
  View,
  Text,
  Button,
} from 'react-native';

import {useOvermind} from './overmind';

export default function() {
  const {state, actions} = useOvermind();
  return (
    <View>

      <Button title="Increment" onPress={() => actions.increment(1)}></Button>

      <View>
        <Text
          style={{
            fontSize: 24,
            fontWeight: '600',
            padding: 8,
            textAlign: 'center',
          }}>
          {state.counter.toString()}
        </Text>
      </View>

      <Button title="Decrement" onPress={() => actions.decrement(1)}></Button>

    </View>
  );
}

As you can see, connecting a component is very straight forward and also gives you a fully typed store and actions!

That’s it! You can now run your app and VSCode with the excellent Overmind Extension and they will find each other.

I published an integration on an empty react native project here:
github.com/brasilikum/react-native-overmind

No connection?

React Native runs adb reverse so that your phone can reach your development machine via localhost, but sometimes this fails or is not possible. In this case you can change the IP in the config in app.jsx:

// App.jsx / App.tsx
...

const overmind = createOvermind(config, {
  devtools: "192.168.1.9:3031" // <---
});

...

Next Steps

Besides the setup, there is no difference in use to regular react, so you can refer to the excellent guides on the Overmind website to get up to speed.

Happy Coding!