feat: Snackbar component

docs/package.json

@@ -22,7 +22,7 @@
   "license": "MIT",
   "dependencies": {
     "color": "^2.0.1",
-    "component-docs": "^0.11.5",
+    "component-docs": "^0.11.6",
     "linaria": "^0.5.0"
   }
 }

docs/yarn.lock

@@ -1552,9 +1552,9 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-component-docs@^0.11.5:
-  version "0.11.5"
-  resolved "https://registry.yarnpkg.com/component-docs/-/component-docs-0.11.5.tgz#c02749360f026267240a7b1d3d888469b4fb4019"
+component-docs@^0.11.6:
+  version "0.11.6"
+  resolved "https://registry.yarnpkg.com/component-docs/-/component-docs-0.11.6.tgz#1e46f6385679afe4aa43e5fc275c311fea773538"
   dependencies:
     babel-core "^6.26.0"
     babel-loader "^7.1.4"

example/src/ExampleList.js

@@ -18,6 +18,7 @@ import RadioButtonExample from './RadioButtonExample';
 import RadioButtonGroupExample from './RadioButtonGroupExample';
 import RippleExample from './RippleExample';
 import SearchbarExample from './SearchbarExample';
+import SnackbarExample from './SnackbarExample';
 import SwitchExample from './SwitchExample';
 import TextExample from './TextExample';
 import TextInputExample from './TextInputExample';
@@ -44,6 +45,7 @@ export const examples = {
   radioGroup: RadioButtonGroupExample,
   ripple: RippleExample,
   searchbar: SearchbarExample,
+  snackbar: SnackbarExample,
   switch: SwitchExample,
   text: TextExample,
   textInput: TextInputExample,

example/src/SnackbarExample.js

@@ -0,0 +1,64 @@
+/* @flow */
+
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Snackbar, Colors, withTheme, Button } from 'react-native-paper';
+import type { Theme } from 'react-native-paper/types';
+
+type Props = {
+  theme: Theme,
+};
+
+type State = {
+  visible: boolean,
+};
+
+class SnackbarExample extends React.Component<Props, State> {
+  static title = 'Snackbar';
+
+  state = {
+    visible: false,
+  };
+
+  render() {
+    const {
+      theme: {
+        colors: { background },
+      },
+    } = this.props;
+    return (
+      <View style={[styles.container, { backgroundColor: background }]}>
+        <Button
+          raised
+          onPress={() => this.setState(state => ({ visible: !state.visible }))}
+        >
+          {this.state.visible ? 'Hide' : 'Show'}
+        </Button>
+        <Snackbar
+          visible={this.state.visible}
+          onDismiss={() => this.setState({ visible: false })}
+          action={{
+            label: 'Undo',
+            onPress: () => {
+              // Do something
+            },
+          }}
+          duration={Snackbar.DURATION_INDEFINITE}
+        >
+          Hey there! I&apos;m a Snackbar.
+        </Snackbar>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.grey200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default withTheme(SnackbarExample);