React-native-template-agile-rn NPM

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: 'example@mail.com',
        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>
  );
}