Skip to content
The missing React Native UI Kit for iOS
JavaScript Other
Branch: master
Clone or download
dependabot and adamTrz Bump lodash-es from 4.17.11 to 4.17.15 in /example (#143)
Bumps [lodash-es](https://github.com/lodash/lodash) from 4.17.11 to 4.17.15.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.11...4.17.15)

Signed-off-by: dependabot[bot] <support@github.com>
Latest commit e7545f1 Jul 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Chore: Upgrade src dependencies (#123) May 24, 2019
assets Improved README, CONTRIBUTION and CODE_OF_CONDUCT (#86) Jan 16, 2018
bin initial commit Jun 1, 2017
docs Chore: Upgrade src dependencies (#123) May 24, 2019
example Bump lodash-es from 4.17.11 to 4.17.15 in /example (#143) Jul 31, 2019
src Chore: Upgrade src dependencies (#123) May 24, 2019
website Bump lodash from 4.17.4 to 4.17.15 in /website (#140) Jul 31, 2019
.editorconfig Chore: Upgrade src dependencies (#123) May 24, 2019
.eslintcache Chore: Upgrade src dependencies (#123) May 24, 2019
.eslintignore Chore: Upgrade src dependencies (#123) May 24, 2019
.eslintrc Chore: Upgrade src dependencies (#123) May 24, 2019
.flowconfig
.gitignore Freeze lockfile on CircleCI (#93) Jan 16, 2018
.prettierrc Chore: Upgrade src dependencies (#123) May 24, 2019
CODE_OF_CONDUCT.md Improved README, CONTRIBUTION and CODE_OF_CONDUCT (#86) Jan 16, 2018
CONTRIBUTING.md docs: add imports to examples (#106) Mar 6, 2018
LICENSE initial commit Jun 1, 2017
README.md Quickfix: Fix readme link (#124) May 24, 2019
babel.config.js Chore: Upgrade src dependencies (#123) May 24, 2019
package.json Chore: Upgrade src dependencies (#123) May 24, 2019
types.js TabBar (#21) Nov 29, 2017
yarn.lock Bump lodash from 4.17.4 to 4.17.13 (#138) Jul 31, 2019

README.md

react-native-ios-kit


The missing React Native UI Kit for iOS.


Build Status Version MIT License

PRs Welcome Chat tweet Sponsored by Callstack

Features

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

Try it out

cd example && 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

  yarn 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:

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

function Main() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

AppRegistry.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:

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

const theme = {
  ...DefaultTheme,
  primaryColor: 'tomato',
  primaryLightColor: color('tomato')
    .lighten(0.2)
    .rgb()
    .string(),
  disabledColor: 'yellow',
};

function Main() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

Customization per component

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

Example:

  <Icon
    name="ios-people"
    theme={{
      primaryColor: 'green'
    }}
  >

This code will change icon color to green

Documentation

Check the components and their usage in our documentation.

Contributing

Read the contribution guidelines before contributing.

Made with ❤️ at Callstack

react-native-ios-kit is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

You can’t perform that action at this time.