React Native Flawless Ui

Custom Component

UI Component Library

React Native encourages you to build the UI of your application using isolated components. It is much easier to build applications using libraries and UI toolkits as it saves time and make development faster.

The list does not rank any framework and is listed in a random fashion.

MonalisaUI

MonalisaUI

MonalisaUI is a free and open source UI component library for React Native to build native mobile apps for iOS and Android platforms.

Visit https://tuantvk.gitbook.io/monalisaui/ for full documentation.

Install

 
yarn add monalisa-ui
# or
npm install --save monalisa-ui

Native Base

Native Base

At 12k stars and over 1k forks Native Base is a widely popular UI component library providing dozens of cross-platform components for React native. When using Native Base, you can use any native third-party libraries out of the box.

Setup with pure React Native app

 
yarn add native-base
​
# or
# npm install native-base --save

Setup with Expo

 
npm install native-base --save
​
# Native Base uses some custom fonts that can be loaded using Font.loadAsync.
expo install expo-font

React Native Elements

React Native Elements

React Native Elements takes the hassle of assembling these packages together by giving you a ready made kit with consistent api and look and feel.

Installation

If your project is a standard React Native project created using react-native init (it should have an ios/android directory), then follow these installation instructions.

Install react-native-elements

 
yarn add react-native-elements
​
# or
# npm i react-native-elements --save

Install react-native-vector-icons

react-native-vector-icons

 
yarn add react-native-vector-icons
​
# or
# npm i --save react-native-vector-icons

Note:
You need to follow below steps in order to work with RN>=0.60
Now back to root folder and create a file named react-native.config.js in root of your project and add below code in this file.

 
// react-native.config.js
module.exports = {
    assets: ['react-native-vector-icons']
};

And finally run

 
yarn react-native link

View issues react-native-vector-icons

React Native UI Kitten

React Native UI Kitten

Install UI Kitten and Eva Design System

 
npm i react-native-ui-kitten @eva-design/eva

Configure Application Root

 
import React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point
​
const App = () => (
  <ApplicationProvider
    mapping={mapping}
    theme={lightTheme}>
    <RootComponent />
  </ApplicationProvider>
);
​
export default App;

Header Use Component Library

Header Native Base

 
// header-native-base.js
import { Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
...
<Header>
  <Left>
    <Button transparent>
      <Icon name='arrow-back' />
    </Button>
  </Left>
  <Body>
    <Title>Header</Title>
  </Body>
  <Right>
    <Button transparent>
      <Icon name='menu' />
    </Button>
  </Right>
</Header>

Header React Native Elements

 
// header-react-native-elements.js
import { Header } from 'react-native-elements';
...
<Header
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

Result:

Native Base	React Native Elements

Button

React Native may supply you with an abundance of functionality and components that work right off the bat, however nothing compares to creating your own hand-crafted piece of the puzzle.

Let’s split this guide, if you want to call it that; into edible chunks and make you a black voodoo magic, hand-crafting component wizard.

Button.js

 
import React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
​
// get name from props
// take all remaining properties defined on the props object and collect them inside an argument called rest
const Button = ({ name, ...rest }) => (
  <TouchableOpacity activeOpacity={.8} {...rest}>
    <View style={styles.btn}>
      <Text style={styles.name}>{name}</Text>
    </View>
  </TouchableOpacity>
);
​
// Define the props that we want to be passed to our custom component
Button.propTypes = {
  name: PropTypes.string.isRequired,
}
​
export default Button;

Screen Sizes and Resolutions

That’s probably because the design was created using pixels whereas all dimensions in React Native are unitless, represented by dp (density-independent pixels). Simply put – the bigger your device is, the more dp it’ll have.

 
import { Dimensions } from 'react-native';
​
const { height, width } = Dimensions.get('window');
​
const guidelineBaseWidth = 360;
const guidelineBaseHeight = 592;
​
// padding, margin, fontSize, ....
export const scale = size => width / guidelineBaseWidth * size;
​
// width
export const wScale = size => height / guidelineBaseHeight * size;
​
// height
export const hScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;

The purpose of these functions is to be able to take one design (from a standard mobile phone) and apply it to other display sizes.

scale function is pretty straight forward and will return the same linear result as using viewport.

wScale is like scale, but based on height instead of width, which can be useful.

The real magic happens at hScale. The cool thing about it is that you can control the resize factor (default is 0.5).

View on Github

Example

 
// style button
...
button: {
  width: wScale(80)
  height: hScale(120),
  padding: scale(15),
  margin: scale(25),
}