react-native-modals
react-native-modals copied to clipboard
jacklam718
How to add a pop up behaviour from parent class if the child component is the popup?
I'm using Dialog as a component and trying to make it work as a popup by passing a prop value.
It is acting like a one time popup and not working after wards. Can anyone help me out please?
This is my code:
ApplianceConfig.js
import React, {Component} from 'react'
import {findNodeHandle, Switch, Dimensions, Platform, StyleSheet, Text, View, Button, TextInput, TouchableOpacity, Image, Animated, Easing, ScrollView} from 'react-native'
import Slider from '@react-native-community/slider'
import { createStackNavigator, createAppContainer } from "react-navigation"
import Dialog, { DialogContent, SlideAnimation } from 'react-native-popup-dialog'
import PropTypes from 'prop-types';
import SwitchToggle from 'react-native-switch-toggle'
import { BlurView } from "@react-native-community/blur";
screenWidth = Dimensions.get('screen').width
screenHeight = Dimensions.get('screen').height
var applianceName = 'Fan'
class ApplianceConfig extends Component<Props> {
constructor(props) {
super(props);
this.state = {
viewRef: null,
visible: this.props.visible,
switchAppliance: false,
switchRepeat: false,
};
}
dialogPopup () {
this.setState({
visible: this.props.visible
})
return (
this.state.visible
)
}
onPressAppliance = () => {
this.setState({ switchAppliance: !this.state.switchAppliance });
}
onPressRepeat = () => {
this.setState({ switchRepeat: !this.state.switchRepeat });
}
onTextViewLoaded() {
this.setState({ viewRef: findNodeHandle(this.viewRef) });
}
switchBorderColorAppliance = () => {
var onColor = '#CC6666'
var offColor = '#BBBBBB'
if (this.state.switchAppliance == true) {
return (
onColor
)
} else {
return (
offColor
)
}
}
switchBorderColorRepeat = () => {
var onColor = '#CC6666'
var offColor = '#BBBBBB'
if (this.state.switchRepeat == true) {
return (
onColor
)
} else {
return (
offColor
)
}
}
render() {
return (
<Dialog
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
dialogStyle={{ borderRadius: 10, position: 'absolute', bottom: 0, backgroundColor: 'transparent' }}
dialogAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
containerStyle={{ justifyContent: 'flex-end' }}>
<DialogContent>
<View style={dialog.container}
ref={(viewRef) => { this.viewRef = viewRef }}
onLayout={() => { this.onTextViewLoaded(); }}>
<View style={dialog.containerSubViewTitle}>
<Text style={dialog.sectionTitleFont}>{applianceName}</Text>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Appliance</Text>
<SwitchToggle
onPress={() => this.onPressAppliance()}
switchOn={this.state.switchAppliance}
containerStyle={{
backgroundColor: 'white',
width: 50,
height: 25,
borderRadius: 12.5,
marginRight: 25,
borderWidth: 1,
borderColor: this.switchBorderColorAppliance(),
padding: 6
}}
circleStyle={{
width: 13,
height: 13,
borderRadius: 6.5,
backgroundColor: '#CC6666', // rgb(102,134,205)
}}
circleColorOff='#BBBBBB'
circleColorOn='#CC6666'
backgroundColorOn='white'
backgroundColorOff='white'
/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Speed</Text>
<Slider
style={{width: 200, height: 40, marginRight: 20}}
minimumValue={0}
maximumValue={100}
minimumTrackTintColor="#CC6666"
maximumTrackTintColor="#AAAAAA"
thumbTintColor='#CC6666'
/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Automatically Turn{'\n'}off in</Text>
<Text style={dialog.titleFontRight}>00.00 hrs</Text>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.sectionTitleFont}>Automate</Text>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Turn On Timer</Text>
<TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Turn Off Timer</Text>
<TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Repeat Everyday</Text>
<SwitchToggle
onPress={() => this.onPressRepeat()}
switchOn={this.state.switchRepeat}
containerStyle={{
backgroundColor: 'white',
width: 50,
height: 25,
borderRadius: 12.5,
marginRight: 25,
borderWidth: 1,
borderColor: this.switchBorderColorRepeat(),
padding: 6
}}
circleStyle={{
width: 13,
height: 13,
borderRadius: 6.5,
backgroundColor: '#CC6666',
}}
circleColorOff='#BBBBBB'
circleColorOn='#CC6666'
backgroundColorOn='white'
backgroundColorOff='white'
/>
</View>
<View style={dialog.doneButtonView}>
<TouchableOpacity style={dialog.doneButton}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: 'white'}}>Done</Text>
</TouchableOpacity>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}
onPress={() => {this.setState({visible: false})}}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#CC6666'}}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
</DialogContent>
</Dialog>
)
}
}
ApplianceConfig.propTypes = {
visible: PropTypes.bool
}
const dialog = StyleSheet.create({
container: {
backgroundColor: 'rgba(255, 255, 255, 1.0)',
flex: 0,
justifyContent: 'flex-start',
alignItems: 'center',
height: 0.75 * screenHeight,
width: screenWidth,
borderRadius: 30
},
containerSubViews: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 50,
width: screenWidth
},
containerSubViewTitle: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 50,
width: screenWidth,
marginTop: 40
},
titleFont: {
marginLeft: 20,
fontSize: 16,
fontWeight: '500'
},
titleFontRight: {
marginRight: 20,
fontSize: 16,
fontWeight: '500'
},
doneButton: {
height: 50,
borderRadius: 25,
width: '50%',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#CC6666',
marginLeft: 30
},
doneButtonView: {
flex: 0,
width: screenWidth,
height:50,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'transparent',
marginTop: 20,
},
sectionTitleFont: {
marginLeft: 20,
fontSize: 20,
fontWeight: '500',
color: 'black',
},
applianceTitle: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 60,
width: screenWidth
},
absolute: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}
})
module.exports = ApplianceConfig;
This is the file from I'm calling the popup
Home.js
import React, {Component} from 'react'
import {Modal, Dimensions, Platform, StyleSheet, Text, View, Button, TextInput, TouchableOpacity, Image, Animated, Easing, ScrollView} from 'react-native'
import ApplianceConfig from '../ApplianceConfigurations/ApplianceConfig.js'
import Dialog, { DialogContent } from 'react-native-popup-dialog';
class HomeTab extends Component<Props> {
state = {
modalVisible: false,
}
initiatePopup = () => {
if (this.state.modalVisible) {
console.log('true')
return (
<ApplianceConfig visible={true}/>
)
} else {
console.log('false')
}
}
buttonClicked = () => {
this.setState({
modalVisible: true
})
}
render() {
return (
<View style={styles.container}>
{
this.initiatePopup()
}
<TouchableOpacity onPress={() => this.buttonClicked()}>
<Image source={require('../Assets/icon.png')} style={{height: 50, width: 50, borderRadius: 25, marginRight: 0.025 * screenWidth}}/>
</TouchableOpacity>
</View>
)}
The popup will come once and then it won't be triggered again despite the fact that true value is being initialized.
I've thoroughly read the readme but it doesn't suggest how to add the popup behaviour or modify the it to that behaviour.
Can you please suggest a way around this? @jacklam718
