Add CustomButton screen to example app

example/src/screens/NavigationTypes.js

@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import Row from '../components/Row';
 
-class NavigationTypes extends Component {
+class NavigationTypes extends React.Component {
 
   constructor(props) {
     super(props);
@@ -40,6 +40,13 @@ class NavigationTypes extends Component {
     });
   };
 
+  pushCustomButtonScreen = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.CustomButtonScreen',
+      title: 'Custom Buttons'
+    });
+  };
+
   pushTopTabsScreen = () => {
     this.props.navigator.push({
       screen: 'example.Types.TopTabs',
@@ -93,6 +100,7 @@ class NavigationTypes extends Component {
         <Row title={'Toggle Drawer'} onPress={this.toggleDrawer}/>
         <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen}/>
         <Row title={'Custom TopBar'} onPress={this.pushCustomTopBarScreen}/>
+        <Row title={'Custom Button'} onPress={this.pushCustomButtonScreen}/>
         <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'}/>
         <Row title={'Show Modal'} onPress={this.showModal}/>
         <Row title={'Show Lightbox'} onPress={this.showLightBox}/>

example/src/screens/index.js

@@ -10,6 +10,7 @@ import LightBox from './types/LightBox';
 import Notification from './types/Notification';
 import Modal from './types/Modal';
 import CustomTopBarScreen from './types/CustomTopBarScreen';
+import CustomButtonScreen from './types/CustomButtonScreen';
 import TopTabs from './types/TopTabs';
 import TabOne from './types/tabs/TabOne';
 import TabTwo from './types/tabs/TabTwo';
@@ -35,6 +36,7 @@ export function registerScreens() {
   Navigation.registerComponent('example.Types.LightBox', () => LightBox);
   Navigation.registerComponent('example.Types.Notification', () => Notification);
   Navigation.registerComponent('example.Types.CustomTopBarScreen', () => CustomTopBarScreen);
+  Navigation.registerComponent('example.Types.CustomButtonScreen', () => CustomButtonScreen);
   Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
   Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
   Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);

example/src/screens/types/CustomButtonScreen.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Button
+} from 'react-native';
+import {Navigation} from 'react-native-navigation';
+
+let navigator;
+const CustomButton = ({text}) =>
+  <TouchableOpacity
+    style={[styles.buttonContainer]}
+    onPress={() => navigator.pop()}
+  >
+    <View style={styles.button}>
+      <Text style={{ color: 'white' }}>{text}</Text>
+    </View>
+  </TouchableOpacity>;
+Navigation.registerComponent('CustomButton', () => CustomButton);
+
+export default class CustomButtonScreen extends React.Component {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        id: 'custom-button',
+        component: 'CustomButton',
+        passProps: {
+          text: 'Hi!'
+        }
+      }
+    ]
+  };
+
+  componentWillMount() {
+    navigator = this.props.navigator;
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Custom Left Button</Text>
+      </View>
+    );
+  }
+
+  componentWillUnmount() {
+    navigator = null;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white'
+  },
+  buttonContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  button: {
+    backgroundColor: 'tomato',
+    width: 34,
+    height: 34,
+    borderRadius: 34 / 2,
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});