Version 2.12.0

🥂 compatible with React Native

Example code below:

import React from "react";
import { TextInput, Button, View, AsyncStorage } from "react-native";
import {
  StateMachineProvider,
  createStore,
  setStorageType,
  useStateMachine
} from "little-state-machine";
import { useForm, Controller } from "react-hook-form";
import * as yup from "yup";

setStorageType(AsyncStorage);

createStore({});

function update(state, payload) {
  return {
    ...state,
    ...payload
  };
}

let counter = 0;

const Form = () => {
  const { handleSubmit, control, errors } = useForm({
    validationSchema: yup.object().shape({
      firstName: yup
        .string()
        .label("Name")
        .required()
    })
  });
  const { action, state } = useStateMachine(update);

  const onSubmit = formData => {
    action(formData);
  };

  const onChange = args => {
    return {
      value: args[0].nativeEvent.text
    };
  };
  
  counter++;

  return (
    <View style={{ marginTop: 40 }}>
      <Controller
        as={
          <TextInput
            style={{ borderWidth: 1, height: 80 }}
            placeholder="your name"
          />
        }
        control={control}
        name="firstName"
        onChange={onChange}
        defaultValue={state.firstName}
      />
      <Controller
        as={<TextInput style={{ borderWidth: 1, height: 80 }} />}
        control={control}
        name="lastName"
        onChange={onChange}
        defaultValue={state.lastName}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};

const App = () => (
  <StateMachineProvider>
    <Form />
  </StateMachineProvider>
);

export default App;