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
$ npm install --save @shoutem/ui
$ react-native link
Docs
All the documentation is available on the Developer portal.
Examples
To see how Shoutem UI works, you can:
- include the
Examples
component into your React Native app or - run
Restaurants
app inexamples
folder.
Examples component
Create new React Native project:
$ react-native init HelloWorld
Locate to project and install @shoutem/ui
in your project:
$ cd HelloWorld
$ npm install --save @shoutem/ui
Run react-native
to link fonts that the toolkit is using:
$ react-native link
Now, simply copy the following to your index.ios.js
files of the React Native project:
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '@shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
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 professionally looking React Native apps with ease.
It consists of three libraries:
- @shoutem/ui: beautiful and customizable UI components
- @shoutem/theme: “CSS-way” of styling entire app
- @shoutem/animation: declarative way of applying ready-made animations
License
The BSD License Copyright (c) 2016-present, Shoutem