CODEWITHSUNDEEP
reactjsreact-native
Andru
Andru

Reputation: 6184

Pass event info to child component as props

I want to pass the height of the parent component to one of its children. I eventually managed to do so with saving event.nativeEvent.layout.height in the state of the parent and passing that as a prop to the child (here: mySubComponent2).

However, since the height of the parent will not change after rendering, I believe the height should rather be in props. How can I pass myHeight to MySubComponent2 as a prop? Here's what I tried and what doesn't work:

render: function() {
  return (
    <View onLayout={(event) => {
      var myHeight = event.nativeEvent.layout.height;
    }}>
      <MySubComponent1 />
      <MySubComponent2 parentHeight={this.myHeight} />
    </View>
  );
},

What I actually want to do is have two flexDirection: 'column' within a flexDirection: 'row' View and let the two child-components have the same length, e.g. something like on the following picture:

two_columnDirection_components_in_rowDirection_comp

Upvotes: 0

Views: 650

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53681

You could do something like this to achieve what you're looking for (tested):

getInitialState() {
  return {
    height:0
  }
},

measure() {
  this.refs.mycomponent.measure((a, b, width, height) => {
    this.setState({ height })
   })
},

<View ref="mycomponent" style={{ height: 300 }} onLayout={ () => this.measure() }>
  <MySubComponent2 parentHeight={this.state.height} />
</View>

Upvotes: 1

Related Questions