Fix issue on test

HomeScreen.js

// @flow

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationScreenProps, NavigationEventSubscription } from 'react-navigation';

type Props = {
  onNewTotal: (total: number) => void,
};

type State = {
  entries: number[],
};

class HomeScreen extends React.PureComponent<Props & NavigationScreenProps<{}>, State> {
  focusSubscription: NavigationEventSubscription | null = null;

  state:State = {
    isVisible: false,
    // entries: null    //As you know, this part is area to set the initial values. We can't set null for array here. Just use empty array object. If you wanna keep to use null, we need to write check code in render function.
    entries: [],
  };

  componentDidMount() {
    this.focusSubscription = this.props.navigation.addListener('willFocus', this.onFocus);
  }

  onFocus = () => {
    this.setState({ isVisible: true });
    this.fetch();
  }
  async fetch() {
    // const entries = this.loadData(); You return promise in loadData(), react native can't parse it. so just use await to make react native compiler handle the correct data.
    const entries = await this.loadData();
    this.setState({ entries });
    this.notify();
  }
  loadData() {
    return new Promise((resolve) => window.setTimeout(() => resolve([1, 2, 3]), 1500));
  }
  notify() {
    let total = 0;
    for (let i = 0; i < this.state.entries.length; i++) {
      total += this.state.entries[i];
    }

    this.props.onNewTotal(total);
  }

  render() {
    const entries = this.state.entries;
    const isVisible = this.state.isVisible;

    const containerStyles = {
      ...styles.container,
      ...(isVisible ? styles.containerVisible : {}),
    };
    if (!isVisible) return <View styles={ containerStyles } />;

    return (
      <View styles={ containerStyles }>
        {/* My pretty view:         React native require to wrap all text with Text component at this time.*/}
        <Text>My pretty view:</Text>

        {/* <Text styles={ [styles.title] }>     We can't put View component within Text component now. So sepreate it from Text component and apply the suitable style.
          Entries:
          <View>
            {
              entries.forEach((entry) => <Text>{ entry }</Text>)
            }
          </View>
        </Text> */}


        <Text styles={ [styles.title] }>
          Entries:
        </Text>
        <View>
          {
            entries.map((entry, index) => <Text key={index}>{ entry }</Text>)
          }
        </View>
      </View>
    );
  }
}

// interface Styles = { Typo
interface Styles {
  container: ViewStyle,
  title: TextStyle,
};

const styles = StyleSheet.create<Styles>({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: 'red',
    backgroundColor: 'silver',
    color: 'pink',
    opacity: 0.5,
  },
  containerVisible: {
    opacity: 1,
  },
  title: {
    // fontSize: '19rem',   
    fontSize: 19,
    fontWeight: 'bold',
    margin: '10 0 10 15',
  },
});

export default HomeScreen;