TouchableOpacity overwriting other buttons

TouchableOpacity overwriting other buttons - javascript

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},

Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},

Related

How to use the radio button for dynamic data in react native

I need to take a list of questions from a json file and dynamically allocate them to radio buttons with answer options.
The problem is that whenever I select an option, all the same options as the other questions are selected.
I'm using the "react-native paper / radio-button-group" lib
Any suggestion?
<ScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
<View >
{ questions.map(data =>(
<View key={data.key} style={{margin:10}}>
<Text style={{fontWeight:'bold'}}>
{data.quest}
</Text>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} >
<View style={styles.radioBtn}>
<Text>Sempre</Text>
<RadioButton value={1} />
</View>
<View style={styles.radioBtn}>
<Text>Na maioria das vezes</Text>
<RadioButton value={2} />
</View>
<View style={styles.radioBtn}>
<Text>Medianamente</Text>
<RadioButton value={3} />
</View>
<View style={styles.radioBtn}>
<Text>Poucas Vezes</Text>
<RadioButton value={4} />
</View>
<View style={styles.radioBtn}>
<Text>Nunca</Text>
<RadioButton value={5} />
</View>
</RadioButton.Group>
</View>
)) }
</View>
</ScrollView>

How to create a Button that Change Background Color onPress in react native?

How can i create a button/TouchableOpacity that change the background color of style={styles.view} ?
<View style={styles.view}>
{user &&
<>
<TouchableOpacity onPress={carregaUsuarioAnonimo}>
<Image
style={styles.avatar}
source={{ uri: user.picture }} />
</TouchableOpacity>
<Text style={styles.nome_usuario}>{user.name}</Text>
</>
}
<ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
{
mensagens.length > 0 && mensagens.map(item => (
<View key={item.id} style={styles.linha_conversa}>
<Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
<View style={{ flexDirection: 'column', marginTop: 5 }}>
<Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
{typeof (item.mensagem) == "string" ?
<Text>{item.mensagem}</Text>
:
<Text> </Text>
}
</View>
</View>
))
}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.input_mensagem}
onChangeText={text => setCaixaTexto(text)}
value={caixaTexto} />
<TouchableOpacity onPress={salvar}>
<Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />
</TouchableOpacity>
</View>
</View>)

you can make a condition inside the style, like that:
create a boolean inside your state and change it value to true when the button is clicked.
Inside your Touchable, drop the condition.
style={
this.state.buttonCliked ? styles.backgroundBlue :
styles.backgroundGreen
}
I hope it helps you.

This is an example:-
state={isClicked:false}
checkToChangeStyle=()=>{
this.setState({isClicked:!this.state.isClicked})
}
return(
<TouchableOpacity onPress={this.checkToChangeStyle}
style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
<Text>Your Button</Text>
</TouchableOpacity>
)
const styles=StylesSheet.create({
backGround1:{backgroundColor:'green'},
backGround2:{backgroundColor:'red'},
})

How to display cards in two columns in React Native?

I have this code that makes cards but it only displays three cards and does not display the fourth card and it does not display cards in 2 columns.
Is there any way to change a code a bit so that it can display cards in 2 columns and display all cards? I have tried squeaking the code by changing Stylesheet.create with different options but due to lack of knowledge and experience, I cannot implement it.
import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '#expo/vector-icons';
class App extends React.Component{
render(){
return(
<ScrollView>
<View style = {styles.container}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</ScrollView>
)
}
}
export default App;
const styles = StyleSheet.create({
container:{
flexDirection: 'row',
alignContent:'stretch',
},
item:{
width: '50%'
}
})

You can use flatlist instead.
Code:
<FlatList style={{margin:5}}
data={this.state.items}
numColumns={2} <-- you can change number of columns by changing this value
keyExtractor={(item, index) => item.id }
renderItem={(item) =>
<Card /> <-- render your card component here
}
/>

container:{
flexDirection: 'row',
flexWrap: 'wrap',
},

Simplest way is to divide it in 2 views if you have limited/fixed number of cards
<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<Card1 style={{flex:1}}/>
<Card2 style={{flex:1}}/>
</View>
<View style={{flexDirection: 'row'}}>
<Card3 style={{flex:1}}/>
<Card4 style={{flex:1}}/>
</View>
<View>

You need to wrap your Card in two View parts
Changed code
<View style = {styles.container}>
<View style ={styles.item}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
<View style ={styles.item}>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</View>

How can set menu size fixed in react native?

