CODEWITHSUNDEEP
javascriptreact-nativenavigation
michasaucer
michasaucer

Reputation: 5248

stack navigator return false when want to go to view

My application, having launched, initially opens the HomeScreen component.

My App.js file looks like this:

const App = createStackNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'HomeScreen',
    },
    List: {
      screen: List,
      navigationOptions: {
        title: 'List',
      },
    },
  },
});

My HomeScreen.js file looks like this:

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Cars: [],
    };
    var d = new Database();
    d.initDB();
    let cars = [];
    d.listCar().then(data => {
      cars = data;
      this.setState({
        cars,
      });
    });
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          flexDirection: 'column',
        }}>
        <MyText text="Auta" />
        <Button
          title="Audi"
          onPress={() =>
            console.log(this.props.navigation.navigate('List')) //console log for debuging
          }
        />
        <Button
          title="Volkswagen"
          onPress={() =>
            this.props.navigation.navigate('List', {car_id: 1}) //want to pass props to List.js
          }
        />
      </View>
    );
  }
}

And my List.js:

const List = props => {
  return (
    <View>
      <Text>{props.car_id}</Text>
    </View>
  );
};

When I click the button with the title prop Audi in my HomeScreen component, the console.log statement as part of the button callback returns: false.

When I click the buttons Volskwagen or Audi nothing happens.

I want to go from HomeScreen component to the List component and pass car_id from HomeScreen to List with props.

Why does the code above not redirect me from the HomeScreen component to the List component?

Upvotes: 1

Views: 247

Answers (1)

Michał Pierzchała
Michał Pierzchała

Reputation: 1850

It seems like you've put List into HomeScreen value, while React Navigation expects it to be declared on the same level as HomeScreen, like this:

const App = createStackNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'HomeScreen',
    },
  }
  List: {
    screen: List,
    navigationOptions: {
      title: 'List',
    },
  },
});

Upvotes: 3

Related Questions