How to make Flatlist render Text,View elements? in rn, i am currently using scroll view but i want to test flatlist i read rn docs to know about it but i cant render text view elements with their styles, Can anyone can tell how to do that in a proper way? i just want to use flatlist instead of scroll view

Elements that i want to render:

<View style={styles.section1}>
          <Image style={styles.profileimg} source={{ uri: data.profilepic }} />
          <Text style={styles.usernameText}>@{data.username}</Text>
          <View style={styles.Postrow}>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>UpVotes</Text>
              <Text style={styles.UpVote}>{data.upvotes}</Text>
            </View>
            <View style={styles.verticalLine}></View>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>DownVotes</Text>
              <Text style={styles.UpVote}>{data.downvotes}</Text>
            </View>
            <View style={styles.verticalLine}></View>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>Posts</Text>
              <Text style={styles.UpVote}>{data.post.length}</Text>
            </View>
          </View>
          <Text style={styles.decs}>Hello this is des</Text>
        </View>
        <View style={styles.section1}>
          <Text style={styles.postTxt}>Your Posts</Text>
          <View style={styles.posts}>
            {
              data.post.map((item) => {
                return (
                  <Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
                )
              })
            }
          </View>
        </View>

CodePudding user response：

You can Use Below Code :-

const renderItem=({item,index})=>{
return(
 <View style={styles.section1}>
                  <Image style={styles.profileimg} source={{ 
                        uri:item.profilepic}} />
                  <Text style={styles.usernameText}>@{item.username}</Text>
                  <View style={styles.Postrow}>
                    <View style={styles.Postrow1}>
                      <Text style={styles.followerTxt}>UpVotes</Text>
                      <Text style={styles.UpVote}>{item.upvotes}</Text>
                    </View>
                    <View style={styles.verticalLine}></View>
                    <View style={styles.Postrow1}>
                      <Text style={styles.followerTxt}>DownVotes</Text>
                      <Text style={styles.UpVote}>{item.downvotes}</Text>
                    </View>
                    <View style={styles.verticalLine}></View>
                    <View style={styles.Postrow1}>
                      <Text style={styles.followerTxt}>Posts</Text>
                      <Text style={styles.UpVote}>{item.post.length}</Text>
                    </View>
                  </View>
                  <Text style={styles.decs}>Hello this is des</Text>
                </View>
                <View style={styles.section1}>
                  <Text style={styles.postTxt}>Your Posts</Text>
                  <View style={styles.posts}>
                    {
                      item.post.map((item) => {
                        return (
                          <Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
                        )
                      })
                    }
                  </View>
                </View>
)
}
     <FlatList
           data={your_data}
           keyExtractor={item=>item.id}
          renderItem={renderItem}
        
        />

CodePudding user response：

you need to use the renderItem prop with FlatList

first create function component to pass it to the renderItem prop:

const renderItem = (item) => (
   <View style={styles.section1}>
          <Image style={styles.profileimg} source={{ uri: data.profilepic }} />
          <Text style={styles.usernameText}>@{data.username}</Text>
          <View style={styles.Postrow}>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>UpVotes</Text>
              <Text style={styles.UpVote}>{data.upvotes}</Text>
            </View>
            <View style={styles.verticalLine}></View>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>DownVotes</Text>
              <Text style={styles.UpVote}>{data.downvotes}</Text>
            </View>
            <View style={styles.verticalLine}></View>
            <View style={styles.Postrow1}>
              <Text style={styles.followerTxt}>Posts</Text>
              <Text style={styles.UpVote}>{data.post.length}</Text>
            </View>
          </View>
          <Text style={styles.decs}>Hello this is des</Text>
        </View>
        <View style={styles.section1}>
          <Text style={styles.postTxt}>Your Posts</Text>
          <View style={styles.posts}>
            {
              data.post.map((item) => {
                return (
                  <Image key={item.id} style={styles.Postimage} source={{ uri: item.postimg }} />
                )
              })
            }
          </View>
        </View>
)

the in your screen call the flatlist:

<FlatList
           data={/*here pass your data*/}
           keyExtractor={(item, index) => index.toString()} // use index better than using item.id
           renderItem={renderItem}
           nestedScrollEnabled={true}
        />