I am setting option menu when click on icon,but it show menu sizes different rather than same. I am setting this menu as flat list item, and using react-native-popup-menu library, and any other way to display menu.I want to use menu options with fixed height and width of each of them.
Here is my code :-
_renderItem = ({item}) => {
return(
<TouchableOpacity onPress={() => this.handleListItemPress(item)}>
<View >
<View >
<View style={{flexDirection:'row',marginBottom:2}}>
<ImageView
image={item.pictures[0]}
style={[{marginRight:2},styles.imageStyle]}
/>
<ImageView
image={item.pictures[1]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
<View style={{flexDirection:'row',marginTop:2}}>
<ImageView
style={[{marginRight:2},styles.imageStyle]}
image={item.pictures[2]}
/>
<ImageView
image={item.pictures[3]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
</View>
<View>
<TextViewNonClickable
textViewText={item.name}
/>
<TextViewNonClickable
textViewText={item.description}
/>
</View>
<MenuProvider>
<Menu style={{position:'absolute',top:8,right:8}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions >
<MenuOption >
<Text >edit</Text>
</MenuOption>
<MenuOption>
<Text >delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
</View>
</TouchableOpacity>
)
}

Please pass customStyles as a prop to MenuOptions and MenuOption.
<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>

I have done it,but i could not show menus overs the text
and here is my new code :-
<MenuProvider>
<Menu style={{position:'absolute',top:0,right:0}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions optionsContainerStyle=
{{paddingLeft:8,height:96,width:100}}>
<MenuOption customStyles={{height:48,width:100}}>
<Text
style={{fontWeight:'bold',paddingTop:8}}
onPress={() =>
this.openAddOrUpdateModal('update',item)}
>edit</Text>
</MenuOption>
<MenuOption customStyles={{height:48,width:100}}>
<Text style=
{{fontWeight:'bold',paddingTop:8}}>delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>

TouchableOpacity doesnt work at all - react native

this is my code:
<TouchableOpacity style={{height:100,width:'100%'}} onPress={()=>this.aba()}>
<Text style={{position:'absolute',top:0,right:0,marginTop:10,marginRight:10,fontSize:18}}>total</Text>
<Text style={{position:'absolute',top:0,left:0,marginTop:10,marginLeft:10,fontSize:18,color:'#7fbe41'}}>100$</Text>
<View style={{bottom:0,position:'absolute',width:'100%',padding:10}}>
<Button success style={{alignSelf:'center',width:'100%',justifyContent:'center',}}>
<Text style={{textAlign:'center',color:'#fff',fontSize:18,zIndex:10,width:'100%',height:'100%'}}>continue</Text>
</Button>
</View>
</TouchableOpacity>
aba(){
console.log("masoud")
}
constructor(props) {
super(props);
this.state = {};
this.goTo = this.goTo.bind(this)
this.aba = this.aba.bind(this)
}
updated
all codes:
return (
<View style={{width:'100%',height:'100%'}}>
<Card style={{position:'absolute',bottom:0,height:100,width:'100%',marginBottom:0,marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0}}>
<CardItem style={{height:100,width:'100%',paddingLeft:0,paddingRight:0}}>
<TouchableOpacity style={{height:100,width:'100%'}} onPress={()=>this.aba()}>
<Text style={{position:'absolute',top:0,right:0,marginTop:10,marginRight:10,fontSize:18}}>مبلغ کل</Text>
<Text style={{position:'absolute',top:0,left:0,marginTop:10,marginLeft:10,fontSize:18,color:'#7fbe41'}}>۱۰۰۰ تومان</Text>
<View style={{bottom:0,position:'absolute',width:'100%',padding:10}}>
<Button success style={{alignSelf:'center',width:'100%',justifyContent:'center',}}>
<Text style={{textAlign:'center',color:'#fff',fontSize:18,zIndex:10,width:'100%',height:'100%'}}>ادامه</Text>
</Button>
</View>
</TouchableOpacity>
</CardItem>
</Card>
<ScrollView>
<Card style={{marginTop:10,marginRight:10,marginLeft:10,height:100,}}>
<CardItem style={{width:'100%',height:'100%',paddingTop:0,paddingBottom:0}}>
<Image resizeMode='stretch' style={{width:80,height:80,position:'absolute',right:0,top:0,marginRight:10,marginTop:10}} source={{uri: 'https://javacupcake.com/wp-content/uploads/2017/07/IceCreamConeCupcakes_0307.jpg'}} />
<Text style={{position:'absolute',top:0,right:0,marginTop:14,marginRight:100,fontWeight:'bold',fontSize:18}}>صندلی</Text>
<Text style={{position:'absolute',bottom:0,right:0,marginBottom:20,marginRight:100,fontWeight:'bold',color:"#ddd"}}>فروشگاه راد آراد</Text>
<View style={{width:40,position:'absolute',left:0,height:'100%'}}>
<View style={{height:'50%',width:'100%',backgroundColor:'#fa767b',alignItems:'center',justifyContent:'center'}}>
<Icon name="close" type="EvilIcons" style={{color:'#fff',alignSelf:'center',fontSize:20,paddingLeft:6}}/>
</View>
<View style={{height:'50%',width:'100%',backgroundColor:'#f5f5f5',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
<Text>۱</Text>
<Text>عدد</Text>
</View>
</View>
<Text style={{position:'absolute',left:0,top:0,marginTop:20,marginLeft:50,color:'#7fbe41'}}>۳۰۰.۰۰۰.۰۰۰ تومان</Text>
<Text style={{textDecorationLine: 'line-through',position:'absolute',left:0,top:0,marginTop:40,marginLeft:50,color:'#fa767b'}}>۳۰۰.۰۰۰.۰۰۰ تومان</Text>
</CardItem>
</Card>
</ScrollView>
</View>
);

Develop Reference

JavaScript is the programming language of the Web.

TouchableOpacity overwriting other buttons - javascript

Related

How to use the radio button for dynamic data in react native

How to create a Button that Change Background Color onPress in react native?

How to display cards in two columns in React Native?

How can set menu size fixed in react native?

TouchableOpacity doesnt work at all - react native

Categories

Resources