Clever Geek Handbook

Adjacent JSX elements must be wrapped in an attached tag

I want to have a navigation bar at the bottom and a toolbar at the top of every page of my React-Native app. However, if I create these two elements in the index.ios.js file, I get the error: "Adjacent JSX elements must be wrapped in an enclosing tag." If I put tags around the Navigator and NavBar, I just see a blank screen in my application. What should I do? This is what my render function looks like in index.ios.js

render() {
    return (
      <Navigator
        initialRoute={{name: 'Login'}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
          style={ styles.nav }
          routeMapper={ NavigationBarRouteMapper } />
        }
        />
        <NavBar />
    );
  }
Run codeHide result


+3


source to share


3 answers


When you wrap it in a view, make sure you set flex to 1. My guess is that the view you give it is not sized and so the children will inherit their size from the parent (which is 0)



+5


source


Wrap both inside a view and give this outer skin of the view flex style 1. Example:



    <View style={{flex: 1}}>
        <Navigator 
           {. . .} 
        />
        <NavBar />
    </View>
+2


source


How To React 16 , if you dont avoid wrapping <View>

you can return multiple components from the render as an array.

return ([
    <Navigator key="navigator" />,
    <NavBar key="navbar" />
]);

Or in a stateless ES6 component:

import React from 'react';

const Component = () => [
  <Navigator key="navigator" />,
  <NavBar key="navbar" />
];

export default Component;

Don't forget the key property as being responsive (like iterating over an array) to be able to differentiate your components.

+2


source






More articles:


All Articles