Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Native nested Flatlist

I'm trying to display profile of cooks with the images this person may have. I have an array of cooks with some information like name and profile picture. Cooks array also contains an array of pictures. I would like to display cook.profile Pic name and then the list of photos linked to their profile. I am able to display name and profile Pics but I am not sure how to display array of pictures under each cook's name(horizontal scroll). here is the cooks array:

cooks = [{
        "id": "1001",
        "firstName": "Mike",
        "profilePic": "Portrait.jpg",
        "photos": [{
                "url": "img.jpg"
            },
            {
                "url": "img2.jpg"
            },
            {
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpg"
            }
        ]
    },
    {
        "id": "1002",
        "firstName": "Marla",
        "profilePic": "profilePic.jpg",
        "photos": [{
                "url": "img1.jpg"
            },
            {
                "url": "img2.jpeg"
            },
            {
                "favorite": "true",
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpeg"
            }
        ]
    }
]

==================================================================

    <FlatList
        data={this.props.cooks}
        renderItem={({ item }) => (
          <View>
            <TouchableOpacity >
            <CardSection>
              <View style={thumbnailContainerStyle}>
                <Image
                  style={thumbnailStyle}
                  source={{ uri: item.profilePic }}
                />
                </View>
                <View style={headerContentStyle}>
                  <Text style={headerTextStyle}>{item.firstName}</Text>
                </View>
          </CardSection>
          </TouchableOpacity>
          {/*
            following part is not working as expected.
          */}
          <FlatList
              data={item.photos}
              renderItem={({ item2 }) =>
              <View>
                <Image
                  style={imageStyle}
                  source={{ uri: item2.url }}
                />
              </View>
            }
            keyExtractor={(item2, index) => index}
          />
          </View>
        )}
        keyExtractor={(item, index) => index}
      />

===========================================================

const styles = {
  iconStyle: {
      paddingLeft: 10,
      justifyContent: 'center',
      alignItems: 'center',
      height: 23,
      width: 25
  },
  containerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  inputStyle: {
    paddingLeft: 10,
    fontSize: 30,
    height: 30,
    width: 350
  },
  headerContentStyle: {
    flexDirection: 'column',
    paddingTop: 20
  },
  headerTextStyle: {
    fontSize: 25
  },
  thumbnailStyle: {
    borderRadius: 15,
    height: 100,
    width: 100
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 400,
    flex: 1,
    width: null
  }
};
like image 215
Bikram Singh Avatar asked Dec 29 '17 07:12

Bikram Singh


People also ask

Can I put FlatList inside ScrollView?

When developing with React Native and nesting FlatList or SectionList component inside a plain ScrollView, your debugger might display the following warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

What is the difference between FlatList and SectionList?

SectionList s are like FlatList s, but they can have section headers to separate groups of rows. SectionList s render each item in their input sections using the renderSectionHeader and renderItem prop. Each item in sections should be an object with a unique id (the key), and an array data of row data.

Which is better ScrollView or FlatList?

As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.


2 Answers

You can implement SectionList from 'react-native' library instead of using an nested FlatList. Its easier and a better solution. You have all the documentation up here. Hope this can help you!

like image 193
lfdev Avatar answered Sep 16 '22 12:09

lfdev


Here is an example that i created in one of my Projects. Take a look it may help you

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      dummy: [
        {
          _id: "5e12905eb10fe53808d1ca55",
          name: "WHY NAME EXISTS -_-",
          stage: "Confirmed",
          feedback: {
            _id: "5e12905eb10fe53808d1ca56",
            rating: 1,
            review: "bad bad only bad."
          },

          itemDetails: [
            {
              _id: "5e12905eb10fe53808d1ca5a",
              nameXquantity: "Lehsun Adrak x100",
              individualTotal: 155
            },
            {
              _id: "5e12905eb10fe53808d1ca59",
              nameXquantity: "Lehsun x50",
              individualTotal: 25
            },
            {
              _id: "5e12905eb10fe53808d1ca58",
              nameXquantity: "Lehsun Adrak Dhaniya Shimla mirch x Infinity",
              individualTotal: 9969
            }
          ],

          __v: 0
        }
      ]
    };
  }


  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          <FlatList
            data={this.state.dummy}
            renderItem={({ item }) => (
              <View>
                <Text>{item.name}</Text>
                <FlatList
                  data={item.itemDetails}
                  renderItem={({ item }) => <Text>{item.nameXquantity}</Text>}
                  keyExtractor={item => item._id}
                />
              </View>
            )}
            keyExtractor={item => item._id}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default Test;


like image 24
Nipun Gupta Avatar answered Sep 19 '22 12:09

Nipun Gupta