I have this below code, The alert shows following message:
{"item":{"isPositive":"false", "balance":"-500","currency":"AUD"}}
If I do alert on "ob" I get undefined. My problem is that the Text doesn't display anything:
_renderItemView(item) {
const ob = item
//alert(JSON.stringify(ob))
alert(JSON.stringify(item))
return(<>
<View style={styles.rowContainer}>
<View style={styles.iconContainer}></View>
<View style={styles.descriptionContainer}>
<Text style={styles.subText}>{item.date}asasas</Text>
{/* <Text style={styles.transactionDescText}>{item.description}</Text>
<Text style={styles.subText}>{item.descFrom}</Text> */}
</View>
<View style={styles.balanceContainer}>
{/* <Text style={styles.balance}>{item.currency}</Text>
<Text style={styles.balanceSubText}>{item.balance}</Text> */}
</View>
</View>
</>)
}
I was using renderItem={(item, index) => _renderItemView(item) to render
I needed an extra brace like this
renderItem={({item, index}) =>
TouchableOpacity requires us to click two times in IOS 12.2. These issues were not in previous IOS 12.1 version.
Whenever clicking on TouchableOpacity it seems to register click but do not fire onPress event. This issue is occuring in react-native version 0.52. This issue only occurs in IOS and not in android.
Code Snippet
<FlatList
scrollEnabled={false}
data={this.props.menuData[this.props.toutIndex].Menu}
keyExtractor={(data, index) => index}
renderItem={({ item , index}) => {
//alert(categoryLinks.menu_id+""+data.menu_id);
//alert(JSON.stringify(data));
return (
<TouchableOpacity onPress={()=>this.itemDetailsPage(item)} >
<View>
<CardItem onPress={()=>this.itemDetailsPage(item)} style={[styles.menuSubCategoryCardItem, {marginLeft:0, borderLeftWidth: 6, borderLeftColor: item.itemCount ? '#00CDBE' : '#FFFFFF'}]}>
<View style={{flex:2,marginLeft:"0%"}}>
<View style={styles.menuItemImageOuterContainer}>
<View style={styles.menuItemImageInnerContainer}>
<ImageLoad
style={styles.menuItemImage}
isShowActivity={false}
borderRadius={10}
source={{ uri: item.menu_photo }}
/>
{item.ratable == 'true' ?
<View style={[styles.menuItemRatingImage,{backgroundColor:item.overall_rating==0 ? 'rgb(166,166,166)' : item.rating_color}]}>
<Text style={styles.menuItemRatingImageText}>{ item.overall_rating>0 ? parseFloat(item.overall_rating).toFixed(this.state.rating_decimal_places) : "-" }</Text>
</View>
:null}
</View>
<View style={styles.menuItemNameContainer}>
<View style={{width:'100%',}}>
<Text numberOfLines={2} style={[styles.textHeadingMenuItem,{fontSize: item.menu_name.length>50 ? 53/3.82 : 63/3.82,paddingLeft:"2%"}]}>
{this.Capitalize(item.menu_name)}
</Text>
</View>
<View style={{width:'130%',}}>
<Text numberOfLines={3} note style={[styles.textMenuItem,{paddingLeft:"2%"}]}>
{item.menu_description}
</Text>
</View>
{
item.friend_review_count > 0 ?
<View style={{flexDirection:'row',marginLeft:"2%",alignItems:'center'}}>
<Image style={styles.userIconBelowMenuItemText} source={require("../../../assets/home/blueUser.png")}>
</Image>
<Text numberOfLines={1} style={styles.MenuItemFriendsRatedText}>
{item.friend_review_count} friends have rated this.
</Text>
</View>
:
null
}
</View>
</View>
</View>
<Right>
<View style={styles.menuItemPriceOuterContainer}>
<Text style={[styles.textHeadingMenuItemPrice,{paddingTop:"5%"}]}>
{this.state.currency} {CommonFunc.numberWithCommas(
parseInt(item.menu_price)
.toFixed(categoryLinks.state.decimal_places)
)
}
</Text>
</View>
<View style={styles.menuItemPlusButtonContainer}>
{ item.itemCount == undefined || item.itemCount == 0?
<TouchableOpacity style={styles.menuItemPlusButton}
onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
rejectResponderTermination
>
<Image style={[styles.menuItemPlusButtonImage,{resizeMethod:'resize'}]} source={require("../../../assets/order/Add.png")} />
</TouchableOpacity>
:
<View style={styles.menuItemSelectorContainer}>
<Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, -1)} style={{paddingVertical:10, paddingLeft:2}}>
<Image source={require('../../../assets/order/decrease.png')}
style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
</Button>
<Button transparent>
<Text style={styles.menuItemSelectorCountText}>
{item.itemCount}
</Text>
</Button>
<Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
style={{paddingVertical:10, paddingRight:2}}
>
<Image source={require('../../../assets/order/increase.png')}
style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
</Button>
</View>
}
</View>
</Right>
</CardItem>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
}
use
keyboardShouldPersistTaps='always'
on parent components to the TouchableOpacity inorder for child touchables to persist the taps.
for eg1
<Flatlist keyboardShouldPersistTaps='always'>
<TouchableOpacity/>
</Flatlist>
eg2:
<TouchableOpacity keyboardShouldPersistTaps='always'>
<TouchableOpacity></TouchableOpacity>
</TouchableOpacity>
This, most probably, is a conflict between react components. While updating to latest react might do the trick, but I would advice you to try and remove each and every component and see if it works.
Are you using PanResponder by any chance? This could also create a conflict. Thanks and good luck.
Try react-native 0.55.4 its a stable version and i mostely use in my personal projects.
and try to wrap your image inside a View like this\
<TouchableOpacity>
<View>
<Image />
</View>
</TouchableOpacity>
You have 2 onPress nested functions, in <TouchableOpacity> and <Card>, which both are calling the same item, delete onPress function of <Card> component and it will mostly work
I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}
Normally the height of a FlatList is set by wrapping a around it.
This doesn't appear to work if I put it inside a modal component of react native.
Is there any other way to set the height for a FlatList?
<Modal
visible={visible}
transparent={true}
animationType='slide'
>
<View style={middleInnerContainer}>
<FlatList
data={this.props.vegetablesBenefit}
renderItem={modalBenefitItem}
keyExtractor={(item) => item.key}
scrollEnabled
/>
</View>
</Modal>
I've simplified this code to the basic structure I am using.
It works perfectly fine outside of a modal.
Can you be more specific? If you want a list inside a popup you can simply use the following code I wrote for creating a generic dialog popup!
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<Modal
visible={this.state.showDialog}
transparent={true}
onRequestClose={() => this.closeDialog()}
animationType='slide'>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<View style={styles.parentContainer}>
<View style={styles.childContainer}>
<View style={styles.viewContainer}>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => { }}>
<View>
<Text style={styles.headerStyle}>{this.props.headerTitle}
</Text>
</View>
</TouchableWithoutFeedback>
{this.renderListComponent()}
</View>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
Handles the touch outside as well. Let me know if this completes your requirement.
I'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!