CODEWITHSUNDEEP
javascriptreactjsreact-nativerender
user3676224
user3676224

Reputation: 873

React Native - How to create and render a component on top of other components

I am using RN 0.47 and I am trying to build a component which I can pass a message (prop) to and render it on top of the current showing component, something that functions similarly to the Alert API provided, however I want to style and position it differently as well.

I am using React Navigation to create TabNavigator view, so I will be calling the component in multiple tabs/modules.

This is my code for the Modal

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

    class ModalView extends Component {

      state = {
        modalVisible: true,
      }

      setModalVisible(visible) {
        this.setState({modalVisible: visible});
      }

      render() {
        return (
          <View style={{marginTop: 22}}>
            <Modal
              animationType={"slide"}
              transparent={false}
              visible={this.state.modalVisible}
              onRequestClose={() => {alert("Modal has been closed.")}}
              >
             <View style={{marginTop: 22}}>
              <View>
                <Text>Hello World!</Text>

                <TouchableHighlight onPress={() => {
                  this.setModalVisible(!this.state.modalVisible)
                }}>
                  <Text>Modal</Text>
                  <Text>is</Text>
                  <Text>displayed</Text>
                </TouchableHighlight>

              </View>
             </View>
            </Modal>
          </View>
        );
      }
    }

    export default ModalView;

This is the code for the function that calls the Modal when network fetch fails

import React from 'react';
import {ToastAndroid,Alert,Platform} from 'react-native';
import ModalView from "./Modal"

module.exports = async function(url, cb) {
  try {
    //do something

  } catch(error) {
    Platform.OS == "ios"?
      <ModalView />
      :
      ToastAndroid.show(error.toString(), ToastAndroid.LONG)
  }
}

and lastly, the function above gets called and executed within a componentDidMount function in the react-navigation tab components, but the modal never gets displayed.

Upvotes: 0

Views: 4304

Answers (1)

Artur Nista
Artur Nista

Reputation: 359

Apparently, you need a Modal:
https://facebook.github.io/react-native/docs/modal.html

But, if you need something more general, you can use position: 'absolute' style, combined with top, right, bottom and left styles.

Upvotes: 1

Related Questions