Develop Reference

React Native Carousel UseState

I am currently implementing a carousel library (react-native-reanimated-carousel). The code for the following is represented as such:
<Carousel
width={cardWidth}
height={cardHeight}
data={cards}
onScrollEnd={() => {console.log('ended')}}
renderItem={({item}) =>
(
<View>
<Image
source={{uri: item["ImgURL"],}}
style={styles.card}
/>
</View>
)}
/>
Upon the carousel changing, the item value in the renderItem property changes. Is there a way to get the value of item from outside this element? I want other elements outside to change depending on the value (and properties) of item.

You could try to call a callback function in the renderItem function.
() => {
const [activeItem, setActiveItem] = useState(cards[0].item);
return (<Carousel
width={cardWidth}
height={cardHeight}
data={cards}
onScrollEnd={() => {console.log('ended')}}
renderItem={({item}) => {
setActiveItem(item);
return (
<View>
<Image
source={{uri: item["ImgURL"],}}
style={styles.card}
/>
</View>
);
}}
/>)
);
};
Or you could use onScrollEnd. It provides the previous index and the current index according to the documentation
() => {
const [activeItem, setActiveItem] = useState(cards[0].item);
return (<Carousel
width={cardWidth}
height={cardHeight}
data={cards}
onScrollEnd={(previous, current) => {
setActiveItem(cards[current].item);
console.log('ended')
}}
renderItem={({item}) => (
<View>
<Image
source={{uri: item["ImgURL"],}}
style={styles.card}
/>
</View>
)}
/>)
);
};
Or you could use the Ref prop getCurrentIndex

Displaying a Flatlist Data to Flatlist Props

im having an issue with passing my Flatlist data to my Flatlist props which is 'ListHeaderComponent'. here's my code:
<FlatList
ListHeaderComponent={
<View>
<Text>{}</Text>
</View>
}
data={displayedPhoto}
keyExtractor={(item) => item.id}
renderItem={renderPhotoItem}
numColumns={2}
/>
is there any possible to pass my Flatlist Data inside the Text Component? Help me please

ListHeaderComponent is a prop which use to render the component as Header of the FlatList which scrolls with the FlatList. ListHeaderComponent can't have the item of the FlatList. You can use like
renderHeader = () => {
return (
<View>
<Text>Employees</Text>
</View>
);
};
<FlatList
ListHeaderComponent={this.renderHeader}
data={displayedPhoto}
keyExtractor={(item) => item.id}
renderItem={renderPhotoItem}
numColumns={2}
/>

React Native: renderItem component to Custom FlatList as a prop? (like Vue slots)

I want to have a reusable FlatList component, basically a wrapper I can pass a custom component as an item to render, and I want to pass this component as props, this is easily done in vue..js with scoped/slots.
Is there a way to do this in react native?
<View style={{ flex:1 }}>
<FlatList style={{ width:'100%'}} data={props.data} keyExtractor={item => item.id.toString()}
renderItem={({ item, index }) =>
<PropComponent item={item}></PropComponent>}
/>
</View>
In example above PropComponent would be passed to CustomFlatList like this:
<CustomFlatList>
<PropComponent></PropComponent>
</CustomFlatList>
```

Use this way
// CustomFlatList.js
const { ...rest } = props;
<View style={{ flex:1 }}>
<FlatList
style={{ width:'100%'}}
data={props.data}
keyExtractor={item => item.id.toString()}
{...rest}
/>
</View>
Usage like
itemView = ({ item, index }) => {
return <PropComponent item={item} />
}
<CustomFlatList renderItem={itemView} />

Beginners Problem with ReactNative FlatList

I'm pretty new to react native and have an issue that my data is not showing up in my view.
I can retrieve it from my server and save it in the data array.
When I want to go through it and create a flatlist it doesn't show up and I don't know why.
The console.log output shows that I have data in my array and also displayList is true at that point in time. Any help why this happens ?
return (
<View style={styles.container}>
<Button title="Retrieve Data" onPress={fetchData} />
<Text>before</Text>
{console.log(
`Size of Data: ${data.length} and displayList: ${displayList}`
) &&
displayList &&
data &&
data.map((item, i) => (
<FlatList
data={data}
renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>}
keyExtractor={(item) => item}
/>
))}
<Text>after</Text>
<StatusBar style="auto" />
</View>
);
}

By mapping over the flat list you are creating a new list for each item of data which I doubt it what you want to do.
The internals of render item have the map function in for you.
I think what you're looking for is...
return (
<View style={styles.container}>
<Button title="Retrieve Data" onPress={fetchData} />
<Text>before</Text>
<FlatList
data={data}
renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>}
keyExtractor={(item) => item.id.toString()}
/>
))}
<Text>after</Text>
<StatusBar style="auto" />
</View>
);
If you want to render something else if theres no data then you can use the ListEmptyComponent prop on the flat list.
Im also not sure what your data array looks like. But this may also be an issue. If this doesn't work please update your question with the full component and data structure.

try this, Don't have to iterate through map, the item is already containing the object for respective index.
return (
<View style={styles.container}>
<Button title="Retrieve Data" onPress={fetchData} />
<Text>before</Text>
{data.lenght()>0? <FlatList
data={data}
renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>}
keyExtractor={(item) => item}
/>:<Text>No DATA FOUND<Text>}
<Text>after</Text>
<StatusBar style="auto" />
</View>
);

Function inside Flatlist RenderItem is not fully working

Problem is I cannot see {item.key} inside my function. When I type {item.key} itself inside flatlist render it is working. But inside function only {item.value} is showing. Can anyone explain to me why this happening ?
Sample Data
const orderResultJson = [
{
key: 'Скачайте приложение по ссылке',
value: 'https://google.com'
},
{
key: 'Логин',
value: '879854'
},
{
key: 'Пароль',
value: '849846'
},
];
My Function
function DetailsSection(item){
return(
<View>
<Text>{item.value}</Text>
<Text>{item.key}+test</Text>
</View>
)
}
Render
render() {
return (
<View style={styles.container}>
<FlatList
data={orderResultJson}
renderItem={({item}) => <DetailsSection {...item} />}
keyExtractor={item => item.key}
/>
</View>
);
}

Problem here is, when you are deconstructing item as individual props, the prop key will be considered as in built react prop key instead of considering it as an external prop.
So instead of deconstructing, pass item as is and access it from your function as it is.
My Function
function DetailsSection({ item }){
return(
<View>
<Text>{item.value}</Text>
<Text>{item.key}+test</Text>
</View>
)
}
Render
render() {
return (
<View style={styles.container}>
<FlatList
data={orderResultJson}
renderItem={({item}) => <DetailsSection item={item} />}
keyExtractor={item => item.key}
/>
</View>
);
}

function DetailsSection(props){
return(
<View>
<Text>{props.item.key} + test</Text>
<Text>{props.item.value}</Text>
</View>
)
}
Or
pass like this
<DetailsSection item={item} />
and access like this
function DetailsSection({ item }){
return(
<View>
<Text>{item.value}</Text>
<Text>{item.key}+test</Text>
</View>
)
}
because you are passing extracted value so directly you can access