Adjacent JSX elements must be wrapped in an enclosing tag for Images?

Question

I looked up other answers such as using flex: 1 on View and I still get the same error. I think it has something to do with Image tags next to each other?

    render() {
    return (

      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) =>
          <View style={{flex: 1}}>

          {this.state.username   ?
          <Image source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>
          <Image square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>
          <Text style={styles.nameText}>{item.first_name} {item.last_name}</Text>
          :

          <Image source={drawerCover} style={styles.drawerCover} />
          <Image square style={styles.drawerImage} source={drawerImage} />

          }
          </View>
        }
              keyExtractor={(item, index) => index}
         />



          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

This is the drawer navigation and I want it to look similar to a material design. And this is saying if the user is logged in then show that person's images. If not then the default images.

Answer 1

When using JSX you can only return a single element. In your solution there are multiple elements which are Image components . The way to solve this is to wrap all of them in a div.

Answer 2

I would not introduce new element to wrap the images and artificially mute the error, you can return a list (Array) of components as there is single parent element where it is rendered, I have removed some code for brevity:

      /* CUT */
      renderItem={({item}) =>
      <View style={{flex: 1}}>

      {this.state.username   ?
      [
          <Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
          <Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
          <Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
      ]
      :
      [
          <Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
          <Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
      ]
      }
      </View>
    }
          keyExtractor={(item, index) => index}
     />
      /* CUT */