Как исправить «Неожиданный токен, ожидаемый «;»» в React Native/Expo?

Я пытаюсь получить данные Json из https://api.myjson.com/bins/q47s3 и отобразить их в FlatList.

Я использую Экспо. Я начал новый проект, используя шаблон react-native-tabs

И это мой код (HomeScreen.js):

export default function HomeScreen() {
  constructor() {
    super();
    this.state = {
      dataSource: []
    }
  }

  renderItem = ({item}) => {
    return (
      <View>
      <Image source = {{uri: item.image}} style = {{width: 100, height: 100}}/>
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.info(error)
    })
  }

  return (
    <View style = {{flex: 1}}>
      <View style = {styles.header}>
        <View style = {styles.searchBarHolder}>
          <Icon name='ios-search' style = {{fontSize: 24}} />
          <TextInput placeholder='Search' style = {{fontSize: 24, marginLeft: 15}} />
        </View>
      </View>
      <FlatList
        data = {this.state.dataSource}
        renderItem = {this.renderItem}
      />
    </View>
  );
}

HomeScreen.navigationOptions = { заголовок: ноль, };

Вот журнал ошибок:

Error: D:\Projects\React Native\fick\screens\HomeScreen.js: Unexpected token, expected ";" (18:16)

  16 | import Icon from 'react-native-vector-icons/Ionicons';
  17 | export default function HomeScreen() {
> 18 |   constructor() {
     |                 ^
  19 |     super()
  20 |     this.state = {
  21 |       dataSource: []

ОБНОВИТЬ

1. Я заменил export default function HomeScreen() { на export default class HomeScreen {
2. Я переместил последний метод return в метод render, так что теперь код выглядит так:

export default class HomeScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: []
    }
  }

  renderItem = ({item}) => {
    return (
      <View style = {{flex: 1}}>
        <View style = {styles.header}>
          <View style = {styles.searchBarHolder}>
            <Icon name='ios-search' style = {{fontSize: 24}} />
            <TextInput placeholder='Search' style = {{fontSize: 24, marginLeft: 15}} />
          </View>
        </View>
        <FlatList
          data = {this.state.dataSource}
          renderItem = {this.renderItem}
        />
      </View>

      <View>
      <Image source = {{uri: item.image}} style = {{width: 100, height: 100}} />
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.info(error)
    })
  }
      <View style = {{flex: 1}}>
        <View style = {styles.header}>
          <View style = {styles.searchBarHolder}>
            <Icon name='ios-search' style = {{fontSize: 24}} />
            <TextInput placeholder='Search' style = {{fontSize: 24, marginLeft: 15}} />
          </View>
        </View>
        <FlatList
          data = {this.state.dataSource}
          renderItem = {this.renderItem}
        />
      </View>

      <View>
      <Image source = {{uri: item.image}} style = {{width: 100, height: 100}} />
      <View>
        <Text>{item.book_title}</Text>
        <Text>{item.author}</Text>
      </View>
    </View>
    )
  }
  }

  componentDidMount() {
    const url = 'https://api.myjson.com/bins/q47s3'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.book_array
      })
    })
    .catch((error) => {
      console.info(error)
    })
  }

Но теперь появляется новая ошибка, есть идеи, что я снова сделал не так?:

Error: D:\Projects\React Native\fick\screens\HomeScreen.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (42:6)

  40 |       </View>
  41 | 
> 42 |       <View>
     |       ^
  43 |       <Image source = {{uri: item.image}} style = {{width: 100, height: 100}}/>
  44 |       <View>
  45 |         <Text>{item.book_title}</Text>