Update readme

xotahal · Jul 2, 2018 · 7f0b46b · 7f0b46b
1 parent d0a2cb8
commit 7f0b46b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # React Native Material UI (iOS and Android supported)
 
-**Highly customizable material design components for React Native!**
+Highly customizable material design components for React Native!
 
 [![npm](https://img.shields.io/npm/v/react-native-material-ui.svg)](https://www.npmjs.com/package/react-native-material-ui)
 [![codecov](https://codecov.io/gh/xotahal/react-native-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/xotahal/react-native-material-ui)
@@ -11,12 +11,25 @@
 ## Documentation
 
 - [Getting Started](https://github.com/xotahal/react-native-material-ui/blob/master/docs/GettingStarted.md)
-- [Configure theme](https://github.com/xotahal/react-native-material-ui/blob/master/docs/ConfigureTheme.md)
 - [Usage](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Usage.md)
 - [Demo & Examples](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md)
 - [Components](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md)
 
-## Questions?
+## Showroom
+
+### [Savee.io](http://bit.ly/savee-io)
+
+[iOS App](http://bit.ly/savee-ios) & [Android App](http://bit.ly/savee-android)
+
+<img src="https://cdn-images-1.medium.com/max/2000/1*c4LrPZvMIgIZntDPfYDKFA.png" width="512px" />
+
+### [Reservio](https://www.reservio.com/)
+
+[iOS App](https://itunes.apple.com/us/app/reservio/id1314263364?mt=8) & [Android App](https://play.google.com/store/apps/details?id=com.reservio&hl=en)
+
+<img src="https://lh3.googleusercontent.com/1wm87owPIRr_vp9FrroYuD4eusW2x8N7H7OdhP_B2ynLDIds6s83VAWKFz8xBa3NOh8=w1440-h620-rw" width="256px" /><img src="https://lh3.googleusercontent.com/AIDK60jiX6ldE9dZ4n5srJSG1sdeRKgsqIEdfdyCQvJcNY1rW7vCmHwvC6aOcLk7swE=w1440-h620-rw" width="256px" />
+
+## Questions
 
 If you need anything ping us on [twitter](https://twitter.com/xotahal).
 

diff --git a/docs/ConfigureTheme.md b/docs/ConfigureTheme.md
diff --git a/docs/Usage.md b/docs/Usage.md
@@ -1,6 +1,65 @@
+# Usage
+
+**If you want to use default theme, you can skip this step**
+
+To achieve the level of customizability, React Native Material UI is using a single JS object called uiTheme that is passed in via context. By default, this uiTheme object is based on the lightTheme that you can find [here](https://github.com/xotahal/react-native-material-ui/blob/master/src/styles/themes/light.js). So, you can change almost everything very easily.
+
+The uiTheme object contains the following keys (for more of them - check the code):
+
+```js
+    spacing: {} // can be used to change the spacing of components.
+    fontFamily: {} // can be used to change the default font family.
+    palette: {  // can be used to change the color of components.
+        primaryColor: blue500,
+        accentColor: red500,
+        ...
+    }
+    typography: {} // can be used to change the typography of components
+    // you can change style of every each component
+    avatar: {}
+    button: {}
+    toolbar: {}
+    ...
+```
+
+```js
+import React, { Component } from 'react';
+import { Navigator, NativeModules } from 'react-native';
+
+import {
+  COLOR,
+  ThemeContext,
+  getTheme,
+} from 'external/react-native-material-ui';
+
+// you can set your style right here, it'll be propagated to application
+const uiTheme = {
+  palette: {
+    primaryColor: COLOR.green500,
+  },
+  toolbar: {
+    container: {
+      height: 50,
+    },
+  },
+};
+
+class Main extends Component {
+  render() {
+    return (
+      <ThemeContext.Provider value={getTheme(uiTheme)}>
+        <App />
+      </ThemeContext.Provider>
+    );
+  }
+}
+```
+
+It means, if you want to change primary color of your application you can just pass to ThemeContext.Provider object with your own settings. The settings will be merged with default theme.
+
 ## What else?
 
-Another great feature is, you can use the `uiTheme` everywhere. Even in your own components. So if you built your own implementation of `Button` for example, look how you can get the primary color.
+Another great feature is, you can use the `theme` everywhere. Even in your own components. So if you built your own implementation of `Button` for example, look how you can get the primary color.
 
 ```js
 import { withTheme } from 'react-native-material-ui'
@@ -19,7 +78,9 @@ export default withTheme(MyButton)
 
 ## Local changes
 
-Of course, sometimes we need to change style of only one component. It means, all `buttons` have red background, but facebook login button that should have blue background. Every each component have `style` property. So you can very easily override whatever you want.
+Of course, sometimes we need to change style of only one component. All `buttons` have a red background by default, but only facebook button should have blue background.
+
+Every component have a `style` property. So you can very easily override whatever you want.
 
 ```js
 <Button style={{ container: { backgroundColor: 'blue' } }} />