expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

SlidingTabNavigation not displaying tabs #393

Closed amanthegreatone closed 7 years ago

amanthegreatone commented 7 years ago

Hi,

I am facing a weird issue with SlidingTabNavigation not displaying the tabs. When I change to TabNavigation the tabs are getting displayed.

I have SlidingTabNavigation screens being rendered properly from the drawer items but not sure why this new screen is giving this behaviour.

Structure is as follows:

Drawer: Item 1 Item 2 ... SlidingTabNavigation (works fine) ... each Tab has ListView and on click of ListViewItem a new SlidingTabNavigation screen should open but is giving this issue. Item 3

This is the screen which is giving issues: replacing SlidingTabNavigation with TabNavigation displays the tabs else only a blank white screen

import defaultRouteConfig from '../navigation/defaultRouteConfig';

 class TaskDetails extends Component {

   constructor(props){
     super(props);
   }

   static route = {
     navigationBar: {
     title: 'Tasks Details',
      //visible: false
     }
   }

   componentWillUnmount(){
     this.props.dispatch(setCurrentTask({}));
   }

   _renderHeader = (props) => {
     const {style} = this.props;
     return (<TabBarTop
       scrollEnabled
       style={styles.tabbar}
       {...props}
     />);
    };

   render(){
     return(
       <View style={styles.container}>

         <Text>Task Details</Text>

         <SlidingTabNavigation
           id="taskdetails"
           navigatorUID="taskdetails"
           barBackgroundColor="blue"
           //renderHeader={this._renderHeader}
           indicatorStyle={styles.tabIndicator}
           initialTab="task">

           <TabItem
             id="task"
             title="Task">
             <StackNavigation
               id="task"
               navigatorUID="task"
               defaultRouteConfig={defaultRouteConfig}
               initialRoute={Router.getRoute('task')}/>
           </TabItem>

           <TabItem
             id="revenue"
             title="Revenue">
             <StackNavigation
               id="revenue"
               navigatorUID="revenue"
               defaultRouteConfig={defaultRouteConfig}
               initialRoute={Router.getRoute('revenue')}/>
           </TabItem>

         </SlidingTabNavigation>
       </View>
     );
   }

 }//end of TaskDetails
amanthegreatone commented 7 years ago

I added another drawer menu item mimicing Item2 and there also I am getting the same issue. SlidingTabNavigation throws a blank screen but just changing it to TabNavigation and TabNavigationItem the tabs show.

amanthegreatone commented 7 years ago

Found the issue, was creating the problem. Cannot wrap the SlidingTabNavigation inside a view else it will give blank screen.