Overview

Key features

• React Hooks 🎣
• Easy form validation ✅
• Fast layout mounting 📱

Guides

<Form /> element

API

| Prop | Type | Required | Note | | ------------- | ----------------- | -------- | ---------------------------------------------------------------------- | | schema | Yup.object | false | Validates form fields on button press | | initialData | Object | false | Defines initial values in form fields | | onSubmit | Function | true | Will be called after button press, if data passes schema validation | | ref | React.createRef | true | Must be defined to send data on form button press ref.current.send() |

Example

import React, { useRef } from 'react';
import { Button } from 'react-native';
import * as yup from 'yup';

import { Form, Input } from '~/components';

const schema = yup.object().shape({
  email: yup
    .string()
    .email()
    .required(),
  password: yup.string().required(),
});

export default function Auth() {
  const formRef = useRef();

  function handleSubmit(data) {
    console.log(data);

    /*
       {
        email: '[email protected]',
        password: '123'
       }
    */
  }

  return (
    <Form schema={schema} onSubmit={handleSubmit} ref={formRef}>
      <Input name="email" label="Email" />
      <Input name="password" label="Password" />

      <Button title="Enter" onPress={() => formRef.current.send()} />
    </Form>
  );
}

<Block /> element

API

| Prop | Type | Default | Note | | ----------- | ---------------- | --------------- | --------------------------------------------------------------- | | container | Boolean | false | Adds a SafeAreaView + KeyboardAvoidingView around component | | weight | Boolean/Number | "none" | Defines the weight of component (flex) | | color | String | "transparent" | Defines the component color | | align | Boolean/String | "flex-start" | Sets align-items style to the component | | justify | Boolean/String | "flex-start" | Sets justify-content style to the component | | row | Boolean | false | Sets flex-direction row to the component | | distante | Array<Number> | [] | Sets padding into the component |

Example

import React from 'react';
import { Text } from 'react-native';

import { Block } from '~/components';

export default function App() {
  return (
    <Block container align justify>
      <Text>Hello World</Text>
    </Block>
  );
}

Dependencies

• Async Storage
• Prop Types
• React Native Gesture Handler
• React Native Masked Text
• React Native Vectors Icons
• React Navigation
• Redux
• Redux Saga
• Styled Components
• Yup

Dev Dependencies

• Eslint
• Prettier
• Reactotron