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
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>
);
};
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>
);
}
}
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.