Shoutem pass props to another screen

Question

I have successfully passed props to another screen, but how do I use the props globally on the second screen?

I need to be able to use the props passed from screen 1 in all functions including render(), as I am making a fetch call with data from the props and using the same props data I the render() call.

For example, I need to do this:

constructor(props) {
    super(props);
    this.state = {
      data: [],
      rowData: this.props,
    }
  }

  getData() {
    this.setState({
      rowData: this.props
    });
    return fetch('https://mywebsite.com/'+this.state.rowData.something+'/myotherdata')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          data: responseJson.data
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount() {
    this.getData();
  }

  render() {      

    return (
      <ScrollView>
        <Image styleName="large-banner" source={{ uri: rowData.image &&
        rowData.image ? rowData.image : undefined }}>
          <Tile>
            <Title>{rowData.name}</Title>
            <Subtitle>{rowData.createdAt.datetime}</Subtitle>
          </Tile>
        </Image>

        <Row>
          <Text>Company: {rowData.company}</Text>
        </Row>

        <Divider styleName="line" />

        <Row>
          <Icon name="laptop" />
          <View styleName="vertical">
            <Subtitle>Visit webpage</Subtitle>
            <Text>{rowData.url}</Text>
          </View>
          <Icon name="right-arrow" />
        </Row>

        <Divider styleName="line" />

        <View style={{paddingTop: 20}}>
          <Progress.Bar progress={this.state.data.progress * .1} width={200} />
        </View>

        <Divider styleName="line" />

      </ScrollView>
    );
  }

Obviously, I am not doing something right, but I can't figure it out. What am I doing wrong?

This question explains more about my screens and fetch calls.

EDIT: I made changes based on the answer below and update my code. The screen loads and then gives this error:

undefined is not an object (evaluating 'this.state.data.progress)

for this line:

<Progress.Bar progress={this.state.data.progress * .1} width={200} />

score 2 · Answer 1 · answered Sep 09 '17 at 15:07

2

As far as I know you have 2 options:

1) When you first receive the props you can store them in your component state, then you can refere them anywhere in the current component by calling this.state

2) You can use Redux to store all your data in your Reducer and then they will be available in every component that you instance it in your mapStateToProps and connect.

Which one to choose, it will depend on how many times and how many components you will need to follow this architecture.

You can get more info about Redux in their official docs. Here's a simple example they provide: http://redux.js.org/docs/basics/ExampleTodoList.html

Hope it helps.

answered Sep 09 '17 at 15:07

soutot

3,531
1
18
22

I updated my question but keep getting an error. please see changes above. also, if you have a code example that would be really helpful. – iamthestreets Sep 10 '17 at 13:49
2

You are fetching your data on componentDidMount, so your render method runs before your getData. When your component tries to render it expects this.state.data to be an object containing a 'progress' key, however it was defined as an Array in your constructor. You may have 2 options: 1 call getData in componentWillMount, so it will be triggered before your render method is called. Or you can set your data as an empty object and check if this.state.data is not equal to null before trying to access it. Hope it helps. – soutot Sep 10 '17 at 15:34

Shoutem pass props to another screen

1 Answers1