CODEWITHSUNDEEP
reactjsreact-native
user16861088
user16861088

Reputation:

this.props.navigation is not working in React Native

I have the ff stacknavigation on my App.js:

<NavigationContainer>
          <Stack.Navigator
            initialRouteName={'BookListing'}>
            <Stack.Screen name="Book List" component={Tabs} />
            <Stack.Screen
              name="BookDetailScreen"
              component={BookDetail}
            />
          </Stack.Navigator>
        </NavigationContainer>

Now on my BookList Screen file, I created an onPressHandler function so I can navigate on the details screen and probably pass the data from redux state.

class BookListingScreen extends Component {
  componentDidMount() {
    this.props.fetchBooks();
  }

  onPressHandler = () => {
    this.props.navigation.navigate('BookDetailScreen');
  };

  render() {
    let content = (
      <BookList
        onPress={this.onPressHandler}
        books={this.props.randomBooks.books}
      />
    );
    if (this.props.randomBooks.isFetching) {
      content = <ActivityIndicator size="large" />;
    }
    return (
      <View style={styles.container}>
        <View>{renderHeader()}</View>
        <View>{content}</View>
      </View>
    );
  }
}

Here's my book list component:

export default class BookList extends Component {
  _keyExtractor = item => item.cover_i;
  render() {
    return (
      <FlatList
        style={{flex: 1}}
        data={this.props.books}
        keyExtractor={this._keyExtractor}
        renderItem={({item} = this.props.books) => {
          return (
            <BookItem onPressHandler={this.props.onPressHandler} item={item} />
          );
        }}
      />
    );
  }
}

Now on my item list, I am trying to use a TouchableOpacity to go the Details Screen.

export default class BookItem extends Component {
  render() {
    const {title, author_name, oclc = []} = this.props.item;
    const onPressHandler = this.props.onPressHandler;
    return (
      <TouchableOpacity onPress={() => onPressHandler}>
        <View style={styles.cardContainerStyle}>
          <View style={{paddingRight: 5}}>
            <Text style={styles.cardTextStyle}>{title}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

However, this doesn't go to the Details Screen. Any idea what's happening here?

Upvotes: 0

Views: 80

Answers (1)

Omar Khaled
Omar Khaled

Reputation: 499

change this in BookItem

onPress={() => onPressHandler}

to this

onPress={() => onPressHandler()}

or

onPress={onPressHandler}

Upvotes: 1

Related Questions