We Keep Coding

one Collapsible should open at one time

// Here in my code there are three Collapsibles, after clicking one it will expand, but to close it again i have to click on that particular text.
I would like to make a change: if any of the three Collapsibles are already open, and I click the new button, then the existing Collapsibles should close automatically.
{isSimUAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ simUpgrade: !this.state.simUpgrade });
}}>
<RegularText text="SIM Upgrade" textColor={this.state.simUpgrade?'#006288':'black'} style={{fontWeight:this.state.simUpgrade?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.simUpgrade}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'swap',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimCAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ lostSim: !this.state.lostSim });
}}>
<RegularText text="SIM Change" textColor={this.state.lostSim?'#006288':'black'} style={{fontWeight:this.state.lostSim?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.lostSim}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'lost',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimEAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ validator: !this.state.validator });
}}>
<RegularText text="E-validator" textColor={this.state.validator?'#006288':'black'} style={{fontWeight:this.state.validator?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.validator}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'validate',0)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
Thanks

You can use one common property for state instead of three different property, that single property can have different values in your case it can have 'simUpgrade', 'lostSim' and 'validator' i.e
this.state = {
active : 'simUpgrade'
}
And than in your code you can use it like this
{isSimUAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ active: 'simUpgrade' });
}}>
<RegularText text="SIM Upgrade" textColor={this.state.simUpgrade?'#006288':'black'} style={{fontWeight:this.state.simUpgrade?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={this.state.active !== 'simUpgrade'}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'swap',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimCAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ active: 'lostSim'});
}}>
<RegularText text="SIM Change" textColor={this.state.lostSim?'#006288':'black'} style={{fontWeight:this.state.lostSim?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={this.state.active !== 'lostSim'}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'lost',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimEAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ active: 'validator' });
}}>
<RegularText text="E-validator" textColor={this.state.validator?'#006288':'black'} style={{fontWeight:this.state.validator?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={this.state.active !== 'validator'}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'validate',0)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}

after clicking new Collapsible closed other Collapsible which is open

// Here in my code there are three Collapsibles, after clicking one it will expand, but to close it again i have to click on that particular text.
I would like to make a change: if any of the three Collapsibles are already open, and I click the new button, then the existing Collapsibles should close automatically.
{isSimUAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ simUpgrade: !this.state.simUpgrade });
}}>
<RegularText text="SIM Upgrade" textColor={this.state.simUpgrade?'#006288':'black'} style={{fontWeight:this.state.simUpgrade?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.simUpgrade}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'swap',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimCAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ lostSim: !this.state.lostSim });
}}>
<RegularText text="SIM Change" textColor={this.state.lostSim?'#006288':'black'} style={{fontWeight:this.state.lostSim?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.lostSim}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'lost',1)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
{isSimEAllowed && <View style={styles.paymentMethod}>
<TouchableOpacity onPress={() => {
this.setState({ validator: !this.state.validator });
}}>
<RegularText text="E-validator" textColor={this.state.validator?'#006288':'black'} style={{fontWeight:this.state.validator?'bold':'normal'}}/>
</TouchableOpacity>
<Collapsible collapsed={!this.state.validator}>
<Button
block
primary
onPress={() => this.loadScreen('CustomerVerification', 'validate',0)}
style={{ marginTop: 10 }}
>
<Text>Proceed</Text>
</Button>
</Collapsible>
</View>}
Thanks

The Accordion component from react-native-collapsible takes care of this particular use case.

How to solve margin problem between two components inside a Modal in React-Native?

In my react-native project inside modal, I am using two buttons in a View. But the problem is - no margin is working between them.
Here's the code
<View style={styles.container}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.ModalVisibleStatus}
onRequestClose={() => { console.log("Modal has been closed.") }}
>
{/*All views of Modal*/}
{/*Animation can be slide, slide, none*/}
<View style={styles.modal}>
<Text style={styles.text}>Modal is open!</Text>
<View style={styles.inputContainerEmail}>
<Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
<TextInput style={styles.inputs}
placeholder="Email Address"
keyboardType="email-address"
underlineColorAndroid='transparent'
onChangeText={(text) => this.updateValue(text, 'email')} />
</View>
<View style={{ flexDirection: 'row' }}>
<Button style={{ marginRight: 10 }} title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
<Button style={{ marginLeft: 10 }} title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
</View>
</Modal>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DCDCDC',
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: '#aaaa',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 10
}
)}
After running these code it's getting following output-
So how can I add margin between these two buttons?

