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