このサイドバーコンポーネントの何が問題になっていますか？生のテキスト「}」を明示的なテキストコンポーネントでラップする必要があることを示しています

このコードは昨日機能しました。分離しようとすると、このエラーが表示されます。他のコンポーネントが完全に機能する限り、このコンポーネントに問題があると確信しています。その理由は何でしょうか？以下のコードを確認できます。

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Platform,
} from "react-native";
import {
  Content,
  List,
  Icon,
  ListItem,
  Left,
  Input,
  Item,
  Thumbnail
} from "native-base";
import Exponent from "expo"
const screenHeight = Dimensions.get("window").height;
const datas = [
  {
    name: "Home",
    route: "Home",
    icon: "home",
  },

  {
    name: "Business",
    route: "Home",
    icon: "briefcase",
  },
  {
    name: "Education",
    route: "Home",
    icon: "book",
  },
  {
    name: "Life Style",
    route: "Home",
    icon: "shirt",
  },
  {
    name: "Tech",
    route: "Home",
    icon: "phone-portrait",
  },
  {
    name: "Profile",
    route: "Profile",
    icon: "contact",
  },
  {
    name: "Settings",
    route: "Settings",
    icon: "settings",
  },
  {
    name: "Contact",
    route: "Contact",
    icon: "mail",
  },
  {
    name: "Log Out",
    route: "Signin",
    icon: "log-out",
  },
];

const DrawerContent = props => {

  return (
    <View style={styles.container}>
      <Content style={{marginTop: 20}}>
      <View style={styles.avatarview}>
      <Thumbnail source={require("../img/profile4.jpg")} style={{marginTop:40}}/>
      <Text style={styles.profiletext}> Jhon </Text>
      </View>
        <List
          dataArray={datas}
          renderRow={data =>
            <ListItem
              button
              noBorder
              onPress={() => props.navigation.navigate(data.route)}
            >
              <Left style={{marginLeft: 15}}>
                <Icon
                  active
                  name={data.icon}
                  style={styles.navicon}

                />
                <Text style={styles.navtext}>
                  {data.name}
                </Text>
                  }
              </Left>
            </ListItem>}
        />
      </Content>
    </View>
  );
};

const styles = {
  container: {
    height: screenHeight,
    backgroundColor: "#ffffff",
    flex: 1,
    paddingTop: Exponent.Constants.statusBarHeight,
  },
  avatarview: {
    height:200,
    backgroundColor:"#ffffff",
    alignItems:"center"
  },
  profiletext:{
    marginTop:30,
    color:"#ffffff"
  },

navicon:{
   color: "#222222",
   fontSize: 22,
   marginTop: Platform.OS === "ios" ? 1.8 : 4,
},
navtext:{
  color: "#222222",
   fontSize: 22,
    marginLeft: 15
},


};

export default DrawerContent;

ネイティブベースとエキスポを使用しています。最も興味深いのは、eslintがそれを引き起こす可能性のある線を表示しないことです。何が問題で、どうすればこれを修正できますか？