React Native Elements UI

React Native Elements UI Toolkit

Ina HranovaIna Hranova 3 minutes 108 views

Share:

React Native Elements is a cross-platform UI toolkit for React Native with a consistent design across Android, iOS, and Web and is styling library with amazing components, so it’s easy to customize your app. The library includes a whole basket of components like a card, list items, icons, badge, search bar and so on. You can build beautiful applications easily. That’ll spend a lot of time and everything is completely configurable. This library is used by the likes of Twitter, Uber, and Flipkart.

“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”

React Native Elements UI Toolkit is easy and useful for any beginner trying to build an app without having complete knowledge about styling.

Install React Native Elements

npm i react-native-elements
//or with yarn
yarn add react-native-elements

If you’re using React Native CLI, you need to install on the  terminal:

npm i react-native-vector-icons

Then you need to link your native dependencies:

react-native link react-native-vector-icons

Viola! Now we have this library with dependencies should be successfully installed, so it’s ready to use and we can import components like <Text >, <View> and so on.

React Native Elements Components

  • Avatar
  • Badge
  • Button
  • ButtonGroup
  • Card
  • Checkbox
  • Form Elements
  • HTML style headings
  • Icon
  • List and ListItem
  • Pricing
  • Rating
  • Search Bar
  • Slider
  • Social Icons / Social Icon Buttons
  • Tile

For example, we’ll use the amazing component  Rating. This takes up a lot of your time where as you just have a place where you can grab these components.

You should see the UI Rating:

Usage

Here’s the complete code snippet:

import { Rating, AirbnbRating } from 'react-native-elements';

ratingCompleted(rating) {
  console.log("Rating is: " + rating)
}

<AirbnbRating />

<AirbnbRating
  count={11}
  reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
  defaultRating={11}
  size={20}
/>

<Rating
  showRating
  onFinishRating={this.ratingCompleted}
  style={{ paddingVertical: 10 }}
/>

<Rating
  type='heart'
  ratingCount={3}
  imageSize={60}
  showRating
  onFinishRating={this.ratingCompleted}
/>

const WATER_IMAGE = require('./water.png')

<Rating
  type='custom'
  ratingImage={WATER_IMAGE}
  ratingColor='#3498db'
  ratingBackgroundColor='#c8c7c8'
  ratingCount={10}
  imageSize={30}
  onFinishRating={this.ratingCompleted}
  style={{ paddingVertical: 10 }}
/>

Read-only mode

const { rating } = this.props;

<Rating
  imageSize={20}
  readonly
  startingValue={rating}
  style={{ styles.rating }}
/>

Fractions

<Rating showRating fractions="{1}" startingValue="{3.3}" />

If you’re going to design an application that looks universal across platforms, this is a perfect option. The documentation clearly explains how to customize the available components with simplicity as well as detailed info regarding every single component and API available, including code snippets, examples and references, and comes with a set of beautiful icons.

Check out more the official docs. Feel free to jump in.