Have ideas to improve npm?Join in the discussion! »

    @kevinwolf/formal-native
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    @kevinwolf/formal-native @kevinwolf/formal-native

    @kevinwolf/formal-native

    📱 Native extension for @kevinwolf/formal.

    Table of Contents

    Install

    yarn add @kevinwolf/formal-native

    Usage

    import React from "react";
    import { Alert, View, Text, TextInput, Button } from "react-native";
    import useFormal from "@kevinwolf/formal-native";
    import * as yup from "yup";
     
    const schema = yup.object().shape({
      firstName: yup.string().required(),
      lastName: yup.string().required(),
      email: yup
        .string()
        .email()
        .required()
    });
     
    const initialValues = {
      firstName: "Tony",
      lastName: "Stark",
      email: "ironman@avengers.io"
    };
     
    export default function App() {
      const formal = useFormal(initialValues, {
        schema,
        onSubmit: values => Alert.alert(JSON.stringify(values))
      });
     
      return (
        <View>
          <View>
            <Text>First Name</Text>
            <TextInput {...formal.getFieldProps("firstName")} />
            {formal.errors.firstName && <Text>{formal.errors.firstName}</Text>}
          </View>
     
          <View>
            <Text>Last Name</Text>
            <TextInput {...formal.getFieldProps("lastName")} />
            {formal.errors.lastName && <Text>{formal.errors.lastName}</Text>}
          </View>
     
          <View>
            <Text>Email</Text>
            <TextInput {...formal.getFieldProps("email")} autoCapitalize="none" />
            {formal.errors.email && <Text>{formal.errors.email}</Text>}
          </View>
     
          <Button {...formal.getSubmitButtonProps()} title="Submit" />
        </View>
      );
    }

    Tips

    As you can see, the above code became a little verbose due to the repetition of the fields code, in order to abstract that repeated code, you can create a Field component and replace all those calls in App.js.

    Field.js

    import React from "react";
    import { View, Text, TextInput } from "react-native";
     
    export default function Field({ label, error, ...props }) {
      return (
        <View>
          <Text>{label}</Text>
          <TextInput {...props} />
          {error && <Text>{error}</Text>}
        </View>
      );
    }

    App.js

    import React from "react";
    -import { Alert, View, Text, TextInput, Button } from "react-native";
    +import { Alert, View } from 'react-native'
    import useFormal from "@kevinwolf/formal-native";
    import * as yup from "yup";
     
    +import Field from './components/field'
    +import Button from './components/button'
     
    const schema = yup.object().shape({
      firstName: yup.string().required(),
      lastName: yup.string().required(),
      email: yup
        .string()
        .email()
        .required()
    });
     
    const initialValues = {
      firstName: "Tony",
      lastName: "Stark",
      email: "ironman@avengers.io"
    };
     
    export default function App() {
      const formal = useFormal(initialValues, {
        schema,
        onSubmit: values => Alert.alert(JSON.stringify(values))
      });
     
      return (
        <View>
    -      <View>
    -        <Text>First Name</Text>
    -        <TextInput {...formal.getFieldProps("firstName")} />
    -        {formal.errors.firstName && (<Text>{formal.errors.firstName}</Text>)}
    -      </View>
    +      <Field {...formal.getFieldProps('firstName')} label="First name" />
     
    -      <View>
    -        <Text>Last Name</Text>
    -        <TextInput {...formal.getFieldProps("lastName")} />
    -        {formal.errors.lastName && (<Text>{formal.errors.lastName}</Text>)}
    -      </View>
    +      <Field {...formal.getFieldProps('lastName')} label="Last name" />
     
    -      <View>
    -        <Text>Email</Text>
    -        <TextInput {...formal.getFieldProps("email")} autoCapitalize="none" />
    -        {formal.errors.email && (<Text>{formal.errors.email}</Text>)}
    -      </View>
    +      <Field {...formal.getFieldProps('email')} label="Email" autoCapitalize="none" />
     
          <Button {...formal.getSubmitButtonProps()} title="Submit" />
        </View>
      );
    }

    Extended documentation

    For extended documentation, examples and contributing guidelines, please refer to the monorepo containing this package.

    Keywords

    none

    Install

    npm i @kevinwolf/formal-native

    DownloadsWeekly Downloads

    18

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar