docs: improve examples

Author: satya164

docs/assets/snack.js

@@ -10,47 +10,45 @@ function appendSnackLink() {
   if (usage) {
     var pre = usage.nextElementSibling;
 
-    while (
-      pre.firstChild.tagName !== 'CODE' ||
-      pre.firstChild.className !== 'language-js'
+    if (
+      pre &&
+      pre.firstChild.tagName === 'CODE' &&
+      pre.firstChild.className === 'language-js'
     ) {
-      pre = pre.nextElementSibling;
-    }
-
-    if (!pre) {
-      return;
-    }
+      var link;
+      var insert = true;
 
-    var link;
-    var insert = true;
+      if (pre.nextElementSibling && pre.nextElementSibling.dataset.snack) {
+        link = pre.nextElementSibling;
+        insert = false;
+      } else {
+        link = document.createElement('a');
+        link.dataset.snack = true;
+        link.target = '_blank';
+        link.innerHTML =
+          'Try this example on Snack <svg width="14px" height="14px" viewBox="0 0 16 16" style="vertical-align: -1px"><g stroke="none" stroke-width="1" fill="none"><polyline stroke="currentColor" points="8.5 0.5 15.5 0.5 15.5 7.5"></polyline><path d="M8,8 L15.0710678,0.928932188" stroke="currentColor"></path><polyline stroke="currentColor" points="9.06944444 3.5 1.5 3.5 1.5 14.5 12.5 14.5 12.5 6.93055556"></polyline></g></svg>';
+      }
 
-    if (pre.nextElementSibling && pre.nextElementSibling.dataset.snack) {
-      link = pre.nextElementSibling;
-      insert = false;
-    } else {
-      link = document.createElement('a');
-      link.dataset.snack = true;
-      link.target = '_blank';
-      link.innerHTML =
-        'Try this example on Snack <svg width="14px" height="14px" viewBox="0 0 16 16" style="vertical-align: -1px"><g stroke="none" stroke-width="1" fill="none"><polyline stroke="currentColor" points="8.5 0.5 15.5 0.5 15.5 7.5"></polyline><path d="M8,8 L15.0710678,0.928932188" stroke="currentColor"></path><polyline stroke="currentColor" points="9.06944444 3.5 1.5 3.5 1.5 14.5 12.5 14.5 12.5 6.93055556"></polyline></g></svg>';
-    }
-
-    var href =
-      'https://snack.expo.io?name=' +
-      encodeURIComponent(document.title + ' Example') +
-      '&description=' +
-      encodeURIComponent(window.location.href) +
-      '&code=' +
-      encodeURIComponent(pre.textContent);
+      var heading = document.querySelector('h1');
+      var href =
+        'https://snack.expo.io?name=' +
+        encodeURIComponent(
+          heading ? heading.textContent : document.title + ' Example'
+        ) +
+        '&description=' +
+        encodeURIComponent(window.location.href) +
+        '&code=' +
+        encodeURIComponent(pre.textContent);
 
-    if (link.href === href) {
-      return;
-    }
+      if (link.href === href) {
+        return;
+      }
 
-    link.href = href;
+      link.href = href;
 
-    if (insert) {
-      pre.insertAdjacentElement('afterend', link);
+      if (insert) {
+        pre.insertAdjacentElement('afterend', link);
+      }
     }
   }
 }

example/src/BottomNavigationExample.js

@@ -34,7 +34,7 @@ export default class ButtomNavigationExample extends React.Component<
   {},
   State
 > {
-  static title = 'Bottom navigation';
+  static title = 'Bottom Navigation';
 
   state = {
     index: 0,

example/src/ExampleList.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { FlatList } from 'react-native';
 import { List, Divider, withTheme } from 'react-native-paper';
+import AppbarExample from './AppbarExample';
 import BottomNavigationExample from './BottomNavigationExample';
 import ButtonExample from './ButtonExample';
 import CardExample from './CardExample';
@@ -11,19 +12,19 @@ import ChipExample from './ChipExample';
 import DialogExample from './DialogExample';
 import DividerExample from './DividerExample';
 import FABExample from './FABExample';
+import IconButtonExample from './IconButtonExample';
 import ListAccordionExample from './ListAccordionExample';
 import ListSectionExample from './ListSectionExample';
 import ProgressBarExample from './ProgressBarExample';
 import RadioButtonExample from './RadioButtonExample';
 import RadioButtonGroupExample from './RadioButtonGroupExample';
-import RippleExample from './RippleExample';
 import SearchbarExample from './SearchbarExample';
 import SnackbarExample from './SnackbarExample';
 import SurfaceExample from './SurfaceExample';
 import SwitchExample from './SwitchExample';
 import TextExample from './TextExample';
 import TextInputExample from './TextInputExample';
-import AppbarExample from './AppbarExample';
+import TouchableRippleExample from './TouchableRippleExample';
 import type { Theme } from 'react-native-paper/types';
 
 type Props = {
@@ -41,18 +42,19 @@ export const examples = {
   dialog: DialogExample,
   divider: DividerExample,
   fab: FABExample,
+  iconButton: IconButtonExample,
   listAccordion: ListAccordionExample,
   listSection: ListSectionExample,
   progressbar: ProgressBarExample,
   radio: RadioButtonExample,
   radioGroup: RadioButtonGroupExample,
-  ripple: RippleExample,
   searchbar: SearchbarExample,
   snackbar: SnackbarExample,
   surface: SurfaceExample,
   switch: SwitchExample,
   text: TextExample,
   textInput: TextInputExample,
+  touchableRipple: TouchableRippleExample,
 };
 
 const data = Object.keys(examples).map(id => ({ id, data: examples[id] }));

example/src/IconButtonExample.js

@@ -0,0 +1,44 @@
+/* @flow */
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { IconButton, Colors, withTheme } from 'react-native-paper';
+import type { Theme } from 'react-native-paper/types';
+
+type Props = {
+  theme: Theme,
+};
+
+type State = {
+  loading: boolean,
+};
+
+class ButtonExample extends React.Component<Props, State> {
+  static title = 'Icon Button';
+
+  render() {
+    const { colors } = this.props.theme;
+
+    return (
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <IconButton icon="add-a-photo" size={24} onPress={() => {}} />
+        <IconButton
+          icon="https"
+          size={24}
+          color={Colors.green500}
+          onPress={() => {}}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 8,
+  },
+});
+
+export default withTheme(ButtonExample);

example/src/ProgressBarExample.js

@@ -14,7 +14,7 @@ type State = {
 };
 
 class ProgressBarExample extends React.Component<Props, State> {
-  static title = 'Progress bar';
+  static title = 'Progress Bar';
 
   state = {
     progress: 0,

example/src/RadioButtonExample.js

@@ -20,7 +20,7 @@ type State = {
 };
 
 class RadioButtonExample extends React.Component<Props, State> {
-  static title = 'Radio button';
+  static title = 'Radio Button';
 
   state = {
     checked: 'normal',

example/src/RadioButtonGroupExample.js

@@ -14,7 +14,7 @@ type State = {
 };
 
 class RadioButtonGroupExample extends React.Component<Props, State> {
-  static title = 'Radio button group';
+  static title = 'Radio Button Group';
 
   state = {
     value: 'first',

example/src/RippleExample.js renamed to example/src/TouchableRippleExample.js

@@ -9,7 +9,7 @@ type Props = {
 };
 
 class RippleExample extends React.Component<Props> {
-  static title = 'Ripples';
+  static title = 'TouchableRipple';
 
   render() {
     const {

src/components/Appbar/Appbar.js

@@ -49,10 +49,10 @@ export const DEFAULT_APPBAR_HEIGHT = 56;
  *   render() {
  *     return (
  *       <Appbar style={styles.bottom}>
- *         <Appbar.Action icon="archive" onPress={() => {}} />
- *         <Appbar.Action icon="mail" onPress={() => {}} />
- *         <Appbar.Action icon="label" onPress={() => {}} />
- *         <Appbar.Action icon="delete" onPress={() => {}} />
+ *         <Appbar.Action icon="archive" onPress={() => console.log('Pressed archive')} />
+ *         <Appbar.Action icon="mail" onPress={() => console.log('Pressed mail')} />
+ *         <Appbar.Action icon="label" onPress={() => console.log('Pressed label')} />
+ *         <Appbar.Action icon="delete" onPress={() => console.log('Pressed delete')} />
  *       </Appbar>
  *     );
  *   }

src/components/Chip.js

@@ -90,7 +90,7 @@ type State = {
  * import { Chip } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *   <Chip icon="info" onPress={() => {}}>Example Chip</Chip>
+ *   <Chip icon="info" onPress={() => console.log('Pressed')}>Example Chip</Chip>
  * );
  *
  * export default MyComponent;

src/components/FAB/FAB.js

@@ -69,7 +69,7 @@ type Props = {
  *   <FAB
  *     small
  *     icon="add"
- *     onPress={() => {}}
+ *     onPress={() => console.log('Pressed')}
  *   />
  * );
  *

src/components/FAB/FABGroup.js

@@ -103,10 +103,10 @@ type State = {
  *           open={this.state.open}
  *           icon={this.state.open ? 'today' : 'add'}
  *           actions={[
- *             { icon: 'add', onPress: () => {} },
- *             { icon: 'star', label: 'Star', onPress: () => {} },
- *             { icon: 'email', label: 'Email', onPress: () => {} },
- *             { icon: 'notifications', label: 'Remind', onPress: () => {} },
+ *             { icon: 'add', onPress: () => console.log('Pressed add') },
+ *             { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star')},
+ *             { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
+ *             { icon: 'notifications', label: 'Remind', onPress: () => console.log('Pressed notifications') },
  *           ]}
  *           onStateChange={({ open }) => this.setState({ open })}
  *           onPress={() => {