--- title: How to setup Overmind with React Native (or Expo) published: true description: tags: overmind, react native, expo --- ![GIF showing an android emulator besides VSCode. The counter app running in the emulator reacts to inputs from VSCode and vice-versa](https://github.com/brasilikum/react-native-overmind/raw/master/demo.gif) [Overmind](https://overmindjs.org/?view=react&typescript=true) 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](https://github.com/brasilikum/react-native-overmind). # Installation ```bash yarn add overmind overmind-react ``` or ```bash 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: ```ts // 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: ```ts // overmind/actions.ts import {Action} from 'overmind'; export const increment: Action = ({state}, incrementBy) => { state.counter += incrementBy; }; export const decrement: Action = ({state}, decrementBy) => { state.counter -= decrementBy; }; ``` Next let’s setup our Overmind config: ```ts // 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 {} } export const useOvermind = createHook(); ``` 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. ```jsx // 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 ( ); }; ``` 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: ```tsx // 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 ( {state.counter.toString()} ); } ``` 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](https://marketplace.visualstudio.com/items?itemName=christianalfoni.overmind-devtools-vscode) and they will find each other. I published an integration on an empty react native project here: [github.com/brasilikum/react-native-overmind](https://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`: ```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](https://overmindjs.org/guides?view=react&typescript=true) on the Overmind website to get up to speed. Happy Coding!

brasilikum

How to setup Overmind with React Native (or Expo)

Join Our Newsletter. No Spam, Only the good stuff.