[RFC] React Native Support

[douglaszaltron]

Are you submitting a bug report or a feature request?

feature request React Native support 🎉

Why is this needed:

Currently, Final form only works with web projects using ReactJS but a port to React Native could be created.

[superandrew]

+1

[ikismail]

+1

[saczuac]

+1

[souravj96]

I'm using this solution to react native and it works fine for me.

import React from 'react';
import { Form, Field } from 'react-final-form';
import createDecorator from 'final-form-focus'

import { View, Input, Button, Text } from 'react-native';

let focusOnError = createDecorator()

class MyScreen extends React.Component {

    validate = function (values) {
        const errors = {};
        alert(JSON.stringify(values))
        return errors
    }

    handleSubmit = function (values) {
        alert(JSON.stringify(values))
    }
    render() {
        return (
            <Form onSubmit={this.handleSubmit}
                decorators={[focusOnError]}
                validate={(values) => { return this.validate(values) }}
                render={({ handleSubmit, submitting, valid }) => (
                    <View>
                        <Field
                            name="FieldName"
                            placeholder="your placeholder"
                        >
                            {({ input, meta, placeholder }) => {
                                let showToolTip = false
                                if (meta.error && meta.visited && !meta.active) {
                                    showToolTip = true
                                }
                                else {
                                    showToolTip = false
                                }
                                return (
                                    <View>
                                        <Input placeholder={placeholder} {...input} />
                                        <Text size={8}>{meta.error}</Text>
                                    </View>
                                )
                            }}
                        </Field>
                        <Button color="info" round={true} size="small" onPress={handleSubmit}>Submit</Button>
                    </View>
                )
                }
            />
        )
    }
}
export default MyScreen

[nicklaros]

@souravj96 I use your code above in typescript project and it spit out a lot of typing error

for example:

Types of property 'onBlur' are incompatible.
        Type '(event?: FocusEvent<HTMLElement>) => void' is not assignable to type '(e: NativeSyntheticEvent<TextInputFocusEventData>) => void'.ts(2769)

[souravj96]

@souravj96 I use your code above in typescript project and it spit out a lot of typing error

for example:

Types of property 'onBlur' are incompatible.
        Type '(event?: FocusEvent<HTMLElement>) => void' is not assignable to type '(e: NativeSyntheticEvent<TextInputFocusEventData>) => void'.ts(2769)

try to add this line
delete input["onBlur"];
after
let showToolTip = false

hope it will work.

[ianqueue]

Any new developments here? I see mentioning of React Native in the codebase, but no documentation on it's support. For example Formik has a page on it's use in React Native here https://jaredpalmer.com/formik/docs/guides/react-native#the-gist

[santaclauze]

I am interested to know what is happening with this too

[jeanlambert17]

Any update?

[jafar-jabr]

any update in 2022 ? :))

[fondue-tech]

Any update in 2023?

[omerman]

This lib is not maintained.. See the last commit 🥲