CODEWITHSUNDEEP
androidreact-nativenative-basestack-navigator
Mehmet Ait Addi
Mehmet Ait Addi

Reputation: 135

NativeBase : Navigate to a screen inside a Tab (KitchenSink)

I'm using the NativeBase (and especially the NativeBaseSink template). All my routes are defined in the App.js like this :

App.js

import { Platform } from "react-native";
import { Root } from "native-base";
import { StackNavigator, TabNavigator } from "react-navigation";

import Drawer from "./Drawer";
import Homepage from "./main_scenes/main";
import Splashscreen from "./main_scenes/home/";
import LoginScene from "./main_scenes/home/login/";

import RegisterScene from "./main_scenes/home/register/";
import InsertPhoneCode from "./main_scenes/home/pin/";
import MyResults from "./main_scenes/results/";
import MyMap from "./main_scenes/results/map/";
import UserDetails from "./main_scenes/profile/";

import MyResultsByDistance from "./main_scenes/results/Distance"
import MyResultsByAvis from "./main_scenes/results/Avis"

import Test from "./main_scenes/tab"


const AppNavigator = StackNavigator(
    {
        Drawer: { screen: Drawer },

        RegisterScene: {screen : RegisterScene},
        Splashscreen:{ screen : Splashscreen},
        Homepage:{ screen : Homepage},
        InsertPhoneCode:{screen:InsertPhoneCode},
        LoginScene: {screen : LoginScene},
        MyResults: {screen:MyResults},
        MyMap:{screen:MyMap},
        UserDetails:{screen:UserDetails},

        MyResultsByDistance:{screen:MyResultsByDistance},
        MyResultsByAvis:{screen:MyResultsByAvis},

    },
    {
        initialRouteName: "Splashscreen",
        headerMode: "none",
    }
);
export default () =>
    <Root>
        <AppNavigator />
    </Root>;

I'm using the Tabs functionality of Nativebase framework. Then, I have create an index.js where i've define all my tabs like this :

index.js

import React, { Component } from "react";
import {Dimensions, AppRegistry, StyleSheet, 
  ListView, ScrollView,View,Image,TouchableOpacity,AsyncStorage, Alert} from 'react-native';

import {
  Container,
  Header,
  Title,
  Button,
  Icon,
  Tabs,
  Tab,
  Text,
  Right,
  Left,
  Body,
  TabHeading,
    Footer,
  FooterTab,
} from "native-base";

import DisplayByDistance from "./Distance/";
import DisplayByAvis from "./Avis/";
import styles from "./styles";
import { StackNavigator } from 'react-navigation';
export default class ConfigTab extends Component {

 constructor(props) {
    super(props);
    this.state = {
      tab1: false,
      mapRegion: null,
    lastLat: null,
    lastLong: null,
    };
  }

toggleTab1() {
    this.setState({
      tab1: true,
    });
  }

  render() {
    return (
      <Container>
        <Header hasTabs>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body style={{ flex: 3 }}>
            <Title> Résultats</Title>
          </Body>
          <Right />
        </Header>
        <Tabs style={{ elevation: 3 }}>

          <Tab
            heading={
              <TabHeading><Icon name="navigate" /><Text 
              style={styles.TabTitle}>Le plus prés</Text></TabHeading>
            }
          >

            <DisplayByDistance />
          </Tab> 
          <Tab heading={<TabHeading><Icon name="star-half" /><Text
          style={styles.TabTitle}>Le mieux noté</Text></TabHeading>}>

            <DisplayByAvis />
          </Tab>

        </Tabs>
         <Footer>
          <FooterTab>
            <Button active={this.state.tab1} onPress={() => this.props.navigation.navigate("MyMap")}>
              <Icon active={this.state.tab1} name="paper-plane" />
              <Text>Afficher la carte</Text>
            </Button>

          </FooterTab>
        </Footer>
      </Container>
    );
  }
}
AppRegistry.registerComponent('ConfigTab', () => ConfigTab);

According to the files i've edited, when i press on the TabOne, it opens the right tab where the content is located in the file called Distance.js So right now, everything works well except that the "props.navigation.navigate"is not recognized in my Distance.js file.

Here is my file

Distance.js

import React, { Component, PropTypes } from "react";
import {...} from 'react-native';
import {...} from "native-base";
import styles from "./../styles";
import { StackNavigator } from 'react-navigation';
import App from "./../../../App"
var productArray = [];

class TabOne extends Component {
constructor(props){
 super(props)
  var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
  this.state={
    data:[],
    dataSource: dataSource.cloneWithRows(productArray),
    isLoading:true,
  }
  this.donePressed=this.donePressed.bind(this);
};

componentDidMount()
{
this.getTheData(function(json){
     productArray = json;
     this.setState({
     dataSource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));  
}

donePressed() {
  const { navigate } = this.props.navigation; 
  navigate('UserDetails');
}

getTheData(callback) {

    var url = "http://paradox.ma/workshop/webservices/getPOI_info.php";
fetch(url)
     .then(response => response.json())
     .then(json => callback(json))
     .catch(error => alert("Erreur de connexion Internet") );
   }
list(rowData) {
if (rowData === null) { return <View></View>; };
let VerifiedUser;
const VerifiedTest=rowData.Verified;
  if (VerifiedTest==='1') 
  {
        VerifiedUser=(
                <Right>
                    <View style={styles.avatarBox}>
                    <Text numberOfLines={2}><Icon name="verified" size={30} color="green" /></Text>
                    <Text>Profil vérifié</Text>
                    </View>
                </Right>
      )}
return (
              <ListItem thumbnail

              onPress={() => this.donePressed().bind(this)}
         >
                <Left>
                 <View style={styles.avatarBox}>
                  <Thumbnail size={55} source={{uri:rowData.Avatar}} />
                <Text style={styles.avatarTitle}>{rowData.Title}</Text>
                </View>
                </Left>


                <Body>
                  <Text>{rowData.Title}</Text>
                   <Text numberOfLines={2}><Icon name="map-marker" size={15} color="grey" /> {rowData.Address}, {rowData.City} ({rowData.Distance} km)</Text>
                  <Text numberOfLines={3}>{rowData.Description}</Text>
                </Body>

               {VerifiedUser}
              </ListItem>
  );
}
  render(){
    return(

        <Container>
        <View>
        <TouchableOpacity onPress={() => this.donePressed().bind(this)}>
        <Text>Test</Text>
        </TouchableOpacity>
        </View>
        </Container>
      );
  }
}
export default TabOne;

My function called donePressed() works very well when i replace the this.props.navigation.navigate by alert("Hello") But once I try to navigate between screens, I have an error : Undefined is not an object...this_2.props.navigation.navigate().

I really don't know where is the problem coming from. I have tried to define the function in the constructor, no way.

Hope to find a solution.

Upvotes: 0

Views: 1374

Answers (1)

Amine Hakkou
Amine Hakkou

Reputation: 574

if you want to react navigation to inject navigation prop you'll need to declare that specific Component as a Navigator scene

but I would totally suggest using React navigation's TabNavigator, you can find here how to nest Navigators: https://reactnavigation.org/docs/intro/nesting

Upvotes: 1

Related Questions