modal not open in react-native android - react-native

I am Developing react-native Android Sample App. Firstly I Created One Page inside Tab bar Bottom On Page ... In TabBar Contains OneTabPage have contains open Two Modals ( one Is Using Edit and another Date showing to modal's custom Desing) modal and one Button has EditButton when i was click on editIcon show Modal it's working fine iOS. But in android when i was go to click on next tab and come back to current Page it's not working Modal means not Open(android).
I am following refer this link : https://github.com/bodyflex/react-native-simple-modal
This is my Code:
<Modal
open={this.state.open}
offset={0}
animationDuration={200}
animationTension={40}
open={this.state.open}
closeOnTouchOutside={true}
modalDidOpen={() => console.log('modal did open')}
modalDidClose={() => this.setState({open: false})}
style={{flexGrow: 1,
height:windowSize.height/2.5}}>
<View style={styles.modelView}>
<View style={{flex:.25, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center', color:'black'}}>
{this.state.product_title}
</Text>
</View>
<View style={{flex:.35, justifyContent:'center', alignItems:'center'}}>
<View style={styles.modelIncDecButton}>
<TouchableOpacity style={{flex:.15, justifyContent:'space-around', alignItems:'center'}} onPress={this.decrementMethode.bind(this)}>
<Image style={styles.incrementDecrementIcon} source={require('#images/decrementIcon.png')} />
</TouchableOpacity>
<View style={{flex:.05, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center',color:'black'}}>
{this.state.product_quantity}
</Text>
</View>
<TouchableOpacity style={{flex:.15, justifyContent:'space-around', alignItems:'center'}} onPress={this.incrementMethode.bind(this)}>
<Image style={styles.incrementDecrementIcon} source={require('#images/incrementIcon.png')} />
</TouchableOpacity>
</View>
</View>
<View style={{flex:.15, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center',color:'black'}}>
£ {(Math.floor(this.state.product_total * 100) / 100).toFixed(2)}
</Text>
</View>
<View style={{flex:.25, justifyContent:'center', alignItems:'center'}}>
<TouchableOpacity style={styles.updateButton} onPress={this.updateMethode.bind(this)}>
<Text style={styles.updateButtonText}>
Update
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
the above code based i am following this link :
enter link description here
Thans in Advance

Related

Is there a way to be able to interact with the background components when Modal is visible?

as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>

How to change a variable on the input text by hitting a button? React Native

The image is showing what the code does. I want the text inside the input Text to change when I hit the + or - button. How can I do that?
function Cerveja(props) {
const [count,setCount] = useState(0);
<View style={{flex: .1}}>
<Button
onPress={()=>setless(count*1)}
title="-"
color="#841584"
/>
</View>
<View style={{flex: 0.11}}>
<TextInput
textAlign={'center'}
style={{height: 40}}
placeholder={'0'}
onChangeText={(count) => setCount(count)}
keyboardType={'numeric'}
/>
</View>
<View style={{flex: .1}}>
<Button
onPress={()=> setCount(count*1+1)}
title="+"
color="#841584"
/>
</View>
<View style={{flex: .19}}>
<Text textAlign={'center'}>R$ {parseFloat((count*1*props.price).toFixed(2))}</Text>
</View>
</View>
IMAGE
Please help!
this could work for the "+" button
onPress={()=> setCount(count+1)}
and this for the "-" button
onPress={()=> setCount(count-1)}

Scrollview inside another view does not works in react native

render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code

View is not showing on screen

I have the code below:
<ImageBackground style={{flex:1, width: null, height: null}} source={require('../img/bg.png')}>
<View style={{flex:1, backgroundColor:'red'}}>
</View>
<View style={{flex:1, backgroundColor:'yellow'}}>
<Text style={{fontSize:40}}>RESULTADOS</Text>
</View>
<View style={{flex:6, backgroundColor:'red'}}>
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
<View style={{flex:1, backgroundColor:'white'}}>
//THIS NOT SHOW
</View>
<View style={{flex:1, backgroundColor:'green'}}>
//THIS NOT SHOW
</View>
</ScrollView>
</View>
</ImageBackground>
The View whit background color white and green is not showing on the screen.
Anybody help?
TheScrollView component has a special prop to set style for the content. It's the contentContainerStyle
Instead of using
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
Just use
<ScrollView contentContainerStyle={{flex:1, backgroundColor:'blue'}}>
Click here to get more details.

react-native-swipeout onPress method disables containing component's onPress method

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