CODEWITHSUNDEEP
arraysreactjsreact-nativereact-native-flatlistflatlist
Oliver Darby
Oliver Darby

Reputation: 544

How can you use a flatlist to render components in react native

I am currently creating an onboarding screen which is just a few components navigating linear to the next component on a button click. However I’ve seen I could use a flatlist to style this better. Is it possible to pass components to a flatlist as the data prop?

     import React from 'react';
    import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
   import DateOfBirth, Name, ProfilePicture from ‘./components’
    
    const DATA = [
      DateOfBirth, Name, ProfilePicture
    ];
   

 return (
        <SafeAreaView style={styles.container}>
          <FlatList
            data={DATA}
          />
        </SafeAreaView>
      );
    }

Would this be possible for example? I know there is a renderedItems prop which seems to do something similar but seems to match the data to the item which isn’t what I really want. Is there anyway better? Or if there is any better libraries for onboarding options in react native that would be great. Most of what I see is similar to a flatlist and adds just an array with text rather than inputs etc

Upvotes: 0

Views: 6082

Answers (5)

Abha Dubey
Abha Dubey

Reputation: 1

const [page, setPage] = useState(1);

{loading ? (
            <ActivityIndicator size="large" color="#0000ff" style={styles.loader} />
          ) : (
            <FlatList
              data={data}
              renderItem={({ item }) => <Item item={item} />}
              keyExtractor={item => item.id}
              showsVerticalScrollIndicator={false}
              ItemSeparatorComponent={ItemSeparator}
              onEndReached={loadMoreData}
              onEndReachedThreshold={0.5}
              ListEmptyComponent={<Text style={styles.noDataText}>No data found</Text>}
            />
          )}

ItemSeparator function

const loadMoreData = () => {
    if (!loading && hasMore) {
      setPage(prevPage => prevPage + 1);
    }
  };

  const ItemSeparator = () => {
    return <View style={{ minHeight: 10 }} />;
  };

css

noDataText: {
    textAlign: 'center',
    marginTop: 20,
    fontSize: 16,
    color: '#888',
  },
loader: {
marginTop: 20,
  },
heading: {
fontWeight: '700',
fontSize: 16,
color: '#000',
  },
  subheading: {
fontWeight: '400',
fontSize: 14,
  },

Card renderItem

const Item = ({ item }) => {
    let image;
    try {
      image = JSON.parse(item.images);
    } catch (error) {
      console.error("Error parsing images:", error);
      image = [];
    }

    return (
      <Card style={styles.card}>
        {image.length > 0 && <Card.Cover source={{ uri: image[0] }} />}
        <Card.Title title={item.name} />
        <Card.Content>
          <Text style={styles.heading}>
            name <Text style={styles.subheading}>{item.name}</Text>
          </Text>
        </Card.Content>
      </Card>
    );
  };

Upvotes: 0

Bobbysteel
Bobbysteel

Reputation: 31

const DATA = [
 <MyComponent />,
 <MyOtherComponent />,
 <Etc />,
 <Etc />,
]

 const ListItem = ({ item }) => {
   return <View> {item} </View>
  }

<View>
  <FlatList
    data={DATA}
    keyExtractor={(item, index) => String(index)}
    renderItem={ListItem}
  />
</View>

Upvotes: 3

BloodyMonkey
BloodyMonkey

Reputation: 1634

Don't understand why you're trying to do with your components.

To use Flatlist, you need to pass data and THEN use your components.

Learn more here https://reactnative.dev/docs/flatlist

Example

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
import DateOfBirth, Name, ProfilePicture from ‘./components’
    
const DATA = [
    {
        name: "Jhon Doe",
        dateOfBirth: "01/01/1980",
        profilePicture: "https://url.com/profile.jpg"
    },
    {
        name: "Jane Doe",
        dateOfBirth: "02/01/1980",
        profilePicture: "https://url.com/profile2.jpg"
    }
];

const App = () => {
    function renderClient ({client}){
        return(
            <View key={client.index}>
                <Name name={client.item.name} />
            </View>
        )
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderClient}
            />
        </SafeAreaView>
        );
    }
}

Upvotes: 0

Jahnavi Sananse
Jahnavi Sananse

Reputation: 118

import React from 'react';
import {View,Text,StyleSheet,FlatList} from 'react-native';
const Demo = () => {
  let ary = [
  {
     id:1,
     name:'jahnavi',
  },
   {
     id:2,
     name:'yash',
  },
   {
     id:3,
     name:'aniket',
  }],
  


  return (
    <SafeAreaView style={styles.container}>
      <FlatList
       keyExtractor={item => item.id}
        data={ary}
        renderItem={({item}) => (<Item title={item.name}/>
        );
  }
       
      />
    </SafeAreaView>
  );
};
export default Demo;

Upvotes: 2

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

You also need to set the renderItem prop. Style the <Item /> component to meet your requirement.

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

Upvotes: 0

Related Questions