Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 2

Problem with backbutton on modal

Hi there im doing a homework on my college about creating a app interface with react native i using the modal option but when i call back using onBackbuttonPress it dont work 

any recomendation for solving the problem?

 

thank u

 

import React, { Component, PropTypes } from 'react'
import {StyleSheet, Button, Modal, Text, TouchableOpacity, FlatList, StatusBar, View} from 'react-native'

// Colores
const MAIN_USUARIO_COLOR= "#EFEFEF"
const MAIN_FACTURACION_COLOR= "#EFEFEF"
const MAIN_CONTENIDO_COLOR= "#EFEFEF"
const MAIN_LEGISLACION_COLOR= "#EFEFEF"
const MAIN_SOPORTE_COLOR= "#EFEFEF"
const MAIN_SEGURIDAD_COLOR= "#EFEFEF"

const items = [{key: 1, backgroundColor: MAIN_USUARIO_COLOR, title: 'Usuario',},
{key: 2, backgroundColor: MAIN_FACTURACION_COLOR, title: "Facturacion",},
{key: 3, backgroundColor: MAIN_CONTENIDO_COLOR, title: "Contenido",},
{key: 4, backgroundColor: MAIN_LEGISLACION_COLOR,title: 'Legislacion',},
{key: 5, backgroundColor: MAIN_SOPORTE_COLOR,title: "Soporte", },
{key: 6, backgroundColor: MAIN_SEGURIDAD_COLOR,title: "Seguridad"}
]

export default class Main extends Component {
constructor(props) {
super(props)
 
this.state = {
visible: false

}
}
renderItem = ({item}) => {
return (
<TouchableOpacity onPress={() => this.setState({ visible: true })} style={[styles.button, {borderColor: item.backgroundColor}]}>
<Text style={[styles.text, {color: item.backgroundColor}]}>{item.title}</Text>
</TouchableOpacity>
)
}
renderModalContent = () => (
<View style={styles.modalContent}>
<TouchableOpacity
onBackButtonPress = {() => this.setState({visible: false})}
/>

</View>
 
 
);

//constantes//
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#2196F3"/>
<View style={styles.fondo}>
<FlatList
style={styles.listContainer}
data={items}
renderItem={this.renderItem}
/>
</View>

<Modal
visible = {this.state.visible}
 
onBackButtonpPress={() => this.setState({ isVisible: false })}>
{this.renderModalContent() }
 
</Modal>

</View>
 
);
//Backend(en desarrollo)
}
}
//Diseño tipo CSS//
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#2196F3',
padding: 30,
marginTop: 24
},
listContainer: {
paddingTop: 70,
},
fondo:{
backgroundColor: '#EFEFEF',
elevation: 5,
flex: 1,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center'
},
button: {
padding: 8,
alignItems: 'center',
borderRadius: 30,
backgroundColor: '#2196F3',
borderWidth: 1,
width: 230,
height: 50,
marginVertical: 4,
 

},
text: {
fontSize: 20,
textAlign: 'center',
color: 'white',
fontWeight: 'bold',
},
modalContent: {
backgroundColor:'#2196F3',
flex: 1,
elevation: 5,
marginTop: 30,
marginBottom: 20,
marginLeft: 30,
marginRight: 30,
padding: 10,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center'
 

 
 

},
});
1 Reply
Commander Lvl 3
Message 2 of 2

Re: Problem with backbutton on modal

Hi and welcome @ColombianHero ,

 

Please post code in a Gist (https://gist.github.com/) or give us a link to the repository containing the code. Also, try to limit the code you post to where the exact problem is.


- Mark