const HomeScreen = ({ navigation }) => {

  const [reviews, setReviews] = useState([
    { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
  ]);

  return (
    <View style={styles.home}>
      <StatusBar style="auto" />
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Reviews', { item })}>
            <Text style={styles.homeText}>{item.title}</Text>
          </TouchableOpacity> 
        )}
      />
    </View>
  )
};

const ReviewsScreen = ({ navigation, route}) => {

  const { item } = route.params;

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Text style={styles.homeText}>{item.title}</Text>
      <Text style={styles.homeText}>{item.body}</Text>
      <Text style={styles.homeText}>{item.rating}</Text>
      <View style={styles.button}>
        <Button title='home' color={'coral'} onPress={() => navigation.goBack()}/>
      </View>
    </View>
  );
};