CODEWITHSUNDEEP
androidiosreactjsreact-nativemodal-dialog
msqar
msqar

Reputation: 3020

How to make Modal to show up as a different Component in react-native

I'm using react-native, native-base and react-native-modal dependencies. I got a Home activity, where it has a Header with a Button that would open a Modal.

But I still can't figure out how to make it work. Using Native-Base Button Component, whenever I bind the onPress event to my showModal() function it says that "variable showModal doesn't exist", and if I add this.showModal() as instead, it throws a stack limit exceeded red background error in iOS simulator.

This is my parent component:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    ScrollView,
    View
} from 'react-native';
import AddEntryModal from './src/add-entry-modal';
import Flag from 'react-native-flags';
import {
    Header,
    Container,
    Left,
    Button,
    Icon,
    Body,
    Title,
    Right,
    Item,
    Input
} from 'native-base';

var MyApp = React.createClass({

    getInitialState: function() {
        return {
            modalVisible: true
        }
    },

    render: function() {
        return (
            <Container>
                <Header style={{ backgroundColor: '#333333' }}>
                    <Left>
                        <Button transparent>
                            <Icon name='ios-settings' />
                        </Button>
                    </Left>
                    <Body>
                        <Item rounded>
                            <Icon active name='ios-search' />
                            <Input placeholder={'Search'} />
                        </Item>
                    </Body>
                    <Right>
                        <Button onPress={ showModal() } transparent>
                            <Icon name='ios-contact' />
                            <Icon name='ios-add' />
                        </Button>
                    </Right>
                </Header>

                <ScrollView>
                    ... <-- have some irrelevant stuff here
                </ScrollView>
            </Container>
        );
    },

    showModal: function() {
        this.setState(
        {
            modalVisible: true
        })
    }
});

AppRegistry.registerComponent('myapp', () => MyApp);

Then, in a separate file, I wanted to have my Modal Component.

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


var AddEntryModal = React.createClass({

    // _showModal: () => this.setState({ modalVisible: true }),

    // _hideModal: () => this.setState({ modalVisible: false }),

    render: function() {
      return (
        <View style={{ flex: 1 }}>
          <Modal isVisible={ this.props.modalVisible }>
            <View style={{ flex: 1 }}>
              <Text>Hello World!</Text>
            </View>
          </Modal>
        </View>
      )
    }
});

module.exports = AddEntryModal;

But for some reason is not working, I'm new to react native. If I add the <AddEntryModal></AddEntryModal> Component somewhere inside my parent class, even though it's not being displayed, it takes room.

Any idea on how could I approach this?

Upvotes: 1

Views: 8764

Answers (1)

Hariks
Hariks

Reputation: 1889

You should use <AddEntryModal /> in your parent class to render the modal , also you need to pass the visibility value as a prop. <AddEntryModal modalVisible={this.state.modalVIsible} />. You may need to use position: 'absolute' style for your modal class to render it top of the other screen.

Upvotes: 2

Related Questions