_______ is a component used to create scrollable container in React Native which is lazy loaded.
Question
_______ is a component used to create scrollable container in React Native which is lazy loaded.
Solution
The component used to create a scrollable container in React Native which is lazy loaded is called "FlatList".
Here are the steps to use it:
- First, you need to import FlatList from react-native in your file.
import { FlatList } from 'react-native';
- Then, you can use FlatList in your component. It takes two required props: data and renderItem.
datais an array of items to be rendered.renderItemis a function which returns a component to render for each item.
Here is an example:
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
-
FlatList also has an optional prop called
keyExtractor. This is used to uniquely identify each item in the list. If not provided, React Native will use index as a key. -
Another optional prop is
onEndReached. This is a function that gets called when the user has scrolled to the end of the list. This can be used to load more data. -
FlatList is lazy loaded, which means it only renders items that are currently visible. This makes it very efficient for large lists.
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.