r5n-labs / react-native-otp-inputs

OTP inputs for React-Native
MIT License
249 stars 91 forks source link

Warning: Cannot update a component (`LoginPage`) while rendering a different component (`ForwardRef`). To locate the bad setState() call inside `ForwardRef`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render #320

Open vigneshkumaran-github opened 11 months ago

vigneshkumaran-github commented 11 months ago

When i try to enter numbers im geting this errors

ankitthakur34 commented 10 months ago

Yes, Same Problem

tahahaz1374 commented 10 months ago

Yes, Same Problem

sami-juvonen commented 9 months ago

+1

eldynguyen1204 commented 7 months ago

+1

yogeshmuli commented 6 months ago

I was able to fix this by wrapping my setState logic in setTimeout function,Here is my code. ` const handleChange = code => { setTimeout(() => { setCode(code); }, 0); };

//and in render <OtpInputs handleChange={handleChange} keyboardType="phone-pad" selectTextOnFocus={false} numberOfInputs={6} inputContainerStyles={{ justifyContent: 'center', flexDirection: 'row', flex: 1, paddingHorizontal: -4, }} inputStyles={{ backgroundColor: '#EDEDED', borderColor: '#D3D3D3', borderWidth: 1, borderStyle: 'solid', flex: 1, margin: 4, height: 52, textAlign: 'center', }} /> `

Hope this helps anyone, till the time it is fixed

vigneshkumaran-github commented 6 months ago

@yogeshmuli could u tell me the reason please , why should i wrap that into setTimeout