|
1 |
| -# React Native Paper · [![Build Status][build-badge]][build] [![Version][version-badge]][package] [![MIT License][license-badge]][license] [![Chat][chat-badge]][chat] |
| 1 | +# React Native Paper |
| 2 | + |
| 3 | +[![Build Status][build-badge]][build] |
| 4 | +[![Version][version-badge]][package] |
| 5 | +[![MIT License][license-badge]][license] |
| 6 | +[![PRs Welcome][prs-welcome-badge]][prs-welcome] |
| 7 | +[![Chat][chat-badge]][chat] |
2 | 8 |
|
3 | 9 | Material design for React Native.
|
4 | 10 |
|
5 | 11 | ## Features
|
6 | 12 |
|
7 | 13 | - Follows [material design guidelines](https://material.io/guidelines/)
|
8 | 14 | - Works on both iOS and Android following [platform adaptation guidelines](https://material.io/guidelines/platforms/platform-adaptation.html)
|
9 |
| -- Full theming support |
| 15 | +- Full [theming support](https://callstack.github.io/react-native-paper/theming.html) |
10 | 16 |
|
11 | 17 | Currently supported React Native version: `>= 0.50.3`
|
12 | 18 |
|
13 | 19 | ## Try it out
|
14 | 20 |
|
15 | 21 | Run the [example app](https://exp.host/@satya164/react-native-paper-example) with [Expo](https://expo.io/) to see it in action.
|
16 | 22 |
|
17 |
| -## Getting Started |
18 |
| - |
19 |
| -### Installation |
20 |
| - |
21 |
| -Open a Terminal in your project's folder and run, |
22 |
| - |
23 |
| -```sh |
24 |
| -yarn add react-native-paper react-native-vector-icons |
25 |
| -``` |
26 |
| - |
27 |
| -After installation, you'll need to link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). |
28 |
| - |
29 |
| -### Usage |
30 |
| - |
31 |
| -Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegistry.registerComponent`. |
32 |
| - |
33 |
| -Example: |
34 |
| - |
35 |
| -```js |
36 |
| -import React from 'react'; |
37 |
| -import { AppRegistry } from 'react-native'; |
38 |
| -import { Provider as PaperProvider } from 'react-native-paper'; |
39 |
| -import App from './src/App'; |
| 23 | +The source code for the examples are under the [/example](/example) folder. |
40 | 24 |
|
41 |
| -function Main() { |
42 |
| - return ( |
43 |
| - <PaperProvider> |
44 |
| - <App /> |
45 |
| - </PaperProvider> |
46 |
| - ); |
47 |
| -} |
48 |
| - |
49 |
| -AppRegistry.registerComponent('main', () => Main); |
50 |
| -``` |
51 |
| - |
52 |
| -The `PaperProvider` 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. |
53 |
| - |
54 |
| - |
55 |
| -### Customization |
56 |
| - |
57 |
| -You can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](src/styles/DefaultTheme.js) to see what customization options are supported. |
58 |
| - |
59 |
| -Example: |
60 |
| - |
61 |
| -```js |
62 |
| -import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper'; |
63 |
| - |
64 |
| -const theme = { |
65 |
| - ...DefaultTheme, |
66 |
| - colors: { |
67 |
| - ...DefaultTheme.colors, |
68 |
| - primary: 'tomato', |
69 |
| - accent: 'yellow', |
70 |
| - }, |
71 |
| -}; |
| 25 | +## Getting Started |
72 | 26 |
|
73 |
| -function Main() { |
74 |
| - return ( |
75 |
| - <PaperProvider theme={theme}> |
76 |
| - <App /> |
77 |
| - </PaperProvider> |
78 |
| - ); |
79 |
| -} |
80 |
| -``` |
| 27 | +Refer to the [getting started guide](https://callstack.github.io/react-native-paper/getting-started.html) for instructions. |
81 | 28 |
|
82 |
| -### Components |
| 29 | +## Documentation |
83 | 30 |
|
84 |
| -Check all the components and its usage in our [docs page](https://callstack.github.io/react-native-paper/index.html). |
| 31 | +Check the components and their usage in our [documentation](https://callstack.github.io/react-native-paper/index.html). |
85 | 32 |
|
86 | 33 | <!-- badges -->
|
87 |
| -[build-badge]: https://img.shields.io/travis/callstack/react-native-paper/master.svg?style=flat-square |
88 |
| -[build]: https://circleci.com/gh/callstack/react-native-paper |
89 |
| -[version-badge]: https://img.shields.io/npm/v/react-native-paper.svg?style=flat-square |
90 |
| -[package]: https://www.npmjs.com/package/react-native-paper |
91 |
| -[license-badge]: https://img.shields.io/npm/l/react-native-paper.svg?style=flat-square |
| 34 | +[build-badge]: https://img.shields.io/circleci/project/github/callstack/linaria/master.svg?style=flat-square |
| 35 | +[build]: https://circleci.com/gh/callstack/linaria |
| 36 | +[version-badge]: https://img.shields.io/npm/v/linaria.svg?style=flat-square |
| 37 | +[package]: https://www.npmjs.com/package/linaria |
| 38 | +[license-badge]: https://img.shields.io/npm/l/linaria.svg?style=flat-square |
92 | 39 | [license]: https://opensource.org/licenses/MIT
|
| 40 | +[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square |
| 41 | +[prs-welcome]: http://makeapullrequest.com |
93 | 42 | [chat-badge]: https://img.shields.io/badge/chat-slack-brightgreen.svg?style=flat-square&colorB=E01563
|
94 | 43 | [chat]: https://slack.callstack.io/
|
0 commit comments