two navigation bars

[amanthegreatone]

Hi,

I am getting two navigation bars in my app. Structure is as follows:

store.js

const createStoreWithNavigation = createNavigationEnabledStore({
  createStore,
  navigationStateKey: 'navigation'
});

// middleware that logs actions only in DEV mode
const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__  });

//configure redux store
function configureStore(initialState) {

  //this is to compose extra middleware functions in redux
  const enhancer = compose(
    applyMiddleware(
      thunkMiddleware, // lets us dispatch() functions
      loggerMiddleware,
    ),
  );

  return createStoreWithNavigation(
    combineReducers({
      navigation: NavigationReducer,
      // other reducers
      appData: reducer
    }),
    initialState,
    enhancer
  );

}//end of configureStore

//run the configureStore function and create store by passing a blank initial state
const store = configureStore( {} );

export default store;

App.js

//create NavigationProvider with navigationContext
const navigationContext = new NavigationContext({
  router: Router,
  store: store,
})

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <NavigationProvider context={navigationContext}>
         <StackNavigation
           id="app"
           navigatorUID="app"
           defaultRouteConfig={defaultRouteConfig}
           initialRoute={Router.getRoute('splashscreen')} />
        </NavigationProvider>
      </Provider>
    );
  }
}

export default App

splashscreen route loads AppContainer.js

class AppContainer extends Component {

  constructor(props){
    super(props);
  }

  componentWillMount(){
    this.testfunctions();
  }

  testfunctions() {
    this.props.navigator.push('drawer');
  }

  render(){
    return(
      <Splashscreen />
    );
  }

}//end of AppContainer

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

function mapStateToProps(state) {
  return {
    verifiedMobile: state.appData.verifiedMobile,
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

Here I will execute some logic and load the next screen which will use drawer navigation. For now I am just pushing the drawer route but I am getting 2 navigation bars.

drawer.js

class Drawer extends Component {

  _renderHeader = () => {
    return (
      <View style={{height: 125, paddingBottom: 12, paddingLeft: 12, backgroundColor: 'blue', justifyContent: 'flex-end'}}>
        <Text style={{fontSize: 18, color: '#fff'}}>
          Syook
        </Text>
      </View>
    );
  };

  _renderTitle(text: string, isSelected: bool) {
    return (
      <Text style={[styles.buttonTitleText, isSelected ? styles.buttonTitleTextSelected : {}]}>
        {text}
      </Text>
    );
  }

  render(){
    return(
      <DrawerNavigation
        renderHeader={this._renderHeader}
        navigatorUID="drawer"
        id="drawer"
        drawerWidth={300}
        initialItem="dashboard">

        <DrawerNavigationItem
          id="dashboard"
          selectedStyle={styles.selectedItemStyle}
          renderTitle={isSelected => this._renderTitle('Dashboard', isSelected)}>
          <StackNavigation
            defaultRouteConfig={defaultRouteConfig}
            navigatorUID="dashboard"
            initialRoute={Router.getRoute('dashboard')}
          />
        </DrawerNavigationItem>

        <DrawerNavigationItem
          id="mytasks"
          selectedStyle={styles.selectedItemStyle}
          renderTitle={isSelected => this._renderTitle('My Tasks', isSelected)}>
          <StackNavigation
            defaultRouteConfig={defaultRouteConfig}
            navigatorUID="mytasks"
            initialRoute={Router.getRoute('mytasks')}
          />
        </DrawerNavigationItem>

        <DrawerNavigationItem
          id="myleads"
          selectedStyle={styles.selectedItemStyle}
          renderTitle={isSelected => this._renderTitle('My Leads', isSelected)}>
          <StackNavigation
            defaultRouteConfig={defaultRouteConfig}
            navigatorUID="myleads"
            initialRoute={Router.getRoute('myleads')}
          />
        </DrawerNavigationItem>

        <DrawerNavigationItem
          id="verifymobile"
          selectedStyle={styles.selectedItemStyle}
          renderTitle={isSelected => this._renderTitle('Verify Mobile', isSelected)}
          >
          <StackNavigation
            defaultRouteConfig={defaultRouteConfig}
            navigatorUID="verifymobile"
            initialRoute={Router.getRoute('verifymobile')}
          />
        </DrawerNavigationItem>

      </DrawerNavigation>
    );
  }

}//end Drawer

const styles = StyleSheet.create({
 buttonTitleText: {
   color: 'black',
   fontWeight: 'bold',
   marginLeft: 18,
 },
 buttonTitleTextSelected: {
   color: 'green',
 },
 selectedItemStyle: {
   backgroundColor: "#EBEBEB",
 },
});

export default Drawer

Can someone tell me what's wrong.

[amanthegreatone]

I think I missed the route in drawer.js

added this to drawer.js and it solved the issue

static route = {
    navigationBar: {
      visible: false,
    }
  };