Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-template-agile-rn

matheusmichels29MIT1.0.8

Agile RN is a React Native ⚛ template that was created to speed up project start-up as well as make app development easier.

react, native, template, agile, rn, boilerplate, react-native, eslint, reactotron, redux, redux saga, axios, prop-types

readme

Overview

Agile RN is a React Native ⚛ template that was created to speed up project start-up as well as make app development easier.

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>
  );
}

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