Stack Navigator in react native

Question

I am using stack navigator to navigate between screen in my react native app. But it is giving me an error using this.props.navigation.navigate . kindly tell me what i am doing wrong here .

I am using react-native router-flux too in my app but for some purpose i need to use stack navigator as my app has home page and it shows some content of blog feed and onclicking read more it should open detailed view of only that specific blog feed in detailed page, therefore, for this purpose i am using stack navigator here . Here is my code:

Home.js:

import React, { Component } from 'react';
import {
  ActivityIndicator,
  ListView,
  Text,
  StyleSheet,
  View,
  Button,
  TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';

import {
  Card,
  CardItem,
  Content,
  Header,
  Body,
  Footer,
  FooterTab,
  Container,
  Left,
  Icon,
  Right
} from 'native-base';

import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';

export default class Home extends Component {


  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      count:0,
      count1:0
    }
  }


  componentDidMount() {
    return fetch('http://www.cardory.co.uk/jan/json')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==     r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson.items),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }


  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 80}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <Container style={{flex: 1, paddingTop: 60}} >
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>

      <Card>
        <CardItem header>
          <Text style={styles.titleHeading}>{rowData.title}</Text>
        </CardItem>
        <CardItem cardBody>
            <Content style={{marginLeft:10,marginRight:10}}>
              <FitImage source={{uri: GetImage(rowData.content_html)}}/>
              <HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
            </Content>
        </CardItem>
        <CardItem>
            <Left>

              <TouchableOpacity onPress={() =>this.props.navigation.navigate('Detail')}>
                <Text style={styles.ReadMore}>
                  Read more
                </Text>
              </TouchableOpacity>
            </Left>

            <Right>
              <Text style={styles.Time}>
                <Icon name="time" style={{color:'#483D8B'}}/>
                <TimeAgo time=  {rowData.date_published}/>
              </Text>
            </Right>
        </CardItem>

      </Card>
    }
  />
  </Container>
);
  }

}



const styles=StyleSheet.create({
  textHeading:{
    fontSize:20,
    marginTop:20
  },
  titleHeading:{
    fontSize:20,
    fontWeight:'bold',
    color:'black',
    alignItems:'center',
  },
  ReadMore:{
    color:'#483D8B',
    fontSize:15,
    fontWeight:'bold'
  },
  Time:{
    color:'#483D8B',
    alignSelf:'stretch'
  },
});

Navigation.js:

import React,{Component} from 'react';

import {
  View,
  Text,
  TouchableOpacity
} from 'react-native';

import {StackNavigator} from 'react-navigation';
import Home from './Home';
import Info from './Info';
import Details from './Details';
import Register from './Register';

const Navigation = StackNavigator({
    Home:{screen: Home},
    Info:{ screen: Info},
    Details:{ screen: Details},
    Register:{ screen: Register}
});

And my aim is on cliking read more it should open only that specific blog feed any help would be appreciated. Thanks in advance!

Answer 1

I believe what @Harlan is asking for is something like:

    import AppNavigator from './Navigation.js'

    class App extends Component {
       render(){
         return(
           <View>
            <AppNavigator/>
           </View>
         )
       }
    }

    AppRegistry.registerComponent( 'app', () => App );

And he probably has a point since you are not exporting your navigator in Navigation.js. Without something like the above code, then your components will not have navigation in their props.

Answer 2

in onPress callback, this may be changed, so the value of this.props.navigation may be different to your expect. you should use a variable to save navigation and avoid use this in callback. see my code below.

render() {
  const {navigation} = this.props;
  ...
  <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
  ...
}