Fix navigation tool bar ios (#1941)

* remove unused code from tabStyle

* improve dummy screen ui

* set list screen translucent navigation bar

* make RCCToolBarView to composite the UIRootView inside

example/src/app.js

@@ -34,13 +34,8 @@ Navigation.startTabBasedApp({
   animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
   tabsStyle: {
     tabBarBackgroundColor: '#003a66',
-    navBarButtonColor: '#ffffff',
     tabBarButtonColor: '#ffffff',
-    navBarTextColor: '#ffffff',
     tabBarSelectedButtonColor: '#ff505c',
-    navigationBarColor: '#003a66',
-    navBarBackgroundColor: '#003a66',
-    statusBarColor: '#002b4c',
     tabFontFamily: 'BioRhyme-Bold',
   },
   appStyle: {

example/src/screens/types/DummyScreen.js

@@ -6,11 +6,24 @@ import {
   Dimensions,
   Text,
   StyleSheet,
-  Button
+  Button,
+  PixelRatio
 } from 'react-native';
+import {NavigationToolBarIOS} from 'react-native-navigation';
 
+const {width} = Dimensions.get('window');
 
-class ListScreen extends Component {
+
+class DummyScreen extends Component {
+
+  static navigatorStyle = {
+    drawUnderNavBar: true,
+    navBarTranslucent:true,
+    navBarNoBorder: true,
+    navBarTextColor: 'black',
+    navBarButtonColor: 'black',
+
+  };
 
   render(){
     return (
@@ -20,6 +33,10 @@ class ListScreen extends Component {
         <Text>🤗</Text>
         <Text>{this.props.text}</Text>
 
+        <NavigationToolBarIOS key='segmented' translucent={true} style={styles.toolBarStyle}>
+          <Button title={"I Am NavigationToolBarIOS, Press Me"} onPress={() => alert('Thank You')}/>
+        </NavigationToolBarIOS>
+
 
       </View>
     );
@@ -30,9 +47,18 @@ const styles = StyleSheet.create({
   cellContainer: {
     flex: 1,
     paddingVertical: 30,
+  },
+  toolBarStyle: {
+    top: 64,
+    width: width,
+    position: 'absolute',
+    borderTopWidth: 0,
+    height: 66,
+    backgroundColor: 'transparent'
+
   }
 });
 
 
 
-module.exports = ListScreen;
+module.exports = DummyScreen;

example/src/screens/types/ListScreen.js

@@ -31,9 +31,16 @@ const Colors = [
   "#bdc3c7",
   "#7f8c8d"
 ];
-const {height, width} = Dimensions.get('window');
 
 class ListScreen extends Component {
+  static navigatorStyle = {
+    drawUnderNavBar: true,
+    navBarTranslucent:true,
+    navBarButtonColor: 'black',
+    navBarTextColor: 'black'
+
+  };
+
   constructor(props){
     super(props);
     this.data = [];
@@ -57,14 +64,15 @@ class ListScreen extends Component {
   render(){
     return (
       <ScrollView
-        style={[{flex: 1, backgroundColor: 'transparent',}]}
+        style={[{flex: 1, backgroundColor: 'transparent'}]}
         scrollEnabled={true}
         scrollsToTop={false}
         scrollEventThrottle={100}
         automaticallyAdjustContentInsets={false}
         directionalLockEnabled={true}
         showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}>
+        showsVerticalScrollIndicator={false}
+        contentOffset={{y: -64}}>
 
 
         {_.map(this.data, (o, i) => {

ios/RCCToolBar/RCCToolBar.m

@@ -8,9 +8,10 @@
 
 #import "RCCToolBar.h"
 
-@interface RCCToolBarView : UIToolbar
+@interface RCCToolBarView : UIView
 
 @property (nonatomic) BOOL toolBarTranslucent;
+@property (nonatomic, strong) UIToolbar *toolbar;
 
 @end
 
@@ -22,7 +23,10 @@
     self = [super init];
     if (self)
     {
-        self.toolBarTranslucent = self.translucent;
+        self.toolBarTranslucent = self.toolbar.translucent;
+        self.backgroundColor = [UIColor clearColor];
+        self.toolbar = [[UIToolbar alloc] init];
+        [self addSubview:self.toolbar];
     }
     return self;
 }
@@ -31,7 +35,13 @@
 -(void)didMoveToWindow
 {
     [super didMoveToWindow];
-    self.translucent = self.toolBarTranslucent;
+    self.toolbar.translucent = self.toolBarTranslucent;
+}
+
+-(void)reactSetFrame:(CGRect)frame {
+    [super reactSetFrame:frame];
+    
+    self.toolbar.frame = self.bounds;
 }
 
 @end
@@ -54,4 +64,4 @@ RCT_CUSTOM_VIEW_PROPERTY(translucent, BOOL, RCCToolBarView)
 }
 
 
-@end
+@end