Navigate User To New Screen On Listitem Click React Native

I am trying to navigate user to next screen when user click on list item. I am trying to make use of Navigator in this , i am newbie to react , there is Redux and Flux two differen

Solution 1:

Using "React Navigation" should help you to do the trick.

For more information, you can find it here: https://reactnavigation.org

Cheers,

====== UPDATE ======

I believe the way you set up the Today component is incorrect, and also your question is unclear, it took me a while to understand what you're wanting to do.

Anyway, Today component should be a StackNavigator if you want to open a detail screen from it, and it will control 2 screens (ListScreen and DetailScreen):

constTodayView=StackNavigator({List: {
    screen:ListScreen,
  },Detail: {
    screen:DetailScreen,
  },});

Then setup your screens like this:

classListScreenextendsComponent {
  static navigationOptions = {
    title: 'List',
  }

  constructor(props , context) {
    super(props , context);
    this.goToDetailScreen = this.goToDetailScreen.bind(this);
  }

  goToDetailScreen() {
    this.props.navigation.navigate('Detail');
  }

  render() {
    return (
      <TouchableOpacityonPress={() => this.goToDetailScreen()}>
        <Text>GO TO DETAIL</Text></TouchableOpacity>
    );
  }
}

classDetailScreenextendsComponent {
  static navigationOptions = {
    title: 'Detail',
  }

  render() {
    return (
      <TouchableOpacityonPress={() => this.props.navigation.goBack()}>
        <Text>BACK TO LIST SCREEN</Text></TouchableOpacity>
    );
  }
}

There is an example calling "StacksInTabs" in their Github repo, that you might want to take a look at it: https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js

Cheers,

Solution 2:

Finally it works , this is how i do following change in code . :-

<Viewstyle={styles.container}><ListViewdataSource={this.state.moviesData}renderRow={this.renderRow.bind(this)}enableEmptySections={true}style={styles.ListViewcontainer}
                          /></View>

I just added .bind(this) function to renderRow.

Rest is Same :-

renderRow(rowData){
            return (
              <Viewstyle={styles.thumb} ><TouchableOpacityonPress={()=>this.goDeatilPage(rowData)}>
                <Imagesource={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
                  resizeMode="cover"style={styles.img} /><Textstyle={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text></TouchableOpacity></View>

            );
          }
goDeatilPage = (rowData) => {
   alert('hi');
   AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
       this.props.navigation.navigate('MovieDeatilScreen');
     }

Thanks @Goon for your Time i highly Appreciate your effort. Thank you Brother.

Solution 3:

Use React Navigation for navigate screen, it is very Easy-to-Use,

• Create 3 class in react native

1. defined navigator class 2.first screen 3.navigate screen

1.Basic.js

import {
  StackNavigator,
} from 'react-navigation';

constBasicApp= StackNavigator({
  Main: {screen: Movielistiing},
  Detail: {screen: Movielistdeatilrouter},
});
module.exports = BasicApp;

2.Movielistiing.js

classMovielistiingextendsReact.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Buttontitle="Go to movie detail"onPress={() =>
          navigate('Detail', { name: 'Jane' })
        }
      />
    );
  }
}

3.Movielistdeatilrouter.js

classMovielistdeatilrouterextendsReact.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });
  render() {
    const { goBack } = this.props.navigation;
    return (
      <Buttontitle="Go back"onPress={() => goBack()}
      />
    );
  }
}