JSPM

react-native-template-agile-rn

1.0.8
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 5
    • Score
      100M100P100Q36247F
    • License MIT

    Package Exports

    • react-native-template-agile-rn

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-template-agile-rn) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    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