ui

by shoutem

shoutem / ui

Customizable set of components for React Native applications

4.6K Stars 534 Forks Last release: 6 days ago (v4.0.6) Other 792 Commits 78 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Shoutem UI

Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our components are built to be both composable and customizable. Each component has a predefined style that is compatible with the rest of the Shoutem UI, which makes it possible to build complex components that look great without the need to manually define complex styles.

Install

These instructions are valid for React Native 0.60.0 and higher. If you're running a lower version, please use v1.X.X.

$ npm install --save @shoutem/ui

We have a

postinstall
script which will add
@shoutem/ui
's native dependencies to your root
package.json
in order to support autolinking and pod installation.

Docs

All the documentation is available on the Developer portal.

Community

Join our community on Facebook. Also, feel free to ask a question on Stack Overflow using "shoutem" tag.

Examples

To see how Shoutem UI works, you can:

  • include the
    Examples
    component into your React Native app or
  • run
    Restaurants
    app in
    examples
    folder.

Examples component

If you are using Expo, see this project for example usage. Otherwise, follow the steps below.

Create new React Native project and locate to it:

$ react-native init HelloWorld && cd HelloWorld

Install

@shoutem/ui
in your project:
$ npm install --save @shoutem/ui

Now, simply copy the following to your

App.js
files of the React Native project:
import React, { PureComponent } from 'react';
import { Examples } from '@shoutem/ui';

export default class App extends PureComponent { render() { return ( ); } }

Finally, run the app!

$ react-native run-ios

To see other components, just import them from

@shoutem/ui
and render them.

You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.

Restaurants app

Clone the Shoutem UI repository:

git clone https://github.com/shoutem/ui.git

Locate to

RestaurantsApp
folder:
cd ui/examples/RestaurantsApp

Install and link dependencies:

npm install
react-native link

Finally, run the app!

react-native run-ios
react-native run-android

UI Toolkit

Shoutem UI is a part of the Shoutem UI Toolkit that enables you to build professional looking React Native apps with ease.

It consists of three libraries:

License

The BSD License Copyright (c) 2016-present, Shoutem

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.