Add custom component in TopBar example screen

example/src/screens/CustomNavBarScreen.js

@@ -1,45 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Button
-} from 'react-native';
-
-export default class CustomNavBarScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true,
-    navBarCustomView: 'example.CustomNavBar',
-    navBarCustomViewInitialProps: {name: 'Hi Custom'}
-  };
-
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-      </View>
-    );
-  }
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop: 10,
-    color: 'blue'
-  }
-});

example/src/screens/Types.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Text, ScrollView, TouchableHighlight} from 'react-native';
+import {StyleSheet, ScrollView} from 'react-native';
 import Row from '../components/Row';
 
 class Types extends React.Component {
@@ -18,6 +18,12 @@ class Types extends React.Component {
     });
   };
 
+  pushCustomTopBarScreen = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.CustomTopBarScreen'
+    });
+  };
+
   pushTopTabsScreen = () => {
     this.props.navigator.push({
       screen: 'example.Types.TopTabs',
@@ -70,6 +76,7 @@ class Types extends React.Component {
       <ScrollView style={styles.container}>
         <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={'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

@@ -9,6 +9,7 @@ import Drawer from './types/Drawer';
 import LightBox from './types/LightBox';
 import Notification from './types/Notification';
 import Modal from './types/Modal';
+import CustomTopBarScreen from './types/CustomTopBarScreen';
 import TopTabs from './types/TopTabs';
 import TabOne from './types/tabs/TabOne';
 import TabTwo from './types/tabs/TabTwo';
@@ -33,6 +34,7 @@ export default function () {
   Navigation.registerComponent('example.Types.Modal', () => Modal);
   Navigation.registerComponent('example.Types.LightBox', () => LightBox);
   Navigation.registerComponent('example.Types.Notification', () => Notification);
+  Navigation.registerComponent('example.Types.CustomTopBarScreen', () => CustomTopBarScreen);
   Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
   Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
   Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);

example/src/screens/CustomNavBar.js → example/src/screens/types/CustomTopBar.js

@@ -4,11 +4,10 @@ import {
   View,
   TouchableOpacity,
   Text,
-  Image
+  Platform
 } from 'react-native';
 
-
-export default class CustomNavBar extends Component {
+export default class CustomTopBar extends Component {
 
   constructor(props) {
     super(props);
@@ -19,8 +18,7 @@ export default class CustomNavBar extends Component {
     return (
       <View style={styles.container}>
         <TouchableOpacity stye={styles.button} onPress={ () => alert('Thanks for that :)') }>
-          <Text style={{color: 'red', textAlign: 'center'}}>{this.props.name}</Text>
-          <Text style={{textAlign: 'center'}}>Press Me</Text>
+          <Text style={styles.text}>Press Me</Text>
         </TouchableOpacity>
 
       </View>
@@ -32,16 +30,15 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent'
+    alignItems: 'center'
   },
   button: {
-    textAlign: 'center',
-    fontSize: 22,
-    marginBottom: 10,
-    marginTop: 10,
-    color: 'blue',
-
+    alignSelf: 'center',
+    backgroundColor: 'green'
+  },
+  text: {
+    alignSelf: 'center',
+    color: Platform.OS === 'ios' ? 'black' : 'white'
   }
 });
 

example/src/screens/types/CustomTopBarScreen.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import {
+  View,
+  StyleSheet,
+  Text
+} from 'react-native';
+import {Navigation} from 'react-native-navigation';
+import CustomTopBar from './CustomTopBar';
+Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar);
+
+export default class CustomTopBarScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true,
+    navBarCustomView: 'example.CustomTopBar',
+    navBarComponentAlignment: 'center',
+    navBarCustomViewInitialProps: {name: 'Hi Custom'}
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Custom component in TopBar</Text>
+      </View>
+    );
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white'
+  },
+  text: {
+
+  }
+});