We Keep Coding

Flatlist navigation to another screen

So, i've one Flatlist that renders a list of movies, and I'm trying to when I click on it, moves me to a detail page, but it's not working.
Literally, nothing happens and doesn't get any errors on console
My FlatList:
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
onPress={() => navigation.navigate('Details')}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
My "renderitem" from flatlist:
const renderItem = ({ item }) => (
<RenderList url={item.poster_path} title={item.original_title} />
);
and that is the RenderList component who fits into the const "renderItem":
<View style={styles.view}>
<Image
style={{ width: 150, height: 220 }}
source={{ uri: 'https://image.tmdb.org/t/p/w500/' + props.url }}
/>
</View>

You should call onPress from a TouchableOpacity that loops for each item.
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
onPress={() => navigation.navigate('Details')}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('Details')}>
<RenderList url={item.poster_path} title={item.original_title} />
</TouchableOpacity>
);
}}
/>

You should have the onPress on each of the list item, not on the Flatlist
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
const renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('Details')}>
<RenderList url={item.poster_path} title={item.original_title} />
</TouchableOpacity>
);
}

How to add custom component inside an Flatlist in React Native?

I have a Flatlist on react native by which its working perfectly, recently saw an UI which has a custom designed compoenent in between the list, kindly check the below reference image
Check this image, a new design named "Safety+" has been added inside an list, How to do this ?
Need to add custom design like below randomly inside and already rendered flatlist ! How to achieve this , as i couldn't find or understand where to start
Please check the image and help in achieving this:
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({item}) => {
return(
<TouchableOpacity style={styles.busCardContainer}
onPress={() => {
console.log(item);
//this.props.navigation.navigate('SeatLayout')
}}
<Text>{item.name}</Text>
>)}}
/>
This is my flatlist code

You can return a fragment with your component and a randomly included component. The condition for inclusion is up to you, i.e. complete chance, every 5th element, etc.
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({item}) => {
return(
<Fragment>
<TouchableOpacity style={styles.busCardContainer}
onPress={() => {
console.log(item);
//this.props.navigation.navigate('SeatLayout')
}}
>
<Text>{item.name}</Text>
</TouchableOpacity>
{Math.random() < 0.5 && ( // example 50% chance to include random component
<RandomComponent>...</RandomComponent>
)}
</Fragment>
)}}
/>

You can render conditionally in your renderItem function: https://reactjs.org/docs/conditional-rendering.html
Additionally, if you want to render your custom component at specific indexes, you can also put index parameter into renderItem. Here is my example:
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return index % 5 === 0 ? <CustomComponent /> : <NormalComponent />;
}}
/>

React Native editable FlatList How to edit item data

React Native editable FlatList – How to edit item data in a List?
Hi code community, I am new in reactive native and I need some help. I am trying to handle a data update in FlatList. where the user can change the text name for whatever they want. Exemplo if the user creates a folder named "Bar" but later on decides to change the name for "Bar1". How can I do it??? Here is my code so far...
My Modal State
const [modalVisible, setModalVisible] = useState(false);
My FlatList Component... discard data={folderToDisplay}
<FlatList numColumns={4} data={folderToDisplay} renderItem={renderItem} />
My renderItem={renderItem} is set like this: where {itemData.item.value} is here I am fetching my text name. We can replace {itemData.item.value} to Bar if you wish.
const renderItem = (itemData) => {
return (
<View style={styles.folderNameContainer}>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
>
<Text style={styles.itemText}>{itemData.item.value}</Text>
</TouchableOpacity>
</View>
);
};
When I press the text name a Modal opens.
<Modal animationType="fade" transparent={true} visible={modalVisible}>
<SimpleModal
closeModal={onCloseModal}
/>
</Modal>
...And when I press cancel it close.
const onCloseModal = () => {
setModalVisible(false);
};
My SimpleModal component is set like this: I could make my code all in one place but it looks ugly.
const SimpleModal = (props) => {
return (
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Change Name!</Text>
<TextInput
style={styles.textInput}
placeholder="Type Here..."
maxLength={15}
/>
<View style={styles.saveAndCancelContainer}>
<View style={styles.button}>
<Button title="Save" color="#87CEEB" onPress={props.renameFolder} />
</View>
<View style={styles.button}>
<Button title="Cancel" color="red" onPress={props.closeModal} />
</View>
</View>
</View>
</View>
);
};
Now the goal here is in my TextInput the user type a new name and then press Save. When onPress it will update the name for the new name. and close the modal. So far this is what I have:
<Modal animationType="fade" transparent={true} visible={modalVisible}>
<SimpleModal
renameFolder={handleRenameFolder}
/>
</Modal>
const handleRenameFolder = () => {
///....????
setModalVisible(false);
};

