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
Related
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
)}
I am new in react native and I need to show and hide for text input on each comment reply option.How to unique each and every section so I can hide and show text input for each button click.
Here is my flat list:
<FlatList
data={item.comments}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowItem}
extraData={this.state}
/>
Here is render row item:
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyboxShow ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
In the end of render item I am using reply button and on click I want to show and hide each text input fields:
This is design I need to implement.
My ShowHideTextComponentView function:
ShowHideTextComponentView = () =>{
if(this.state.replyboxShow == true){
this.setState({replyboxShow: false})
}else{
this.setState({replyboxShow: true})
}
}
With your replyboxShow state, all the item will be showing or hiding,
i create a replyboxShowId state to save the item_id of the element
you want to show.
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyBoxShowId === itemData.item._id ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
ShowHideTextComponentView:
ShowHideTextComponentView = (id) =>{
this.setState({
replyBoxShowId : id
})
}
I'm using TouchableOpacity for handling clicks.Everything is working fine in upper hierarchy views, but bellow two containers view is not clickable.I've set an alert when it's clicked for testing purposes.View bellow comment is not working and I think it's because of bad nesting.
Here is code :
return (
<View style={styles.container}>
<View style={styles.subContainer}>
<Text style={[styles.storyLikesAndShares, { marginRight: 17 }]}>
{this.state.likes} Likes
</Text>
<Text style={styles.storyLikesAndShares}>
{this.props.story.Shares ? this.props.story.Shares : 0} Shares
</Text>
</View>
<View style={[styles.subContainer, { paddingTop: 16 }]}>
<View style={styles.storyIconsContainer}>
<TouchableOpacity onPress={() => this.changeLikedState(this.props)}>
<Icon
style={[
this.props.story && this.state.isLiked
? styles.storyLikedIcon
: styles.storyNotLikedIcon,
{ marginRight: 24 }
]}
name={"heart"}
size={24}
/>
</TouchableOpacity>
<Icon style={styles.storyNotLikedIcon} name={"share"} size={24} />
//Code bellow is not working
<TouchableOpacity
onPress={() => alert('alertiiiing')}
>
{this.props.storyViewType === "feed" ? (
<Text
onPress={() => console.log('read more clicked')}
style={styles.storyReadMoreText}>Read Full Story...</Text>
) : (
<View />
)}
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
I'm trying to add the 3 littles dots on the right of a card to show more information on click but cannot find how this is called.
On android it is called ""overflow menu" but the only component using overflow I found is "toolbarAndroid". I cannot use it because i work on Android & IOS.
Did you know how to do this ?
Actually i'm using "react-native-elements" for the card but they don't provide this option.
Maybe i have to create a component for that
My actual code, not using "title" props of card because i don't want to display the divider line.
renderProject(project) {
const { id, name, description, species, images } = project;
return (
<Card containerStyle={thisstyles.cardContainerStyle} key={id}>
<View>
<Text style={thisstyles.projectName}>{name}</Text>
</View>
<View style={{marginLeft:15}}>
<Text style={{color:'mediumvioletred'}}>{description}</Text>
<Text>
{species} Espèces {images} Images
</Text>
</View>
</Card>
);
}
As you have used custom component just add Image to show triple dots.
<View>
<Text style={thisstyles.projectName}>{name}</Text>
<Image style={position: 'absolute', right: 0}
source={require('../../path/to/image')} />
</View>
In your given module react-native-elements,
<Card
title='HELLO WORLD'
image={require('../images/pic2.jpg')}> // you can play around with this
You can Crate Your component Like this without any image
import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';
import {Text,Header,CardItem} from 'native-base';
class CardExample extends Component{
_renderSearchResult(){
return(
<View>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
</View>
)
}
render(){
return(
<View style={styles.container}>
{this._renderSearchResult()}
</View>
)
}
}
const styles={
container:{
flex:1,
},
cardView:{
elevation:5,
marginTop:8,
},
locationRowContainer:{
flexDirection:'row',
marginTop:21,
},
addressContainer:{
flex:3,
justifyContent:'center',
alignItems:'flex-start'
},
locationText:{
fontSize:16,
color:'black'
},
circleDot:{
backgroundColor:'black',
height:6,
width:6,
borderRadius:6/2,
marginBottom:2,
},
mapLocationContainer:{
flex:1,
justifyContent:'center',
alignItems:'flex-end'
}
}
export default CardExample;
My problem so far, is following: I'm getting Tweets from Twitter Streaming API, so new data is appended to the bottom of the ListView, however the last item is not displayed in full, ie the last line of text (Text element), and there is no way I can scroll down to see that line.
My code for rendering ListView is:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <View style={{height: 515}}>
<ListView
ref='list'
onLayout={(event) => {
var layout = event.nativeEvent.layout;
this.setState({
listHeight : layout.height
});
}}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
console.log(rowData.text);
return (
<View>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</View>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderFooter={() => {
return (
<View onLayout={(event)=>{
var layout = event.nativeEvent.layout;
this.setState({
footerY : layout.y
});
}}>
</View>
);
}}
/>
</View>
}
</View>
);
}
And in the main render function (just in case this error caused by ScrollableTabView)
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar />}
ref={(tabView) => { this.tabView = tabView; }}
>
{this.renderTwitterSearch()}
{this.renderRealtimeSearch()}
{this.renderDBSearch()}
</ScrollableTabView>
);
}
}
You can simply add a style property with flex=1 on the root component of the listview.
<View style={{flex: 1}}>
<ListView
style={{paddingBottom: 5, marginBottom: 0}}
enableEmptySections
dataSource={this.state.albums}
renderRow={album => <AlbumDetail key={album.title}
album={album}/>}
/>
</View>
In case it may be the help to others, I'd post a solution: in order to make this piece of code work, I wrap ListView and its children into ScrollView element, so code would be as follow:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <ScrollView style={{height: 520}}>
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
return (
<ScrollView>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</ScrollView>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</ScrollView>
}
</View>
);
}