Is there a way to make this work without changing my function component to a class based component:
export default function SendVerificationCode({
route,
navigation
}: NativeStackScreenProps<
NativeStackParameterList,
'SendVerificationCode'
>): JSX.Element {
async function getVerificationCode(
passwordApi: PasswordApi,
agencyKey: number,
username: string,
email: string,
verificationCode: string
): Promise<void> {
const response = await passwordApi.getReset(
new GetResetRequest({
agencyKey: agencyKey,
email: email,
username: username,
verificationCode: verificationCode
})
);
verifyCodeContext.userName = username;
navigation.navigate('VerifyCode', {
copyrightYear: 2021,
version: '0.0.0.1'
});
}
const onSubmit = (data: any) => {
getVerificationCode(
new PasswordApi(),
1234,
data.username,
data.email,
'123'
);
};
return (
<UnauthenticatedTemplate copyrightYear={year} version={version}>
<Form
style={styles.form}
submitText="Send Code"
onSubmit={onSubmit}
schema={SendVerificationCodeSchema}
>
<FCTextField name="username" placeholder="Username" />
<FCTextField name="email" placeholder="Email" />
</Form>
</UnauthenticatedTemplate>
);
}
The onSubmit works perfectly fine until I call getVerificationCode
my axios function getReset looks like:
public getReset(
getResetRequest: GetResetRequest,
cancelToken?: CancelToken
): Promise<StandardResponse<GetResetResponse>> {
return this.get(
this.configuration.portal,
'/mvc/api/password/reset',
classToPlain(getResetRequest, BaseApi.classTransformOptions),
cancelToken,
new StandardResponse<GetResetResponse>(GetResetResponse)
);
}
Somewhere in your app, you're calling a hook (functions that start with use such as useState) inside a function that isn't a React component, I don't think the issue is within the code snippets you've included, perhaps the issue is in the screen you're navigating to?
Go through your code and look for hooks and make sure that they aren't in a function, examples:
// Right implementation
function SomeComponent(props) {
const hook = useHook()
return <View />
}
// Wrong implementation
function SomeComponent(props) {
function nestedFunction() {
const hook = useHook()
}
return <View />
}
Hope you find this helpful