Estou tentando criar um componente Modal que generico que possa ser reutilizado em outras partes do aplicativo. Entretanto não estou conseguindo realizar o controle de abertura do mesmo. Segue minha tentativa:
Modal
export default class ModalComponent extends Component {
constructor(props) {
super(props);
this.state = { isVisible: this.props.isVisible }
this.closeModal = this.closeModal.bind(this);
}
closeModal() {
let s = this.state;
s.isVisible = false;
this.setState(s);
}
render() {
return (
<Modal animationType='slide' visible={this.state.isVisible}>
<TouchableOpacity onPress={this.closeModal}>
<Text> Fechar </Text>
</TouchableOpacity>
<View style={styles.modal}>
<Text> Empresa: </Text>
</View>
</Modal>
);
}
}
Utilização no código principal
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ id: "00", name: "Estabelecimento 1" },
{ id: "01", name: "Estabelecimento 2" },
{ id: "02", name: "Estabelecimento 3" },
{ id: "03", name: "Estabelecimento 4" },
{ id: "04", name: "Estabelecimento 5" },
{ id: "05", name: "Estabelecimento 6" },
{ id: "06", name: "Estabelecimento 7" },
{ id: "07", name: "Estabelecimento 8" },
{ id: "08", name: "Estabelecimento 9" },
{ id: "09", name: "Estabelecimento 10" }
],
modalVisible: false
}
this.openModal = this.openModal.bind(this);
}
// Controla a visibilidade do Modal
openModal() {
let s = this.state;
s.modalVisible = true;
this.setState(s);
}
// Rendereiza os item da lista
renderItem(item) {
return (
<TouchableOpacity onPress={this.openModal} style={styles.item}>
<Text style={styles.text}> {item.name} </Text>
<Image style={styles.image} source={require('./images/noimage.png')} />
<Text> Commodo mollit in ad anim fugiat irure. Fugiat sint ea commodo nulla sunt et eu mollit irure in sit consequat eu. </Text>
<ModalComponent data={item} isVisible={this.state.modalVisible} />
</TouchableOpacity>
);
}
render() {
return (
<View style={styles.body}>
<Image style={styles.headerImg} source={require('./images/400x300.png')} />
<View style={styles.empresas}>
<FlatList data={this.state.data}
keyExtractor={item => item.id}
numColumns={2}
renderItem={({ item }) => this.renderItem(item)} />
</View>
</View>
);
}
}