[ReactJS]

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>
);
}
}

Continue reading...