|
1 | 1 | # react-native-snackbar
|
2 | 2 |
|
3 |
| -Implementation of the material design Snackbar component for both Android and iOS. See [Google Design](https://material.google.com/components/snackbars-toasts.html) for more info. |
| 3 | +Implementation of the material design Snackbar component for both Android and iOS. |
| 4 | +See [Google Design](https://material.google.com/components/snackbars-toasts.html) for more info. |
4 | 5 |
|
5 | 6 | ## Installation
|
6 | 7 |
|
7 | 8 | To use this extension, you have to do the following steps:
|
8 | 9 |
|
9 | 10 | 1. In your react-native project, run
|
10 | 11 |
|
11 |
| - - using npm |
| 12 | + - using npm: |
12 | 13 |
|
13 |
| - ``` |
14 |
| - npm install react-native-snackbar |
15 |
| - ``` |
| 14 | + ```shell |
| 15 | + npm install react-native-snackbar |
| 16 | + ``` |
16 | 17 |
|
17 |
| - - using yarn: |
| 18 | + - using yarn: |
18 | 19 |
|
19 |
| - ``` |
20 |
| - yarn add react-native-snackbar |
21 |
| - ``` |
| 20 | + ```shell |
| 21 | + yarn add react-native-snackbar |
| 22 | + ``` |
22 | 23 |
|
23 |
| -2. Link the library using `react-native link react-native-snackbar` (learn more about [linking](https://facebook.github.io/react-native/docs/linking-libraries-ios.html). |
| 24 | +2. Link the library using `react-native link react-native-snackbar` |
| 25 | +(learn more about [linking](https://facebook.github.io/react-native/docs/linking-libraries-ios.html). |
24 | 26 |
|
25 |
| -3. Import it in you JS, where you want to show a snackbar |
26 |
| - ``` |
27 |
| - import Snackbar from 'react-native-snackbar'; |
28 |
| - ``` |
| 27 | +3. Import it in your JS where you want to show a snackbar: |
| 28 | + |
| 29 | + ```js |
| 30 | + import Snackbar from 'react-native-snackbar'; |
| 31 | + ``` |
29 | 32 |
|
30 | 33 | ## Usage
|
31 | 34 |
|
32 |
| -To show a simple snackbar simply call: |
33 |
| -``` |
| 35 | +To show a simple snackbar: |
| 36 | + |
| 37 | +```js |
34 | 38 | Snackbar.show({
|
35 |
| - title: 'Hello world', |
| 39 | + title: 'Hello world', |
36 | 40 |
|
37 |
| - // Optional duration. Can be one of LENGTH_LONG | LENGTH_SHORT | LENGTH_INDEFINITE. |
38 |
| - duration: Snackbar.LENGTH_LONG, |
| 41 | + // Optional duration. Can be one of LENGTH_LONG | LENGTH_SHORT | LENGTH_INDEFINITE. |
| 42 | + duration: Snackbar.LENGTH_LONG, |
39 | 43 | });
|
40 | 44 | ```
|
41 | 45 |
|
42 |
| -*..Preview..* |
| 46 | +Or, to include an action button: |
43 | 47 |
|
44 |
| -To add an action: |
45 |
| -``` |
| 48 | +```js |
46 | 49 | Snackbar.show({
|
47 |
| - title: 'Hello world', |
48 |
| - action: { |
49 |
| - title: 'UNDO', |
50 |
| - color: 'green', |
51 |
| - onPress: () => { |
52 |
| - // do something here |
53 |
| - }, |
54 |
| - }, |
| 50 | + title: 'Hello world', |
| 51 | + action: { |
| 52 | + title: 'UNDO', |
| 53 | + color: 'green', |
| 54 | + onPress: () => { /* Do something. */ }, |
| 55 | + }, |
55 | 56 | });
|
56 | 57 | ```
|
57 | 58 |
|
58 |
| -Note that actions do not currently work on Android. Feel free to submit a PR! |
59 |
| - |
60 |
| -*..Preview..* |
| 59 | +TODO: Add screenshots :sunglasses: |
0 commit comments