React-native open piker when I click on an Image

Question

I'm looking for a way to open pickers when I click on an image or icon. Like in Instagram.

picker menu

Do you have any idea ?

Answer 1

You can use model to open dialog like this.

Here is small example for it:

modeljs.js

import React, { Component } from 'react';
import { Text, View, Modal } from 'react-native';


export default class Modeljs extends Component {

  render() {
const { onPressCancel, onPressReport, visible } = this.props;

    return (
      <Modal
        animationType={'fade'}
        transparent
        visible={visible}
        onRequestClose={() => { }}
      >
        <View
          style={{ flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text>You are in Model</Text>
        </View>
      </Modal>);
  }
}

You can use modeljs in your screen like this:

      state ={
        modalVisible: false,
        seletData: [],
      }
      setModalVisible(visible) {
        this.setState({ modalVisible: visible });
      }
      modelPress(item) {
        this.state = { ...this.state, seletData: item };
        this.setModalVisible(true);
      }
      renderReportDialog() {
        return (
          <Modeljs
            visible={this.state.modalVisible}
            onPressCancel={() => { this.setModalVisible(false); }}
onPressReport={()=>{alert('Called')}}
            modelPress={(data) => {
              this.setModalVisible(false);
            }}
          />);
      }