danielkcz

function useFormik(props) {
  // useState to keep the same observable around without recreating it on each render
  const [formik] = React.useState(() =>
    mobx.observable({
      values: props.initialValues || {},
      touched: {}
    })
  )

  // just mutate state, this function itself can be considered an action+reducer 

danielkcz

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Util } from 'expo'

export default class App extends React.Component {
  state = {
    updated: false,
  }
  componentWillMount() {
    Util.addNewVersionListenerExperimental(() => {

danielkcz

const NoChildrenAllowed: ReactFC<NoChildren> = () => null
  
const RequireSingleChild: ReactFC<Required<SingleChild>> = () => null
  
type TProps = Required<SomeChildren> & {
  otherProp: number
}
  
const RequireMoreChildrenAndOtherProps: ReactFC<TProps> = () => null

danielkcz

import { useQuery } from 'react-apollo-hooks'

const RandomGiphy = () => {
  const { tag } = useSettings()
  const { data } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  }
  // handle loading & error states...

danielkcz

export type TEventTriggerPayload<TData> = {
  event: (
    | TEvent<'INSERT', null, TData>
    | TEvent<'UPDATE', TData, TData>
    | TEvent<'DELETE', TData, null>
    | TEvent<'MANUAL', null, TData>
  ) & {
    session_variables: Dictionary
  }
  created_at: ISODateTime

danielkcz

const audioStreamMachine = Machine({
  id: 'audioStream',
  initial: 'idle',
  context: {
    stream: null,
    streamError: null,
  },
  states: {
    idle: {
      on: {

danielkcz

const tickEvent = (gear) => ({ type: 'TICK', gear })

const trainMachine = Machine(
  {
    id: 'train',
    initial: 'inactive',
    context: {
      position: {
        x: 0,
        y: 0,

danielkcz

  React.useEffect(() =>
    mobx.autorun(() => {
      if (props.validate) {
        // MobX will see use of formik.values and rerun this function whenever it is mutated
        formik.errors = props.validate(formik.values);
      }
    }), []
  );

danielkcz

const reset = assign({
  value: ({ initialValue }) => initialValue
})

const updateValue = assign({
  value: (_, ev) => ev.value
})

const isEnterOrTab = (_, ev) => ['Enter', 'Tab'].includes(ev.key)

danielkcz

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)