A simple set of dependency free components for React Native.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


npm version npm version


A simple set of dependency free* components for React Native.

This repo is a location for my shared components that I use across my personal projects. Some of these components are more mature than others. I implement as many features as I need to accomplish my goals. If there is a feature missing please feel free to submit a pull request and I will gladly merge it in.

*The only dependency is react-native.

Install and usage


yarn add rn-components


npm i rn-components -S

Components are separate atomic classes. I take care to prevent interdependencies between the controls. This may cause some code duplication but I feel the independence of each component is far more valuable than a large monolithic heavily interdependant library. Because of this approach you can include only the components you need.

Components Included

Material Inspired

These components are inspired by Material Design and Material UI. They provide clean, simple, and lightweight implementations that have a default useable styling. Out of the box these components can be used to put together a Material inspired UI without the need for lengthy initializers and style object.


Animates a flat modal dialog with a title and content area.

See the Full Example here.

import MaterialModal from 'rn-components/material/Modal';

  onClosed={() => this.setState({modalVisible: false})} >
  <Text>This is just a simple example of using the modal.</Text>

Modal Screenshot


Very simple implementation of a flat text input that has an animated line that draws under the control when the control is given focus. When focus is lost the line disappears.

See the Full Example here.

import LineTextInput from 'rn-components/material/LineTextInput';

	placeholder="placeholder text" 
	onChangeText={(text) => console.log('LineTextInput new value:', text)} />

Line Text Input


Super simple Text Input that casts a shadow. This input is made to look similar to the search boxes that Google implements in some of it's UI. Sure, this could just be a style.

See the Full Example here.

import MaterialShadowTextInput from 'rn-components/material/ShadowTextInput';

	placeholder="placeholder text" 
	onChangeText={(text) => console.log('LineTextInput new value:', text)} />

Shadow Text Input


Wicked simple implementation of a floating action button. By default the button is styled to match a Material FAB and is placed in the bottom right corner of the screen. Out of the box you just need to subscribe to the onPress callback and optionally drop some child controls in it. By default the child controls are centered in the middle of the circle.

See the Full Example here.

import FloatingActionButton from 'rn-components/material/FloatingActionButton';

<FloatingActionButton onPress={() => console.log('FAB Pressed.')}/>

Floating Action Button


Implements a chip that has a delete button. Also referred to as a tag.

See the Full Example here.

import Chip from 'rn-components/general/Chip';

<Chip title="My Chip" containerStyle={{width: 120}} />

Chip / Tag