How to display cards in two columns in React Native? - javascript

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>

Related

How to change border color of this circular Button on OnPress?

If I press on any of these Button it's border color should change and rest of should have no color.
Every time i press diffrent button only its border color should change and all other buttons should have no color.
Here is a Image of what I want:-
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
}}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="calendar-today" size={24} />
<Text>Day to day</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="alarm-light" size={24} />
<Text>Emergency</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="hammer-wrench" size={24} />
<Text>Planned Works</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Foundation name="clipboard-pencil" size={24} />
<Text>Survey</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.FontAwesome name="users" size={24} />
<Text>Meeting</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Entypo name="dots-three-horizontal" size={24} />
<Text>Others</Text>
</TouchableOpacity>
</View>

You can add a variable to your state which holds your pressed button. Let's say
index = 0
After that, each button click, you can update the state. Let's say
const [index, setIndex] = useState(0);
<Button onClick={() => setIndex(1)} />
<AnotherButton onClick={() => setIndex(2)} />
If you check the style of each button according to this index variable, you can add your border to your button.
<Button style={{ borderColor: index === 1 ? 'green' : 'black' }} />
<AnotherButton style={{ borderColor: index === 2 ? 'green' : 'black' }} />
You can try these steps to put a border to your buttons. I hope it works well

TouchableOpacity overwriting other buttons

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>
);
},

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'},
})

JSX expressions must have one parent element.ts(2657) react native

I am new to react native and have tried everything and keep getting the following error
JSX expressions must have one parent element.ts(2657)
I am trying to display information from json in a flatlist.
Here is my code.
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View>
<View style={{backgroundColor: '#808080'}}>
<Text style={styles.MainText}>Sermons</Text>
</View>
<FlatList style={{paddingTop: 30}}
data={ DATA }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={this._renderItem} />
</View>
);
}
_renderItem = ({item}) => {
return(
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
);
}
}
line 33 ); seems to be causing the problem but I don't know why.

You can't render adjacent elements. They must have some parent element or React.Fragment:
return(
<>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</>
);
<></> is short for <React.Fragment></React.Fragment>

You have 2 view components in return. You should have 1 parent component so you can wrap them into a react fragment.
return(
<>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</>
);

You need to add a container View:
_renderItem = ({item}) => {
return(
<View>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</View>
);
}

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>
);

Categories

Resources