The React-Native Button is very limited in what you can do, and doesn't support a style property as far as I know. I would suggest looking into using TouchableOpacity or TouchableNativeFeedback to customize your needs.
A potentially dirtier solution would be to wrap both Buttons inside a separate individual parent View component and applying your margin property to these parent View components instead. Alternatively, you could perhaps specify justifyContent:'space-between' on your parent View Component as is and seeing if that gives the desired result too. For example, the multiple view approach might look something like the following:
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10}} >
<Button title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
<View style={{flex:1}} >
<Button title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
</View>
Hopefully that helps!

Add justifyContent:"space-between" in your button view code as
<View style={{ flex:1, flexDirection: 'row' , justifyContent:"space-between"}}>
<Button style={{ flex:1}} title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
<Button style={{ flex:2 }} title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
Link for reference https://css-tricks.com/almanac/properties/j/justify-content/

unable to map data from JSON in render method, empty screen on emulator

I am successfully getting data from API and also am able to pass the object as props in the next component, my code for passing object is:
if (stateItems.length > 0) {
console.log(stateItems[0]);
if (stateItems[i + 1]) {
items.push(
<Grid key={i}>
<Product key={stateItems[i].product_id} product={stateItems[i]} />
<Product key={stateItems[i + 1].product_id} product={stateItems[i + 1]} isRight />
</Grid>
);
}
}
In the receiving end when i console log this.props.product I can see my data:
but when I try to render the data I get an empty screen, my code for rendering the data is:
render() {
console.log(this.props.product)
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: this.props.product.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{this.props.product.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{this.props.product.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
</Col>
);}

As per you show this.props.product look like its array of object.
You need to use map for iterate array and display product.
this.props.product.map((singleProduct, index) => {
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: singleProduct.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{singleProduct.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{singleProduct.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
);
})

how to change TextInput value using Id or Attribute?

I have unlimited inputs and I can't count all of them. I want to change the value of these by pressing the buttons but I can't set state for all of these because these can be over 1000 of Inputs or less than 10.
How can I change the values by pressing any plus or negative buttons of each input?
import React, { Component } from 'react';
import { StyleSheet, View, ToastAndroid } from 'react-native';
import { Content, List, ListItem, Thumbnail, Text, Body, Right, Left, Button, Icon, Input } from 'native-base';
let basket = [];
let Numberr = 0;
let ProductCount = [];
class MyAppList extends Component<Props> {
constructor(props){
super(props);
this.state={
quantity:'0'
}
}
UserOrderBasket = (ProductId,InputId)=>{
document,getElementById(InputId).value=Numberr;
Numberr++;
}
render() {
return (
<Content>
<View style={{ flex:1, flexDirection: 'row' }}>
<Button primary style={styles.fakeButtons1} onPress={()=>this.props.navigation.navigate('MainPage')}>
<Icon name='arrow-back' />
</Button>
<Button primary style={styles.fakeButtons2} onPress={()=>this.props.navigation.navigate('Cart',{ORDERS:basket})}>
<Icon name="cart" style={{color:'#fff'}} />
</Button>
</View>
<List>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-1"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-2"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-3"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-300"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
</List>
</Content>
);
}
}
const styles = StyleSheet.create({
ListTextB:{
fontSize:16,
fontFamily:'IRANSans',
paddingTop:5,
textAlign:'right'
},
fakeButtons1:{
width:'50%',
borderRadius:0,
alignItems: 'center',
},
fakeButtons2:{
width:'50%',
borderRadius:0,
justifyContent: 'flex-end'
},
shoppingButtons:{
borderRadius:50,
padding:5
},
shoppingText:
{
fontSize:18,
textAlign:'center',
padding:0,
backgroundColor:'#fff'
}
});
export {MyAppList};
how can I solve this problem? It's a mobile store application.