We Keep Coding

How to keep button at the bottom of flatlist while scrolling to the end in React Native?

const Screen = () => {
return (
<View style={styles.container}>
<Text style={styles.heading}>Screen Data</Text>
<View>
<FlatList
data={data}
renderItem={({item}) => (
<View>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
)}
ListFooterComponent={() => <Buttons text={''} onPress={undefined} />}
/>
</View>
</View>
);
};
export default Screen;
I have created a Button component which always come at the end of flatlist which is scrollable but it gets overlap I want it to keep at end of content.

List footer component is made for that it can be any component, check docs https://reactnative.dev/docs/flatlist#listfootercomponent.

undefined is not a function (near '...this.state.results.map...')

I'm new at react native.I have a problem that i've been dealing for a few days.I want to show my data with map.Can you guys show me where i did wrong?
(I think i made mistake in the results inside scrollview)
class Movie extends Component{
state= {
apiurl:'http://www.omdbapi.com/.............................',
s:'',
results: [],
selected:{}
}
searchFunc(s) {
this.setState({s: s})
axios(this.state.apiurl+ "&s="+s).then(response =>
this.setState({results: response.data.Search[0]}));
console.log(this.state.results)
}
render() {
return(
<View style={{flex:1,backgroundColor:'#356292'}}>
<View
style={styles.sectionContainer}>
<View style={styles.section}>
<TextInput style={styles.section2}
onChangeText = {(s) => this.searchFunc({s})}
value={this.state.s}
placeholder="Movies,Series.."
>
</TextInput>
<TouchableOpacity
style={{justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.searchFunc()}>
<Image
source ={require('../img/seach.png')}
style={{width:width*0.05,height:height*0.03}}
>
</Image>
</TouchableOpacity>
</View>
</View>
<ScrollView style={styles.scroll}>
{this.state.results.map(results=>(
<View key={this.state.results.imdbID}
style={styles.scroll2}>
<Image source={{uri: this.state.results}}
style={{width:width*0.3, height:height*0.4}}>
</Image>
<Text style={styles.heading}>
{this.state.results.Title}
</Text>
</View>
))}
</ScrollView>
</View>
);
}

From the comments from your original post, i'm guessing response.data.Search[0] is also an array. If so your results state update is okay. Otherwise you should set the results state to response.data.Search.
Other problem I noticed in your code is in the map function, you are mapping the array with each item refering to the result variable, but in your jsx, you are trying to access the results state variable. It should be
<ScrollView style={styles.scroll}>
{
this.state.results.map(result => (
<View
key={result.imdbID}
style={styles.scroll2}
>
<Image
source={{uri: result.image}} // use correct key from result object
style={{width:width*0.3, height:height*0.4}}
/>
<Text style={styles.heading}>{result.Title}</Text>
</View>
))
}
</ScrollView>
Also in your Textinput onChangeText callback function, you dont have to pass that value as an object. You can change it to
<TextInput
style={styles.section2}
onChangeText={(s) => this.searchFunc(s)}
value={this.state.s}
placeholder="Movies,Series.."
/>

I quess you are supposed to pass Search to the state and not the Search[0], which is the object and not map, the reason map function is not working on it.
axios(this.state.apiurl+ "&s="+s).then(response =>
this.setState({results: response.data.Search}));
console.log(this.state.results)
Coincidently, I have created an app using same movie API, you can find it here: Github Repo, Movie App

Flatlist Item Not Clickable Inside Modal

In my react native app I have a modal
Inside this Modal I have a FlatList
<Modal animationType="slide" transparent={false} visible={this.state.typeVisible}>
<View style={styles.modalView}>
<View style={styles.modal_header}>
<Text style={styles.modal_header_text}>Select Type</Text>
<Ionicons name="ios-close" size={48} style={styles.modal_header_close} onPress={this.toggleType} />
</View>
<View style={styles.modal_list_container}>
<FlatList
keyExtractor={item => item.key}
data={[{ key: "Call Out" }, { key: "Call" }, { key: "Delivery" }, { key: "Dealt By Caller" }]}
renderItem={({ item }) => (
//this.handleType(item.key)
<TouchableWithoutFeedback
onPress={() => alert("Working!!") }
>
<View>
<Text style={styles.modal_list_item}>{item.key}</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
</View>
</Modal>
On IOS each of the items in the FlatList are clickable and the onPress will trigger the "Working!!" alert.
However the onPress is not working on Android. If I take the Flatlist outside the Modal the onPress will trigger the alert fine.
Can anyone tell me what I might be doing wrong in trying to get it working inside the Modal on Android?
Ps: I have also tried TouchableOpacity in place of TouchableWithoutFeedback but to no avail
Thanks

I assume you are importing TouchableOpacity (TouchableWithoutFeedback) from "react-native-gesture-handler"
I don't know why, but you need to import it from "react-native"
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
Hope that would help

I cannot figure out how to make ListView work properly

I am trying to render a list in React Native, however, nothing ever shows. I am logging the list before render as well and it is showing that the data field is being populated, but nothing is being shown.
This is the ListView code that I am trying that is NOT working.
This is the way that I am currently rendering the list. This method is working for me.
The reason that I want to use ListView instead of the current method that I am using is because I was reading from the documentation that ListView has better properties and performance.
Thank you!

Try destructuring correctly your item in renderItem. I mean:
<FlatList
data={this.state.users}
renderItem={({item}) => {
return (
<View>
<Image source={{uri: item.image}} style={{width: 150, height: 150}} />
<Text>{item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>
Or, if you prefer to call it as info, define a function:
renderItem = (info) => {
return (
<View>
<Image source={{uri: info.image}} style={{width: 150, height: 150}} />
<Text>{info.login}</Text>
</View>
)
}
And call it like
<FlatList
data={this.state.users}
renderItem={({item}) => this.renderItem(item)}
keyExtractor={(user) => user.id}
/>
See more in the offical doc

You need to extract the item property from your data property in the FlatList
<FlatList
data={this.state.users}
renderItem={({item}) => {
return (
<View>
<Image source={{uri: item.image}} style={{width: 150, height: 150}} />
<Text>{item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>
Note {item} in the renderItem callback
Another example
<FlatList
data={this.state.users}
renderItem={(data) => {
return (
<View>
<Image source={{uri: data.item.image}} style={{width: 150, height: 150}} />
<Text>{data.item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>

React Native how to call onPress event?

Hello there i am working on a beginner project of mine with React Native and right now i am not able to handle onPress event.
Render:
_renderRow(feed) {
return (
<TouchableHighlight onPress={() => this._pressRow()}>
<View style={styles.container}>
<Image
source={{uri: feed.thumbnail}}
style={styles.thumbnail}/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{feed.title}</Text>
</View>
</View>
</TouchableHighlight>
);
}
And the onPress function
_pressRow() {
console.log('list item pressed')
}
Listview
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
style={styles.listView}/>
This is what i get as an error.
undefined is not a function (evaluating _this3._pressRow())
EDIT
Thanks to #Cherniv. I forgot to bind this with the renderRow function, changed my code like that and worked as intended:
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
style={styles.listView}/>

Is it not because you forgot the "_" before pressRow in method declaration ?