Quick Start

Description

React Native Propel Kit is a React Native library providing basic building blocks for your next mobile application! This library is written in TypeScript using exclusively functional components leveraging React hooks.

This library does not have any external dependencies beside react/react-native, and does not use any native code to work. It is light and safe to use! This library is also structured as a monorepo that enables you to require only specific sub-packages if you ever want to build upon it.

Installation

React Native Propel Kit requires React 16.8.0 or later.

To use React Native Propel Kit with your React app:

yarn add react-native-propel-kit

or if you are (still) using npm

npm install react-native-propel-kit

Providers

React Native Propel Kit components often rely on specific providers, for instance, most of them use <BackdropProvider />, which enables a backdrop for the rest of your app:

import React from 'react';
import ReactDOM from 'react-dom';
import {BackdropProvider} from 'react-native-propel-kit';

import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <BackdropProvider>
    <App />
  </BackdropProvider>,
  rootElement
);

Components

Once you've properly setup the required providers, you can use some components, for instance a <Select />:

import React, {ReactNode, FunctionComponent} from 'react';
import {View} from 'react-native';
import {Select} from 'react-native-propel-kit';

type Props = {};

const CenteredView: FunctionComponent<Props> = () => (
  <View
    style={{
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginVertical: 32
    }}>
    <Select placeholder="Language">
      <Select.Item label="Java" value="java" />
      <Select.Item label="JavaScript" value="js" />
    </Select>
  </View>
);

export default CenteredView;

Help and Discussion

You should ask questions on Stack Overflow using the #react-native tag.