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.