CODEWITHSUNDEEP
javascriptreactjsreact-native
fun joker
fun joker

Reputation: 1727

How to connect react component in react navigation?

I have created modal in react native. I have added filter option icon in top right corner now when the user clicks on it should open the modal. How can I do that ? I have added Options icon in navigation.js but now how to connect it with modal component ?

In code below setModalVisible is available in filteroptions.js and not in navigation.js

Code:

navigation.js:

Updates: {
            screen: UpdatesScreen,

            navigationOptions: ({ navigation }) => ({
                headerTitle: 'Myapp',
                headerRight:<TouchableOpacity onPress={() => {this.setModalVisible(true);}}>
                                <MenuIcon style={{paddingLeft: 10, paddingRight: 15}} name="md-options" size={25} color="white"/>
                            </TouchableOpacity>,

            })
        },

filteroptions.js:

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

export default class FilteroptionsModel extends Component {
  state = {
    modalVisible: false,
  };

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

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

When user clicks on filter button in top right corner (see screenshot) he should be able to see the box modal on screen:

enter image description here

Upvotes: 3

Views: 172

Answers (1)

nikos fotiadis
nikos fotiadis

Reputation: 1085

Since it is a modal you don't necessarily need to add it to the navigation. You can just include it in your page and initially have it be invisible, then when the user clicks your button you can make the modal visible. But if you want to add it to the navigation why not just add like any other component. However, adding it to the navigation will take you to another page when you navigate to the component. Of course you can add a nested navigator to work around that, but I think it adds unnecessary complexity.

Update You will first declare a Header component.

export default class MyHeader extends React.PureComponent {

  render() {
    <View>
      <View>...Your left Icon here</View>
      <View>...Your Title here</View>
      <View>...Your right Icon Here</View>
    </View>
  }
}

Then in your page you will render this component first, pass as props your handlers and then render the rest of the page.

export default class MyPage extends React.PureComponent {

  yourRigthHandler = () => {
     this.setState({modaVisible: true});
  }

  yourLeftHandler = () => {....}

  render() {
    <View>
      <MyHeader 
         LeftHandler={yourLeftHandler}
         LeftHandler={yourRigthHandler}>
           ....
      </MyHeader>
    </View>
  }
}

inside the handlers you can call the navigation functions to navigate to another page or change the components state to make the moda visible.The handlers will be passed as props to your header and you will add them as onPress handlers to your buttons.

Upvotes: 1

Related Questions