Expo Snack using React Hooks not working

[deadcoder0904]

I am trying to add React Hooks into Expo & getting an error.

TypeError: i.useState is not a function. (In ‘i.useState(e)’, ‘i.useState’ is undefined)

The whole code is

import useFormal from '@kevinwolf/formal-native'
import React from 'react'
import { Alert, SafeAreaView, StyleSheet, View } from 'react-native'
import { Button, Input, Text } from 'react-native-elements'
import * as yup from 'yup'

const schema = yup.object().shape({
  Username: yup.string().required(),
  Email: yup
    .string()
    .email('Invalid Email Address')
    .required(),
  Password: yup
    .string()
    .min(4)
    .max(32)
    .matches('^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]$')
    .required(),
  ConfirmPassword: yup
    .string()
    .oneOf([yup.ref('Password'), null], "Passwords don't match")
    .required(),
})

const initialValues = {
  Username: 'lmaowtf',
  Email: 'asshole',
  Password: 'wtf',
  ConfirmPassword: 'wtf',
}

const Field = ({ placeholder, error, ...props }) => (
  <>
    <Text style={styles.space}>{placeholder}</Text>
    <Input {...props} />
    {error && (
      <Text style={[styles.space, error && styles.error]}>{error}</Text>
    )}
  </>
)

function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => Alert.alert(JSON.stringify(values)),
  })

  console.log({ getSubmitButtonProps: { ...formal.getSubmitButtonProps() } })

  return (
    <SafeAreaView>
      <View style={styles.space}>
        <Text h1>Formal</Text>
        <Field {...formal.getFieldProps('Username')} placeholder="Username" />
        <Field {...formal.getFieldProps('Email')} placeholder="Email" />
        <Field
          {...formal.getFieldProps('Password')}
          placeholder="Password"
          secureTextEntry
        />
        <Field
          {...formal.getFieldProps('ConfirmPassword')}
          placeholder="Confirm Password"
          secureTextEntry
        />
        <Button
          style={styles.space}
          {...formal.getSubmitButtonProps()}
          disabled={false}
          title="Submit"
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  space: {
    margin: 10,
  },
  error: {
    color: 'red',
  },
})

export default App

It has 3 extra dependencies, namely, react-native-elements, @kevinwolf/formal-native & yup

I can’t get it to work on Expo Snack without error

Here’s the Snack URL https://snack.expo.io/@deadcoder0904/react-native-formal

[adamjnav]

Hey @deadcoder0904,

This is expected. Hooks support is part of RN 0.59 and SDK32 (the latest version) is running a fork of 0.57. You’ll have to wait until we release SDK33 and add it to Snack to make use of hooks.

Cheers,
Adam