callstack/react-native-ios-kit

Name: react-native-ios-kit

Owner: Callstack

Description: The missing React Native UI Kit for iOS

Created: 2017-07-27 11:27:16.0

Updated: 2018-05-24 08:57:06.0

Pushed: 2018-05-15 20:04:37.0

Homepage: https://callstack.github.io/react-native-ios-kit/

Size: 10629

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

The missing React Native UI Kit for iOS.

---

Features

You can find documentation with all list of features and components here

Try it out

xample && npm run ios

or run the example app with Expo to see it in action.

Getting Started

Installation

Open a Terminal in your project's folder and run

rn add react-native-ios-kit react-native-vector-icons

After installation, you'll need to link react-native-vector-icons.

Usage

Wrap your root component in ThemeProvider from react-native-ios-kit.

It's a good idea to wrap the component which is passed to AppRegistry.registerComponent.

Example:

rt * as React from 'react';
rt { AppRegistry } from 'react-native';
rt { ThemeProvider } from 'react-native-ios-kit';
rt App from './src/App';

tion Main() {
turn (
<ThemeProvider>
  <App />
</ThemeProvider>



egistry.registerComponent('main', () => Main);

The ThemeProvider component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.

Customization

Main theme for application

You can provide a custom theme to customize the colors, fonts etc. with the ThemeProvider component. Check the Theme Type to see what customization options are supported.

Example:

rt * as React from 'react';
rt { AppRegistry } from 'react-native';
rt { DefaultTheme, ThemeProvider } from 'react-native-ios-kit';
rt color from 'color';
rt App from './src/App';

t theme = {
.DefaultTheme,
imaryColor: 'tomato',
imaryLightColor: color('tomato').lighten(0.2).rgb().string(),
sabledColor: 'yellow',


tion Main() {
turn (
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Customization per component

You can also customize theme per one component by using theme prop.

Example:

con
name="ios-people"
theme={{
  primaryColor: 'green'
}}

This code will change icon color to green