Usage instructions

[s2t2]

Hi, I'm hoping you might be able to help me troubleshoot basic usage of this package (in react-native).

This is an example working component:

import React, { Component } from 'react';
import {View, Text} from 'react-native';

export default class MyComponent extends Component {
  render(){
    return (
      <View>
        <Text>Hello world</Text>
      </View>
    )
  }
}

This is my first attempt to use ReactHeight, which throws Expected a component class, got [object Object].:

import React, { Component } from 'react';
import {View, Text} from 'react-native';
import ReactHeight from 'react-height';

export default class MyComponent extends Component {
  render(){
    return (
      <ReactHeight onHeightReady={height => console.log(height)}>
        <View>
          <Text>Hello world</Text>
        </View>
      </ReactHeight>
    )
  }
}

What am I doing wrong?

[chriswhawkins]

@s2t2, try:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import ReactHeight from 'react-height';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 0,
    };
    this.onHeightReady = this.onHeightReady.bind(this);
  }

  onHeightReady(height) {
    this.setState({ height });
  }

  render() {
    return (
      <ReactHeight onHeightReady={height => console.log(height)}>
        <View>
          <Text>Hello world</Text>
        </View>
      </ReactHeight>
    );
  }
}

export default MyComponent;

[s2t2]

Thanks. I'll try this out, hopefully tonight, and let you know how it goes.

On Oct 25, 2016 2:59 PM, "Chris Hawkins" notifications@github.com wrote:

@s2t2 https://github.com/s2t2, try:

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import ReactHeight from 'react-height';

class MyComponent extends Component { render() { return ( <ReactHeight onHeightReady={height => console.log(height)}>

Hello world

  </ReactHeight>
);

} }

export default MyComponent;

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nkbt/react-height/issues/18#issuecomment-256141598, or mute the thread https://github.com/notifications/unsubscribe-auth/ABRGp1J3ZMMc8vqLHAvJYjGu6AK19m8tks5q3lGNgaJpZM4Kcv1g .

[s2t2]

with that exact code, i'm seeing expected a component class, got [object Object]

when i removed the outer ReactHeight, the error went away and text was rendered. this suggests the issue may be related to that component.

edit:

inspection viareact-native log-android produced: Warning: Failed prop type: Required prop onHeightReady was not specified in ReactHeight.

[chriswhawkins]

Oh, sorry... should be more like: onHeightReady={this.onHeightReady}

Here's a simplified example that's a little closer to what my actual use case was... maybe it can help: http://codepen.io/chriswhawkins/pen/gwEzdg

[s2t2]

thanks for the update. i tried implementing the named function and it produces the same error. i notice you're using normal react whereas i'm using react-native. wondering if there is a react-native compatibility issue...