React Native Native Base ListItem onPress method

Question

So I'm having a problem with navigating to specific screens, I want to go to the some other screen from current screen when ListItem on the current screen is pressed. But when I press the item, nothing happens.

Here's my code:

Folder Exercises -> index.js

import React, {Component} from 'react';
import Exercises from './Exercises';
import ExercisePushUps from './ExercisePushUps';
import {StackNavigator} from 'react-navigation';

export default (DrawNav = StackNavigator({
  ExercisePushUps: {screen: ExercisePushUps}
}));

Folder Exercises -> ExercisePushUps.js

import React from "react";
import { StatusBar } from "react-native";
import {Drawer} from 'native-base';
import {Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail} from "native-base";
import LocalizedStrings from 'react-native-localization';
import {DrawerNavigator, NavigationAction} from 'react-navigation';
import SideBar from '../SideBar/SideBar';
export default class ExercisePushUps extends React.Component {
  render() {  
    return (
      <Container>
        <Header androidStatusBarColor="#5D4037" style={styles.headerStyle}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Test</Title>
          </Body>
          <Right />
        </Header>


        <Content>

        </Content>
      </Container>
    );
  }
}

const styles = {
  headerStyle: {
    backgroundColor: '#795548'
}
}

Folder Exercises -> Exercises.js (ListItem located here)

import React from "react";
import { StatusBar } from "react-native";
import {Drawer} from 'native-base';
import {Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail, Separator } from "native-base";
import LocalizedStrings from 'react-native-localization';
import {DrawerNavigator, NavigationAction} from 'react-navigation';
import SideBar from '../SideBar/SideBar';
import { StackNavigator } from "react-navigation";
import ExercisePushUps from './ExercisePushUps';

export default class Exercises extends React.Component {
  render() {  
    return (
      <Container>
        <Header androidStatusBarColor="#5D4037" style={styles.headerStyle}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>{strings.toolbarTitle}</Title>
          </Body>
          <Right />
        </Header>


        <Content>
        <Separator bordered style={styles.separatorStyle}>
            <Text>{strings.separator1}</Text>
          </Separator>

          <ListItem style={styles.listItemStyle} onPress={() => this.props.navigation.navigate("ExercisePushUps")}>
          <Thumbnail style={styles.imageStyle} square size={65} source={ChestImg1} />
              <Body>
                <Text style={styles.textTitleStyle}>{strings.chest1}</Text>
              </Body>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

So when I press on that item on the list absolutely nothing happens.

What have I done wrong?

can you console.log(this.props) from Excersices.js? https://reactnavigation.org/docs/navigators/custom Make sure you are initializing your navigation somewhere and passing navigation props down. — Gavin Thomas, Dec 17 '17 at 17:51

score 0 · Answer 1 · answered Jan 10 '18 at 09:52

<ListItem/> onPress is working properly. Pasting my modified code

index.js

import React, { Component } from 'react';
import Exercises from './Exercises';
import ExercisePushUps from './ExercisePushUps';
import { StackNavigator } from 'react-navigation';

export default (DrawNav = StackNavigator({
  ExercisePushUps: { screen: ExercisePushUps },
  Exercises: { screen: Exercises }
}, {
    navigationOptions: { header: null }
  }));

Exercises.js

import React from "react";
import { StatusBar } from "react-native";
import { Drawer } from 'native-base';
import { Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail, Separator } from "native-base";
import { DrawerNavigator, NavigationAction } from 'react-navigation';
import { StackNavigator } from "react-navigation";
import ExercisePushUps from './ExercisePushUps';

export default class Exercises extends React.Component {
    render() {
        return (
            <Container>
                <Header androidStatusBarColor="#5D4037" >
                    <Left>
                        <Button
                            transparent>
                            <Icon name="menu" />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Exercises</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <Separator bordered >
                        <Text>Separator 1</Text>
                    </Separator>
                    <ListItem style={{ marginLeft: 0 }} onPress={() => this.props.navigation.navigate("ExercisePushUps")}>
                        <Thumbnail square size={65} source={require('./logo.png')} />
                        <Body>
                            <Text>Text 1</Text>
                        </Body>
                    </ListItem>
                </Content>
            </Container>
        );
    }
}

ExercisePushUps.js

import React from "react";
import { StatusBar } from "react-native";
import { Drawer } from 'native-base';
import { Button, Text, Container, Card, CardItem, Body, Content, Header, Title, Left, Icon, Right, List, ListItem, Thumbnail } from "native-base";
import { DrawerNavigator, NavigationAction } from 'react-navigation';
export default class ExercisePushUps extends React.Component {
    render() {
        return (
            <Container>
                <Header androidStatusBarColor="#5D4037">
                    <Left>
                        <Button
                            transparent
                        >
                            <Icon name="menu" />
                        </Button>
                    </Left>
                    <Body>
                        <Title>ExercisePushUps</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <Button
                        transparent
                        onPress={() => this.props.navigation.navigate("Exercises")}>
                        <Text> Go to screen Exercises</Text>
                    </Button>
                </Content>
            </Container>
        );
    }
}

const styles = {
    headerStyle: {
        backgroundColor: '#795548'
    }
}

Gif

React Native Native Base ListItem onPress method

1 Answers1