I have a disabled button that needs to be enabled when you something in the TextInput, but when I change the IsDisabled
state using onChange
it causes the keyboard to close and the user needs to click to open it again and start typing. To explain the ThemedInput
, basically is a reusable TextInput
import Container from '@/components/Container'
import { ThemedButton } from '@/components/ThemedButton'
import { ThemedInput } from '@/components/ThemedInput'
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { Image } from 'expo-image'
import { StatusBar } from 'expo-status-bar'
import React, { useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { SafeAreaView } from 'react-native'
const ForgotPassword = () => {
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
values: {
email: "",
},
})
const [DidSentEmail, setDidSentEmail] = useState(false)
const [IsDisabled, setIsDisabled] = useState(true)
const onSubmit = (data: any) => {
console.log(data);
setDidSentEmail(true)
}
return (
<SafeAreaView>
<StatusBar style='dark' />
<Container>
{!DidSentEmail
? <>
<ThemedView className='pt-[30px] mb-3'>
<ThemedText type='title' color='#55C0A3'>Reset Password</ThemedText>
</ThemedView>
<ThemedView className='flex gap-y-[25px]'>
<ThemedView>
<ThemedText type='subtitle' color='#1C1C1C'>
Enter your email and reset your
password on the email
</ThemedText>
</ThemedView>
<ThemedView>
<Controller
control={control}
rules={{
required: true,
}}
render={({ field: { onChange, onBlur, value } }) => (
<ThemedInput
placeholder='Email address'
autoComplete='email'
onBlur={onBlur}
onChangeText={onChange}
onChange={(text) => { text.nativeEvent.text.length >= 1 ? setIsDisabled(false) : setIsDisabled(true) }}
keyboardType='email-address'
value={value}
/>
)}
name="email"
/>
</ThemedView>
<ThemedButton onPress={handleSubmit(onSubmit)} disabled={IsDisabled}>
Reset Now
</ThemedButton>
</ThemedView>
</>
: <>
<ThemedView className='flex-1 flex-col justify-between gap-y-[40px] h-full'>
<Image
source={require('@/assets/svgs/illustrations/checkYourEmail.svg')}
style={{ width: '100%', height: '50%' }}
contentFit='contain'
/>
<ThemedView>
<ThemedView className='pb-3'>
<ThemedText type='title' color='#1C1C1C'>Password reset link successfully sent!</ThemedText>
</ThemedView>
<ThemedText color='#A1A4B2'>
Lorem ipsum dolor sit amet consectetur. Arcu nullam eget urna morbi sapien vitae risus faucibus pellentesque. Est sollicitudin.
</ThemedText>
<ThemedView className='pt-[40px]'>
<ThemedButton onPress={() => setDidSentEmail(false)}>
Check E-mail
</ThemedButton>
</ThemedView>
</ThemedView>
</ThemedView>
</>
}
</Container>
</SafeAreaView>
)
}
export default ForgotPassword
I tried removing the Controller
but its still the same