rn-quantum v0.3.5

React Native Quantum

Lean, general-purpose React Native helpers and utilities making React Native App development faster, easier and even more enjoyable. This library supports exclusively Android right now. Perfect for React Native who develop only for Android and need a light, concise utility library.

Recommended to use for Android development with the best React Native navigation library available right now, which is Wix's react-native-navigation.

Demo Playground App

Find it here.

Installation

npm i rn-quantum 

Dependencies

You'll need those libraries installed in your project:

npm install react react-native react-native-typography

Components

Import any component just like that:

import { Example } from 'rn-quantum';

Text

Makes it easier to apply material typography styles from react-native-typography library.

<Text white headline>Headline</Text>
<Text white caption>React Native Quantum is the best.</Text>

Ripple

<Ripple onPress={this.onRipplePress} color="#AAA" style={styles.button} borderless={isIcon ? true : false}>
  { /* Your components (no need to wrap to a single <View>) */ }
</Ripple>

This component is simplification of React Native's <TouchableNativeFeedback> element.

• it wraps its children into one <View> and applies the style props you pass to it, as React Native's <TouchableNativeFeedback> can only hold one child
• it simplifies very werid original syntax for changing the ripple color on Android - background={TouchableNativeFeedback.Ripple('#AAA')} to this: color='#AAA'.

Props

• onPress | standard onPress applied to the Touchable
• style | applied to the <View> which is direct child of TouchableNativeFeedback
• topStyle | applied to the top-level element which is <TouchableNativeFeedback>
• color | ripple color for Android (string)
• borderless | if applied, it makes the ripple borderless, useful for e.g. icons.

Example Usage

Bordered Ripple

<Ripple onPress={this.onPress} style={styles.button} color="#AAA">
  <Text>I don't have to be wrapped in a View</Text>
  <Text>And I can have many siblings.</Text>
</Ripple>

Borderless Ripple

<Ripple onPress={this.onPress} style={styles.icon} color="#AAA" borderless>
  <Icon name="md-create" size={16} color="#444" />
</Ripple>

Todo

• update docs
• Table for Props, not list
• Wiki and Website
• a changelog
• Text - add common props like numOfLines