React.Native: Flat List not showing up

user_14574635 0
Viewed 482

I am trying to return two things, a separate Mission component and a flat list. When I run my emulator, I can get the return on the Mission component but not the flat list. There are no errors, so I'm a bit lost with how to approach this issue. I even double-checked my imports. Here is the code:

import React, { Component } from "react";
import { ScrollView, Text, FlatList } from 'react-native';
import Mission from './Mission';
import PARTNERS from '../shared/partners';
import { ListItem } from 'react-native-elements';

class About extends Component {

  constructor(props) {
    super(props);
    this.state = {
      partners: PARTNERS,
    }
  };

  static navigationOptions = {
    title: 'About Us'
  }

  render() {
    const { navigate } = this.props.navigation;
    const renderPartner = ({ item }) => {
      return (
        <ListItem
          title={item.name}
          subtitle={item.description}
          leftAvatar={{ source: require('./images/bootstrap-logo.png') }}
        />
      );
    };

    return (
    <ScrollView>
        <Mission />
        <FlatList
          data={this.state.partners}
          renderItem={renderPartner}
          keyExtractor={item => item.id.toString()}
      />
    </ScrollView >
    );
  }
}


export default About;
react-native javascript
1 Answers
import React, { Component } from 'react';
import { FlatList, View, Text } from 'react-native';
import { ListItem, Card } from 'react-native-elements';
import { FILMS } from '../shared/films';
 
 /*
  When working correctly, when you hit "Tap to play" in the simulated mobile device to the right, you will see a list of films from shared/films.js.
  Before updating this code:
   - You must be logged into your Expo account (create an account if you do not have one already)
   - Use the Save button on the upper right corner to fork this Snack to your account. Name it as you please, or accept the default random name. 
  Share the link to your version in the forum for this code challenge. 

  Your challenges:  1. Fix the component by adding a constructor and adding the data imported as FILMS to the component's state
                    2. In the FlatList, use that state data for films in the 'data' attribute.
                    3. In the ListItem, add the film title as the title, and the director as the subtitle.
                    4. Update films.js to add a third film of your choice. 
  Bonus Challenge: Write a custom view in the ListItem subtitle to show more details about each film, such as the release year, genre, language.
*/
class FilmCatalogue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      films: FILMS
    }
  }

  render() {
    const renderFilm = ({item}) => {
        return (
            <ListItem
                title={item.title}
                titleStyle={{fontWeight: 700, color: 'dark-grey'}}
                subtitle={
                  <View >
                    <Text style={{fontStyle: "italic", fontWeight: 500}}>{item.director}</Text>
                    <Text>{item.category}</Text>
                    <Text>{item.language}</Text>
                  </View>
                }   
                rightSubtitle={item.year}  
                bottomDivider           
            />
        );
    };

    return (
        <Card title="Film Catalogue">
          <FlatList 
              data={this.state.films}
              renderItem={renderFilm}
              keyExtractor={item=>item.id.toString()}
          />
        </Card>
    );
  } 
}

export default FilmCatalogue;

i used this on an expo snack to display a list of the files i had in this file (the Film Catalogue Component.js)

hope this kind of helps!

user_140725210
Related