Techiio-author
Started by Sidhdarth BasuJun 2, 2022

Open
How to implement formik along with using onchangetext method in TextInput in React Native ?

5 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 5 VIEWES SHARE

someone please explain this to me.

1 Replies

Techiio-commentatorUtsab Das replied 2 months ago0 likes0 dislikes

Before going any further, here's a super minimal gist of how to use Formik with React Native that demonstrates the key differences:

1 //Formik x React Native example
2 import React from 'react';
3 import { Button, TextInput, View } from 'react-native';
4 import { Formik } from 'formik';
6 export const MyReactNativeForm = props => (
7 <Formik
8 initialValues={{ email: '' }}
9 onSubmit={values => console.log(values)}
10 >
11 {({ handleChange, handleBlur, handleSubmit, values }) => (
12 <View>
13 <TextInput
14 onChangeText={handleChange('email')}
15 onBlur={handleBlur('email')}
16 value={values.email}
17 />
18 <Button onPress={handleSubmit} title="Submit" />
19 </View>
20 )}
21 </Formik>
22 );

As you can see above, the notable differences between using Formik with React DOM and React Native are:

  1. Formik's handleSubmit is passed to a <Button onPress={...} /> instead of HTML <form onSubmit={...} /> component (since there is no <form /> element in React Native).
  2. <TextInput /> uses Formik's handleChange(fieldName) and handleBlur(fieldName) instead of directly assigning the callbacks to props, because we have to get the fieldName from somewhere and with React Native we can't get it automatically like in web (using input name attribute). You can also use setFieldValue(fieldName, value) and setFieldTouched(fieldName, bool)
You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance