CODEWITHSUNDEEP
react-nativereact-hooksreact-component
MisseMask
MisseMask

Reputation: 459

Convert react component into a funcitonal component with hooks

I'm trying to rewrite a React Component into a funcitonal component with hooks. The component I'm trying to rewrite is the one found here:

https://github.com/SHISME/react-native-draggable-grid#usage

The component is working as expected when following the usage example, but after converting the component I get an error on the <DraggableGrid line, saying:

Invariant Violation: [335,"RCTView",{"height":"<<NaN>>"}] is not usable as a native method argument

What I've done so far:

const DraggableTest = (props) => {
  const [items, setItems] = useState({
    data: [
      {name: '1', key: 'one'},
      {name: '2', key: 'two'},
      {name: '3', key: 'three'},
      {name: '4', key: 'four'},
      {name: '5', key: 'five'},
      {name: '6', key: 'six'},
      {name: '7', key: 'seven'},
      {name: '8', key: 'eight'},
      {name: '9', key: 'night'},
      {name: '0', key: 'zero'},
    ],
  });

  const render_item = (item: {name: string, key: string}) => {
    return (
      <View style={styles.item} key={item.key}>
        <Text style={styles.item_text}>{item.name}</Text>
      </View>
    );
  };

  return (
    <View 
      style={{height: 100}}
      style={{height: props.height}} // When trying parent nbr 2
      >
      <DraggableGrid
        style={{height: 200}}
        style={{height: props.height}} // When trying parent nbr 2
        height={200}
        numColumns={4}
        renderItem={render_item}
        data={items}
        onDragRelease={(data) => {
          setItems({data});
        }}
      />
    </View>
  );
};
export default DraggableTest;

The parents I've tried:

<DraggableTest style={{height: 200}} />
<DraggableTest height={200} />

I'm also not entirely sure what to do with the interfaces (if needed?).

What am I missing regarding the height error? Is the DraggableGrid somehow trying to get a height value from the wrapping component? Is there a height value that not (yet?) has been initiated?

Have an awesome day! :)

Upvotes: 0

Views: 41

Answers (1)

danihazler
danihazler

Reputation: 409

You can't add style like this in the component. You would need to pass it as a props, like so:

<DraggableTest height={200} />

and add like this:

const DraggableTest = (props) => {

...

  return (
     <div style={{ height: props.height}} >
       //more code here
     </div>
  )
}

Upvotes: 1

Related Questions