I have two buttons which i'm trying to render in a flatlist so that it iterates and displays multiple times as a list. How should i do it?
<FlatList
data={this.state.data}
extraData={this.state}
renderItem={this.renderItem}
keyExtractor={items => items.id}
/>
<TouchableOpacity onPress={this.onPressButtonPlay.bind(this)}>
<Text style={styles.buttonText}> </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onPressButtonPause.bind(this)}>
<Text style={styles.buttonText}>{this.state.pause ? 'Resume' : 'Pause'}</Text>
</TouchableOpacity>
Just simply insert it within your renderItem function:
renderItem = ({item}) => {
return(
<TouchableWithoutFeedback>
<TouchableOpacity>
{this.renderButton()}
</TouchableOpacity>
<TouchableWithoutFeedback>
);
}
Related
So whenever i try put any images in flatlist or data.map to display the images its not working , it works fine with emulator but when i make build it doesnt show images
'the code is :
{this.state.symptoms_second.map((row, index) => (
<View>
<TouchableOpacity
activeOpacity={1}
onPress={() => this.symptoms_doctor_list(row.id)}>
<View style={styles.home_style26}>
<Image
style={styles.home_style27}
source={{uri: img_url + row.service_image}}
/>
</View>
</TouchableOpacity>
{/* </Card> */}
<Text style={styles.home_style28}>{row.service_name}</Text>
</View>
))}
flatlist code
<FlatList
horizontal={true}
data={this.state.symptoms_first}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => (
<View>
<TouchableOpacity
activeOpacity={1}
style={{margin: 2}}
onPress={() =>
this.symptoms_doctor_list(item.name)
}>
<View style={styles.home_style20}>
<Image
style={styles.home_style21}
source={{uri: item.image}}
/>
</View>
</TouchableOpacity>
<Text style={styles.home_style22}>{item.name}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
it does load the api content of text but not images and images do have style property for height and width... also images are not loading in general case when the image is passed through uri
How to use if condition in flatlist of react native . I am creating a social app in react native so I created a screen in which I render all users by using flatlist so i just want that whenever status with that user is zero which mean he is no longer friend of that user then my button in flatlist should be 'add friend' else it should be 'unfriend'. or in simpler words when item.status===0 then add friend button display else unfriend button display .My flatlist is like that.
<FlatList
data={this.state.user}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return (
<View>
<View style={{ flexDirection: 'row', marginTop: 10, }}>
<Image style={{...}} source={{ uri: '' }} />
<View>
<Text style={{..}}>{item.full_name}</Text>
<View>
//if item.status==0 below code works
<View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>{item.status = 0 }Add Friend</Text>
</TouchableOpacity>
</View>
<View style={styles.space} />
<View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
)
}}
/>
You could write something like:
<FlatList
data={this.state.user}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return (
<View>
<View style={{ flexDirection: 'row', marginTop: 10, }}>
<Image style={{...}} source={{ uri: '' }} />
<View>
<Text style={{..}}>{item.full_name}</Text>
<View>
{item.status === 0 && <View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>Add Friend</Text>
</TouchableOpacity>
</View>}
<View style={styles.space} />
{item.status !== 0 && <View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>}
</View>
</View>
</View>
</View>
)
}}
/>
This is how you can conditional render button based on item.status value.
Explanation: if you want to conditional render something (button, div...) in React you have to embrake html component into {} bracket and then add boolean condition.
So in your case:
{item.status === 0 && //<-- this html will be rendered only if item.status is equal to 0
<View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>Add Friend</Text>
</TouchableOpacity>
</View>}
{item.status !== 0 && //<-- this html will be rendered only if item.status is different from 0
<View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>}
You can do it this way:
{item.status === 0 && (
// ... code to render
)}
How can I use nth child in react native? I need to nth-child(3) to add First View.
<ListView
dataSource={this.state.dataSource}
renderRow={ (rowData)=>
<TouchableOpacity activeOpacity={0.5} onPress={() => {...}>
<View style={{...'}}>
<View style={{...}}>
<Text style={{...'}}>{rowData.name}</Text>
</View>
</View>
</TouchableOpacity>
}
/>
This is my listView and I need add marginBottom to First View(nth-child(3)).
You can do this using the count of index, renderRow gives the index in rowID
For ex:
<ListView
dataSource={this.state.dataSource}
renderRow={ (rowData, sectionID, rowID, higlightRow)=>
<TouchableOpacity activeOpacity={0.5} onPress={() => {...}>
<View style={[rowID === 3 && {...nth-child(3)Styles}, {...otherStyles}]}>
<View style={{...}}>
<Text style={{...'}}>{rowData.name}</Text>
</View>
</View>
</TouchableOpacity>
}
/>
Let me know if this helps.
Working example: https://snack.expo.io/rkC_FUEUV
My FlatList triggers onendreached not as expected. onEndReached gets called again and again. I have read some suggestion to wrap flatlist in a view with flex:1 but I still doesn't work properly. Also removing the scrollView didn't work-
This didn't help https://github.com/GeekyAnts/NativeBase/issues/1736#issuecomment-401815949
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>
If it is loading or error you can try to use onEndReached={this.state.isLoading ? () => {} : this._onEndReached}; just let onEndReached do nothing when the state is loading. I've tried serveral way (debounce, await setState, using flag) but only this way work as expected.
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this.state.isLoading ? () => {} : this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>
I have the following flatlist render method that upon tapping on a list item, it will call the this._onPress method:
render() {
return (
<TouchableOpacity onPress={this._onPress} >
<View style={styles.bookItem} >
<Image style={styles.cover} source={{uri:this.props.coverURL}}/>
<View style={styles.info} >
<Text style={styles.title}>{this.props.title} </Text>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={{height: 8}}/>
</View>
<View style={styles.rightIcon}>
<Icon name="chevron-right" size={28} color={'#AAAAAA'} />
</View>
</View>
</TouchableOpacity>
);
}
After I added the swipeout tag in the following code, the swipeout works but tapping on an item no longer calls the this._onPress method:
render() {
// Buttons
var swipeoutBtns = [
{
text: 'Delete',
onPress: this._buttonPress
}
]
return (
<TouchableOpacity onPress={this._onPress} >
<Swipeout right={swipeoutBtns} >
<View style={styles.bookItem} >
<Image style={styles.cover} source={{uri:this.props.coverURL}}/>
<View style={styles.info} >
<Text style={styles.title}>{this.props.title} </Text>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={{height: 8}}/>
</View>
<View style={styles.rightIcon}>
<Icon name="chevron-right" size={28} color={'#AAAAAA'} />
</View>
</View>
</Swipeout>
</TouchableOpacity>
);
}
Is this a restriction of react-native-swipeout?
If you were to have Swipeout as the first tag and touchable as the next nested tag I think it would work. However, its seems to make the Swipeout functionality less responsive