[RFC] React Native Support

douglaszaltron commented 5 years ago

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 commented 5 years ago

+1

ikismail commented 5 years ago

+1

saczuac commented 4 years ago

+1

souravj96 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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