Search code examples
react-nativereact-native-router-flux

React Native Router Flux: passing params between scenes


I have a list of items (jobs) and when an item (job) is being selected, a new scene is being opened. I want the ID of the selected item to be passed from the scene with the list to the other scene with the details about the selected item (job) without using Redux.

Router

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import JobsList from './components/JobsList';
import Job from './components/Job';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="jobs" component={JobsList} initial />
      <Scene key="Job" component={Job} title="Test" />
    </Router>
  );
};
export default RouterComponent;

Jobs list

import React, { Component } from 'react';

export default class JobsList extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => { Actions.Job({ jobId: jobId }) }}>
      ...
      </TouchableOpacity>
    );
  }
}

Job

import React, { Component } from 'react';
export default class Job extends Component {
  constructor() {
    super();

    this.state = {
      job: {}
    };

    axios.get(
      // PROBLEM: this.props.jobId is empty
      `http://api.tidyme.dev:5000/${this.props.jobId}.json`,
      {
        headers: { Authorization: 'Token token=123' }
      }
    ).then(response => this.setState({
      job: response.data
    }));
  }

  render() {
    return (
      <Text>{this.state.job.customer.firstName}</Text>
    );
  }
} 

Solution

  • You should call super(props) if you want to access this.props inside the constructor.

    constructor(props) {
      super(props);
      console.log(this.props);
    }