CODEWITHSUNDEEP
javascriptreact-nativereact-native-flatlist
ccd
ccd

Reputation: 6908

FlatList scroll with the static component

I have one static component and many for loop rendered components in a screen.

The all code below here.

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FriendsTop />  // the static component
        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

Now I want to migrate the FriendsTop into Flatlist, let it scroll with the rendered components, how should I change my code?

Upvotes: 2

Views: 1815

Answers (3)

Roozbeh Mohammadzadeh
Roozbeh Mohammadzadeh

Reputation: 689

i thing there is two way for doing this first using the first using the header component of flatlist

but i guess if you want static data with the data you get from fetch you should combine them 

 <FlatList
   inverted
      data={this.state.data.concat({
        "id":1,
        "user_id": 1,
        "title": "all",
        "similar_title": null,
        "description": null,
        "font_icon": null,
        "default_distance": 8,
        "visible": "yes",
        "priority": "no",
        "image": null,
        "created_at": null,
        "updated_at": "2018-06-14 22:13:58"
    })}

      numColumns={4}


      renderItem={({item}) =>

in that code i am adding static all button with concat image

Upvotes: 0

Milore
Milore

Reputation: 1672

Flatlist has a prop ListHeaderComponent which accepts a JSX element. So:

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>

        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={<FriendsTop />}
        />
      </View>
    );
  }
}

Upvotes: 4

Drew Reese
Drew Reese

Reputation: 202585

This may work for you:

import React, { Fragment } from "react";

...

<FlatList
  style={{ flex: 1 }}
  data={this.props.friendsCard}
  renderItem={({ item }, index) => (
    <Fragment>
      { !index && <FriendsTop /> } // Render when !index is truthy (i.e. index === 0)
      <FriendsCard {...item} />
    </Fragment>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

Upvotes: 2

Related Questions