The Hidden Gems of React Native

State of React Native

TLDR;

• Jotai: An atomic approach to State management
• Valtio: Proxy state made simple
• Shopify Restyle: Build a consistent, themed UI in minutes
• Ignite (Infinite Red): The battle-tested React Native boilerplate
• Maestro: The simplest and most effective mobile UI testing framework

About this article

Jotai: An atomic approach to State Management

Why Jotai is so great?

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <View>
      <Text>{count}</Text>
      <TouchableOpacity onPress={() => setCount(c => c + 1)}>
        increment
      </TouchableOpacity>
    </View>
  );
}

Atoms With Storage

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV({
  id: 'define.an.id',
});

const createJotaiStorage = <T>() =>
  createJSONStorage<T>(() => ({
    getItem: key => {
      return storage.getString(key) ?? null;
    },
    setItem: (key, value) => storage.set(key, value),
    removeItem: key => storage.delete(key),
  }));

import {
  createJSONStorage,
  atomWithStorage as jotaiAtomWithStorage,
} from 'jotai/utils';

// Get On Init will ensure that the atom will be initialized with the value from the storage
// and it must be used in combination with React Suspense
export const defaultStorageOptions = {
  getOnInit: true,
};

export const atomWithStorage = <T>(key: string, initialValue: T) => {
  const storage = createJotaiStorage<T>();

  return jotaiAtomWithStorage<T>(
    key,
    initialValue,
    storage,
    defaultStorageOptions
  );
};

Valtio: Proxy state made simple

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0, text: 'hello' });

function Counter() {
  const snapshot = useSnapshot(state);
  return (
    <View>
      <Text>{snapshot.count}</Text>
      <TouchableOpacity onPress={() => state.count++}>
        increment
      </TouchableOpacity>
    </View>
  );
}

• How Valtio Proxy State Works (Vanilla Part)
• How Valtio Proxy State Works (React Part)

Shopify Restyle: Build a consistent, themed UI in minutes

import { createTheme } from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

Ignite (Infinite Red): The battle-tested React Native boilerplate

Maestro: The simplest and most effective mobile UI testing framework

Conclusion