react-native react-navigation react-navigation-stack

How to open another screen inside tab container in react native?

I'm using react-navigation & react-navigation-stack to navigate screens. I wanted to open another screen inside tab container. How can I do that?

This is the screen that I want to open another screen.

import React from 'react';
import { StyleSheet, View} from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button, Text, Icon, Body,Card,CardItem,Right} from 'native-base';

export default class MyEvents extends React.Component {

  option1Click = () => {
    //alert('Press Option1')
    this.props.navigation.navigate('EventView')
  };

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>

<Card primary>
{/* <CardItem header bordered style={{ backgroundColor: 'lightgray' }}> */}
    <CardItem header bordered>
      <Text>Event Name</Text>
    </CardItem>
    <CardItem bordered>
      <Body>
        <Text>
          NativeBase is a free and open source framework that enable
          developers to build
          high-quality mobile apps using React Native iOS and Android
          apps
          with a fusion of ES6.
        </Text>
      </Body>
    </CardItem>
    <CardItem footer bordered footer button onPress={() => this.option1Click()}>
        <Text>View</Text>
        <Right>
                <Icon name="arrow-forward" />
        </Right>
      </CardItem>
  </Card>
      </View>
    );
  }
}

This is the screen I want to open

  import React, { Component } from 'react';
  import { Container, Header, Tab, Tabs, TabHeading, Icon, Text, Content, Left, Button, Body, Right, Title } from 'native-base';
  import ViewEvent from './EventTabs/ViewEvent';
  import Attendance from './EventTabs/Attendance';
  import { Image, TouchableOpacity  } from 'react-native';


  class EventView extends Component {

    option1Click = () => {
      this.props.navigation.navigate('tabContainer')
    };

      render() { 
        const {navigate} = this.props.navigation;
          return ( 

              <Container>

            <Left>
            <Button transparent onPress={() => this.option1Click()}>
              <Icon active name="arrow-back" />
            </Button>
            </Left>
            <Body >
                <Title color='white' >Event Details</Title>
            </Body>

            <Right>

            </Right>
            </Header>
                  <Tabs>
                    <Tab heading={ <TabHeading><Icon name="calendar" /><Text>View Event</Text></TabHeading>}>
                     <ViewEvent />
                    </Tab>
                    <Tab heading={ <TabHeading><Icon name="contact" /><Text>Attendance</Text></TabHeading>}>
                     <Attendance />
                    </Tab>
                   </Tabs>
              </Container>
           );
      }
  }

  export default EventView;

This is my App.js file

import Login from './src/login';
import Registration from './src/registration';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import TabContainer from './src/tabContainer';
import EventView from './src/EventView'

const App = createStackNavigator({
  login: {screen: Login,navigationOptions:{headerShown: false}},
  tabContainer: {screen: TabContainer,navigationOptions:{headerShown: false}},
  EventView: {screen: EventView,navigationOptions:{headerShown: false}},
  },
  {
    initialRouteName: 'login',
  }
);
export default createAppContainer(App);

When I Click On View button in Myevents.js file it give me an error. This is the error I got.

This is my folder Structure.

This is my App design.

How to fix this error?

This is my Footer Tab Container JS file

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Root, Container, Header, Content, Footer, FooterTab, Button, Text, Icon } from 'native-base';
import MyEvents from '../FooterPages/MyEvents';
import JoinEvents from '../FooterPages/JoinEvents';
import CreateEvent from '../FooterPages/CreateEvent';

export default class Tab1 extends React.Component {
  constructor(props) {
   super(props)
   this.state = {
     loading: true,
     index: 0, // tab index
   }
  }

  switchScreen(index) {
     this.setState({index: index})
  }

  render() {
    const { index } = this.state;
    let AppComponent = null;

    if (index == 0) {
      AppComponent = MyEvents
    } else if(index == 1) {
      AppComponent = JoinEvents
    } else if(index == 2) {
      AppComponent = CreateEvent
    }  else {
      AppComponent = Home
    }


    return (
      <Root>
      <Container>
        <Content>
          <AppComponent />
        </Content>
        <Footer>
          <FooterTab>
            <Button vertical active={index === 0} onPress={() => this.switchScreen(0)}>
              <Icon name="apps" />
              <Text>My Events</Text>
            </Button>
            <Button vertical active={index === 1} onPress={() => this.switchScreen(1)}>
              <Icon name="paper" />
              <Text>Join Events</Text>
            </Button>
            <Button vertical active={index === 2} onPress={() => this.switchScreen(2)}>
              <Icon active name="add" />
              <Text>Create Event</Text>
            </Button>

          </FooterTab>
        </Footer>
      </Container>
    </Root>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

After add this.props.navigation.push('EventView'), it give this error.

Solution

You need to pass navigation as below tabContainer.js

<Tab1 navigation={this.props.navigation} />

tab1.js

<AppComponent navigation={this.props.navigation} />

Than use it in MyEvents.js

option1Click = () => {
    //alert('Press Option1')
    // this.props.navigation.navigate('EventView')
    this.props.navigation.push('EventView')
  };