How to render Drawer Navigation and Tab Navigation at the same time?

Question

I am trying to find a way to use Drawer Navigation and Tab Navigation in React Native. When I tried to put the components together, I get this error:

Adjacent JSX elements must be wrapped in an enclosing tag.

Here is what I got so far:

 /* Imports */
import React, {Component} from 'react';
import {AppRegistry, Text, View, StyleSheet, TouchableHighlight, TouchableOpacity, YellowBox} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import { NavigationComponent } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import PropTypes from 'prop-types';

import HomeScreen from './Screens/HomeScreen';
import LoginScreen from './Screens/LoginScreen';
import RegisterScreen from './Screens/RegisterScreen';
import ProfileScreen from './Screens/ProfileScreen';
import UserListScreen from './Screens/UserListScreen';
import OtherUserScreen from './Screens/OtherUserScreen';
import OtherTagsScreen from './Screens/OtherTagsScreen';
import QuoteMachineScreen from './Screens/QuoteMachineScreen';
import SideBar from './Screens/SideBar';

/* Main */
class Home extends Component {
  constructor(props) {

   super(props);

   YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
  ]);

 }




}




export default class myapp extends Component{

    render(){
      return(
        /* Main View  */

        /* End Main View */

      <AppDrawerNavigator />
      <TabNav />

      );
    }
}
/*End Main */

/*Navs*/

 const TabNav = TabNavigator({
  HomeScreen: { screen: HomeScreen },
  LoginScreen: { screen: LoginScreen },
  RegisterScreen: { screen: RegisterScreen },
}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: '#333',
      rippleColor: 'white',
      tabs: {
        HomeScreen: {
          barBackgroundColor: '#EEEEEE',
          activeLabelColor: '#212121',
        },
        LoginScreen: {
          barBackgroundColor: '#00796B'
        },
        RegisterScreen: {
          barBackgroundColor: '#EEEEEE', // like in the standalone version, this will override the already specified `labelColor` for this tab
          activeLabelColor: '#212121',
          activeIcon: <Icon size={24} color="#212121" name="newsstand" />
        }
      }
    }
  }
});

const AppDrawerNavigator = DrawerNavigator({
  LoginScreen: {screen: LoginScreen},
  RegisterScreen: {screen: RegisterScreen},
  ProfileScreen: {screen: ProfileScreen},
  UserListScreen: {screen:UserListScreen},
  HomeScreen: {screen: HomeScreen},
  OtherUserScreen: {screen: OtherUserScreen},
  OtherTagsScreen: {screen: OtherTagsScreen},
  QuoteMachineScreen: {screen: QuoteMachineScreen},
},
{
    initialRouteName: "HomeScreen",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  },

);

const AppStackNav = StackNavigator ({
  LoginScreen: {screen: LoginScreen},
  RegisterScreen: {screen: RegisterScreen},
  ProfileScreen: {screen: ProfileScreen},
  UserListScreen: {screen:UserListScreen},
  HomeScreen: {screen: HomeScreen},
  OtherUserScreen: {screen: OtherUserScreen},
  OtherTagsScreen: {screen: OtherTagsScreen},
})

/* Styles */
const styles = StyleSheet.create({
    headerText: {
    textAlign: 'center',
    fontSize: 30,
  },
    flexStyle: {
      flex: 1,
    },
    container: {
      flexDirection: 'row',
      height: 50,
    },
    v1: {
      flex: 1,
      padding: 10,
      backgroundColor: '#333',
      alignItems:'center'
    },
    v2: {
      flex: 1,
      padding: 10,
      backgroundColor: 'gold',
      alignItems:'center',
      justifyContent: 'center'
    },
    v3: {
      flex: 1,
      padding: 10,
      backgroundColor: 'gold',
      alignItems:'center'
    }
});

/* Registry */
AppRegistry.registerComponent('myapp', () => myapp);

Another thing I tried doing is just put them in a separate screen. For example, I would put Drawer Navigation component in the App.JS and then Tab Navigation component in the HomeScreen.JS, but that caused the whole app to go white. Then I went to the debugger and found that it was a Delta Bundler problem. I just can't seem to figure this problem out.

Answer 1

You may be digging too deep for this problem. The error reads, "Adjacent JSX elements must be wrapped in an enclosing tag.". Double check the render method of your myapp class. You need to return a single component, so you should wrap the two components in a container.

Duplicate issue - Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag