We Keep Coding

REACT NATIVE: How to get value of TextInput

I want to get value of TextInput and Picker and insert it into my Flatlist. The ways that i did i can just insert value of TextInput, but without Picker,
or i did with Picker but couldnot get value of TextInput.
Here is my code:
These are UseState
<FlatList
data={data}
renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
keyExtractor={(item, index) => index.toString()}
/>

You forgot to add the value of textInput while adding the data to flatlist.
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
// You forgot to add the value of textInput to the data
if (selectedValue && text) setData([...data, { name: selectedValue, textInput: text }]);
console.log("sec");
}}
/>
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name}</Text>
// Displaying the data of textInput
<Text style={styles.item}>{item.textInput}</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>

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 />;
}}
/>

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

React Native's FlatList prop renderItem requires extra "item" (item) => {item.item.name}?

Here I am trying to display an array called "posts" in a FlatList.
render() {
console.log(this.props.posts);
return (
<View style={this.styles.container}>
<FlatList
data={this.props.posts}
renderItem={(item) => <Text> {item.name} </Text>}
/>
</View>
);
}
As seen in this console log, the posts array is correctly populated.
But the above code doesn't display any data in the FlatList.
However, in renderItem, if I add an extra "item" property it works.
renderItem={(item) => <Text> {item.item.name} </Text>}
What is the reason for this behavior.

Input of ReactNative's FlatList is not item, but an object containing 3 parameters: item for actual data, index for index and separators object to customize your item component. What you did is naming that object item, and get actual item from the object.
To avoid confusion, consider using ES6 shorthand:
renderItem={({ item, index }) => <Text> {item.name} </Text>}

This is a common behavior. You can get required behavior by doing object destructuring as:
<FlatList
data={this.props.posts}
renderItem={({item}) => <Text> {item.name} </Text>}
/>
If you are rendering complex component, then you might want to do like this for sake of readability of the code however.
<FlatList
data={this.props.posts}
renderItem={this.renderItem} />
renderItem = ({item}) => {
return (
<Text>{item.name}</Text>
)
}
Might wanna look into your question here though.
ReactNative Flatlist - RenderItem not working

react native flatlist with several arrays of data

I'M new to RN and need some help
I have an object like
{title:"title",price:"price",subtitle:"subtitle"}
And I'd like to use 2 values at flatlist, like here -
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
/>
)}
/>
</List>
But in this example wasn't show structure of data so I'm confused what should I do. Please help me to solve it!
At the end (render) I need a ListItem this view -
(title) (price)
Or I should better use native-base, but the same questions about 2 value, passing to list item

You have to pass an array into the data property, then you can do:
<FlatList
data={this.state.data}
renderItem={({ item }) => ( //this part will iterate over every item in the array and return a listItem
<ListItem
key={item.id}
title={item.title}
price={item.price}
/>
)}
/>
</List>