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

    @blackbox-vision/rff-rn-paper
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    RFF React Native Paper UI npm version License: MIT

    React Native Paper UI Wrapper for React Final Form

    Table of contents

    Use Case

    You're working with react-final-form on react-native and you need bindings between react-native-paper and react-final-form.

    Compatibility

    Since this package uses hooks under the hood, you need at least a minimum React version of 16.8.0.

    Installation

    YARN

    yarn add @blackbox-vision/rff-rn-paper

    NPM

    npm install --save @blackbox-vision/rff-rn-paper

    Example Usage

    After reading and performing the previous steps, you should be able to import the library and use it like in this example:

    import React from 'react';
    import { View } from 'react-native';
    import { Form, Field } from 'react-final-form';
    import {
      Select,
      Switch,
      Checkbox,
      TextInput,
      RadioButtonGroup,
    } from '@blackbox-vision/rff-rn-paper';
    
    const MyForm = props => (
      <Form
        onSubmit={values => alert(values)}
        render={({ handleSubmit }) => (
          <View>
            <Field
              component={TextInput}
              name="firstname"
              label="Firstname"
              placeholder="Enter firstname"
            />
            <Field
              component={TextInput}
              name="lastname"
              label="Lastname"
              placeholder="Enter lastname"
            />
            <Field
              component={Switch}
              name="likeFootball"
              labelPosition="right"
              label="Do you like Football?"
            />
            <Field
              component={Checkbox}
              name="color"
              labelPosition="right"
              label="Do you like red?"
            />
            <Field
              component={Select}
              name="favouriteMeal"
              label="Which is your favourite meal"
              options={[
                { label: 'pizza', value: 0 },
                { label: 'spaghetti', value: 1 },
              ]}
            />
            <Field
              component={RadioButtonGroup}
              name="favouriteDay"
              label="Which is your favourite day?"
              options={[
                { label: 'monday', value: 0 },
                { label: 'thursday', value: 1 },
              ]}
            />
          </View>
        )}
      />
    );
    
    MyForm.displayName = 'MyForm';
    
    export default MyForm;

    Component APIs

    Common Props

    All the components have the following base props:

    Properties Types Default Value Description
    ContainerProps ViewProps - Property that represents the values for the View container
    LabelProps TextProps - Property that represents the values for the Label
    HelperTextProps HelperTextProps - Property that represents the values for the Helper Text
    getHelperText Function - Property that represents a function to get a message to show in the HelperText

    RadioButtonGroup

    The RadioButtonGroup component has the following props:

    Properties Types Default Value Description
    InnerContainerProps ViewProps - Property that represents the values for the inside View container
    InnerLabelProps ViewProps - Property that represents the values for the Label
    RadioButtonProps RadioButtonProps - Property that represents the props related to the RadioButton
    labelPosition string right Property that represents the position of the label
    label string - Property that represents the label to show
    options Array - Property that represents the options to render the RadioButtonGroup

    The RadioButtonGroup also inherits its own props from react-native-paper.

    RadioButton

    The RadioButton component has the following props:

    Properties Types Default Value Description
    InnerContainerProps ViewProps - Property that represents the values for the inside View container
    labelPosition string right Property that represents the position of the label
    label string - Property that represents the label to show

    The RadioButton also inherits its own props from react-native-paper.

    TextInput

    The TextInput component has the following props:

    Properties Types Default Value Description
    label string - Property that represents the label to show

    The TextInput also inherits its own props from react-native-paper.

    Checkbox

    The Checkbox component has the following props:

    Properties Types Default Value Description
    InnerContainerProps ViewProps - Property that represents the values for the inside View container
    labelPosition string right Property that represents the position of the label
    label string - Property that represents the label to show

    The Checkbox also inherits its own props from react-native-paper.

    Select

    The Select component has the following props:

    Properties Types Default Value Description
    labelPosition string right Property that represents the position of the label
    label string - Property that represents the label to show
    options Array - Property that represents the options to render the RadioButtonGroup

    The Select also inherits its own props from react-native.

    Switch

    The Switch component has the following props:

    Properties Types Default Value Description
    InnerContainerProps ViewProps - Property that represents the values for the inside View container
    labelPosition string right Property that represents the position of the label
    label string - Property that represents the label to show

    The Switch also inherits its own props from react-native-paper.

    Issues

    Please, open an issue following one of the issues templates. We will do our best to fix them.

    Contributing

    If you want to contribute to this project see contributing for more information.

    License

    Distributed under the MIT license. See LICENSE for more information.

    Install

    npm i @blackbox-vision/rff-rn-paper

    DownloadsWeekly Downloads

    33

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    208 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar
    • avatar