CODEWITHSUNDEEP
react-native
RoktSe
RoktSe

Reputation: 469

Invalid hook call hooks can only be called inside of the body of a function component

I am currently implementing a modal using the Modalize library. I'm using Hooks for the requests but as soon as I'm going to call the Modalize component it returns the following error. I've spent a lot of time and haven't figured out where the problem is

enter image description here

import React, { useRef } from 'react';
import { Modalize } from 'react-native-modalize';

export default class MyScreen extends React.Component {

    render() {

        const modalizeRef = useRef(null);

        function onOpen() {
            modalizeRef.current?.open();
        }

        return (
            <View>
               <TouchableOpacity onPress={onOpen}>        
                     <Text>click me</Text>
               </TouchableOpacity>

                <Modalize
                    ref={modalizeRef}
                    snapPoint={180}
                    >
                    <View
                        style={{
                            flex: 1,
                            height: 100,
                            flexDirection: 'row',
                        }}>
                        <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                            Button 01
                        </TouchableOpacity>

                        <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                            Button 02
                        </TouchableOpacity>

                    </View>
                </Modalize>
            </View>
        );
    }
}

Upvotes: 0

Views: 249

Answers (3)

RoktSe
RoktSe

Reputation: 469

I managed to solve it by doing this using the refs callback

  export default class MyScreen extends React.Component {
    constructor(props) {
        super(props);
        this.modalizeRef = React.createRef();
    }

    onOpen() {
        this.modalizeRef.current?.open();
    }

}


<View>
          <TouchableOpacity onPress={this.onOpen.bind(this)}>        
                <Text>click me</Text>
          </TouchableOpacity>

          <Modalize
              ref={this.modalizeRef}
              snapPoint={180}
              >
              <View
                  style={{
                      flex: 1,
                      height: 100,
                      flexDirection: 'row',
                  }}>
                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                      Button 01
                  </TouchableOpacity>

                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                      Button 02
                  </TouchableOpacity>

              </View>
          </Modalize>
      </View>

Upvotes: 0

Glitch_Znab
Glitch_Znab

Reputation: 586

From what I can gather you want a ref. there are 2 ways

  1. declare it in constructor using createRef(no import needed)

    constructor(props){
 this.modalizeRef = React.createRef();
}

  2. assign it in the component call

     <Modalize
    ref={(ref) => {
       this.modalizeRef = ref;
     }}
  />

Upvotes: 1

Prateek Thapa
Prateek Thapa

Reputation: 4938

You're only supposed to use hooks in functional components. Read the docs here

export default function MyScreen() {
  const modalizeRef = useRef(null);

  function onOpen() {
      modalizeRef.current?.open();
  }

  return (
      <View>
          <TouchableOpacity onPress={onOpen}>        
                <Text>click me</Text>
          </TouchableOpacity>

          <Modalize
              ref={modalizeRef}
              snapPoint={180}
              >
              <View
                  style={{
                      flex: 1,
                      height: 100,
                      flexDirection: 'row',
                  }}>
                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                      Button 01
                  </TouchableOpacity>

                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                      Button 02
                  </TouchableOpacity>

              </View>
          </Modalize>
      </View>
  );

}

Upvotes: 1

Related Questions