Get value from multiple Switch in react native

I have multiple switch (around 40 to 70) in a component depending on the number of rows fetched from database. I am rendering each switch with every row in a flatlist (every item is assigned with a ID). In the end, I want to submit all the values and store them in database along with id and and it;s respective switch status (true / false).
I want to do it like a form in HTML where we get all the values of form after submitting the form.
This is the component where flatlist is rendered. I have removed unnecessary code because I am able to display the flat list without any error and warning.
const [stData, setStData] = useState([]);
useEffect(()=> {
// Here I am fetching data from server using axios
// setStData(fetchedData);
})
<View>
<FlatList
data={stData}
keyExtractor={(item) => item.registration_id}
renderItem={(stData) => (
<ListItem
name={stData.item.name}
registrationNo={stData.item.registration_id}
data={stData}
isPresent={stData.item.isPresent}
setData={setStData}
/>
)}
/>
This is ListItem component
<View>
<View>
<Text>{props.name}</Text>
<Text>{props.id}</Text>
</View>
<Switch
trackColor={{ true: "red" }}
thumbColor={"white"}
onValueChange={() =>
props.setData(
props.data.map((item) =>
item.registration_id === props.registrationNo
? { ...item, isPresent: !props.isPresent }
: item
)
)
}
value={props.isPresent}
/>
</View>
Update
Now whenever I am trying to toggle the switch button, TypeError: undefined is not a function (near '...props.data.map...') is occured.

While creating const [isPresent, setIsPresent] = useState(false); at child component, you make it a bit rough unnesserally for adding it afterwards to stData, consider store it there from the begging
// dummy data with { isPresent } at main obj
const [data, setData] = useState(stData.map(obj => {...obj, isPresent: false})
<View>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({item, id, isPresent}) => (
<ListItem
name={item}
id={id}
data={data}
setData={setData}
isPresent={isPresent}
/>
)}
/>
</View>
// child component
<View>
<View>
<Text>{props.name}</Text>
<Text>{props.id}</Text>
</View>
<Switch
trackColor={{ true: "red" }}
thumbColor={"white"}
onValueChange={() => props.setData(props.data.map(item => item.id == props.id ? { ...item, isPresent: !props.isPresent } : item)}
value={props.isPresent}
/>
</View>
EDIT
when you call renderItem={(stData) =>,
stData in scope of this renderItem isn't stData from state anymore, including at data={stData}
change it to
<FlatList
data={stData}
keyExtractor={(item) => item.registration_id}
renderItem={({item}) => (
<ListItem
name={item.name}
registrationNo={item.registration_id}
data={stData}
isPresent={item.isPresent}
setData={setStData}
/>
)}
/>
now data={stData}gonna evalute correctly, and data.map will be possible action

Using a ref in a FlatList in React Native

I am still having trouble understanding ref's in React Native (and React in general). I am using functional component. I have a FlatList that has many items. How do I create a reference for a thing within an item like a Text or View component?
<FlatList
data={data}
renderItem={({ item }} => {
<View>
... lots of other stuff here
<TouchableOpacity onPress={() => _editITem(item.id)}>
<Text ref={(a) => 'text' + item.id = a}>EDIT</Text>
</TouchableOpacity>
</View>
}
/>
Then in _editItem I want to reference the Text component so that I can change its text from 'EDIT' to 'EDITING', or even change its style, or whatever.
_editPost = id => {
console.log(text + id)
}
I have tried...
FeedComponent = () => {
let editPosts = {}
<FlatList
data={data}
renderItem={({ item }} => {
<View>
... lots of other stuff here
<TouchableOpacity onPress={() => _editITem(item.id)}>
<Text ref={(a) => editPosts[item.id] = a}>EDIT</Text>
</TouchableOpacity>
</View>
}
/>
...and a few other things, but I think I might be way off so I could use some guidance.

Typically you don't use refs in react to update content like text. Content should be rendered based on the current props and state of your component.
In the case you describe you'll probably want to set some state in the parent component that then impacts the rendering of the item.
As a sidenote refs are used if you need to trigger a method on a child component like calling focus on a TextInput for example but not for imperatively updating component content.
In your case you'll want to update some state representing the current active item. Something like:
import React, {useState} from 'react';
FeedComponent = () => {
const [activeItem, setActiveItem] = useState(null);
<FlatList
data={data}
renderItem={({ item }} => {
return (
<View>
... lots of other stuff here
<TouchableOpacity onPress={() => setActiveItem(item.id)}>
{activeItem === item.id
? <Text>EDITING</Text>
: <Text>EDIT</Text>
}
</TouchableOpacity>
</View>
);
}
extraData={activeItem}
/>