Introducing React Native Elements

Cross Platform UI Toolkit for React Native

Looking to learn React Native? Check out React Native Training.

React Native Elements is a useful set of reusable components for your React Native application.

Check out the github repo here.

After over a year and a half of developing for React Native, I have noticed certain basic design elements that I have needed to create repeatedly. This takes up a lot of my time where as I would have liked to be able to just have a place where I can grab these elements and get a head start on the project, without repeating these styles over and over.

For example, when creating a button in React Native, a common design pattern is something like this:

import React from ‘react'
import { TouchableHighlight, Text, StyleSheet } from ‘react-native’
let styles = {}
const Button = ({onPress}) => (
  <TouchableHighlight onPress={onPress}>
    <Text>Button Element</Text>
  </TouchableHighlight>
)
styles = StyleSheet.create({
  // A bunch of repetitive styling here, center text, background color etc...
})

Then:

import Button from './pathtobutton'

With React Native Elements, you can simply do this:

import { Button } from 'react-native-elements'
<Button title='Hello World!' onPress={someMethod} />

While there is some basic styling coming out of the box, everything is completely configurable. The idea with React Native Elements is more about component structure than actual design, meaning less boilerplate in setting up certain elements but full control over their design. This means less time reasoning about and repeating basic styles and more time building out your app.

React Native Elements will be especially useful for any beginner trying to spice up the look of your app without having complete knowledge about styling in React Native. I encourage beginners to open up the source code and check out how these components are created.

I hope to get feedback and grow this project. Please submit prs or issues if there is something you would like to see added to the project!

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify, and the founder of React Native Training.

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv.

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time