title: getting error -> Hooks can only be called inside the body of a function component. while running a react native web project
body: <p>I am trying to run a react-native-web project, when I try running it, I get the following error</p>
  <p><a href="https://i.stack.imgur.com/keXPu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/keXPu.png" alt="enter image description here" /></a></p>
  <p>When I stacktraced I found my error is exactly happening in the following code</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import {
    SafeAreaView,
    KeyboardAvoidingView,
    TextInput,
    View,
    Text,
    Image,
    Button,
    TouchableOpacity,
  } from 'react-native';
  import qs from 'qs';
  import {Images} from '../../assets';
  import {API} from '../../api';
  import {disabledColor, successColor} from '../../config/colors';
      export default function LoginScreenWeb(props) {
        const {navigation} = props;
        const [firstName, setFirstName] = useState('');
        const [mobile, setMobile] = useState('');
        const [width, getWidth] = useState(null);
        const SetWidth = () =&gt; {
          getWidth(window.screen.availWidth);
        };
      
        // useEffect(() =&gt; {
        //   // SetWidth();
        //   // setInterval(SetWidth, 1000);
        // }, []);
      
        // const onHandlePress = () =&gt; {
        //   async function post() {
        //     try {
        //       const response = await API.postFormData(
        //         `/users/signup`,
        //         qs.stringify({
        //           firstName,
        //           mobile,
        //         }),
        //       );
        //       navigation.navigate('otp');
        //       localStorage.setItem('mobile', mobile);
        //       console.log('loginRes--', response);
        //     } catch (e) {
        //       console.log(e);
        //     }
        //   }
        //   post();
        // };
      
        return (
          &lt;SafeAreaView style={styles.container}&gt;
            &lt;View
              // style={
              //   width &gt; 414 ? styles.inner_container_web : styles.inner_container_mob
              // }
              &gt;
              &lt;Image
                source={Images.login_web}
                // style={width &gt; 414 ? styles.image_web : styles.image_mob}
              /&gt;
              &lt;KeyboardAvoidingView&gt;
                &lt;View style={{padding: 16}}&gt;
                  &lt;Text style={styles.textLabel}&gt;Name&lt;/Text&gt;
                  &lt;TextInput
                    placeholder=&quot;Enter your name&quot;
                    style={styles.textInput}
                    // value={firstName}
                    // onChangeText={(firstName) =&gt;
                    //   setFirstName(firstName.replace(/[^A-Za-z]/g, ''))
                    // }
                  /&gt;
                  &lt;Text style={styles.textLabel}&gt;+91&lt;/Text&gt;
                  &lt;TextInput
                    placeholder=&quot;Enter your phone number&quot;
                    style={styles.textInput}
                    maxLength={10}
                    keyboardType=&quot;number-pad&quot;
                    // value={mobile}
                    // onChangeText={(mobile) =&gt;
                    //   setMobile(mobile.replace(/[^0-9]/g, ''))
                    // }
                  /&gt;
                  &lt;View style={{alignItems: 'center'}}&gt;
                    {/* {firstName &amp;&amp; mobile.length === 10 ? ( */}
                      &lt;TouchableOpacity
                        // onPress={() =&gt; onHandlePress()}
                        style={styles.enable_continue}&gt;
                        &lt;Text style={styles.continue}&gt;Continue&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                    {/* ) : ( */}
                      &lt;TouchableOpacity style={styles.disble_continue}&gt;
                        &lt;Text style={styles.continue}&gt;Continue&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                    {/* )} */}
                  &lt;/View&gt;
                  &lt;View style={{flexDirection: 'row'}}&gt;
                    &lt;View style={styles.cookies} /&gt;
                    &lt;Text style={{fontSize: '12px'}}&gt;
                      By continuing you agree to the Terms of Service and Privacy
                      policy
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/KeyboardAvoidingView&gt;
            &lt;/View&gt;
          &lt;/SafeAreaView&gt;
        );
      }
  </code></pre>
  <p>As soon as I uncomment the useeffect part I get the  Hooks can only be called inside the body of a function component. error however I am using a functional component here.</p>
  <p>Am unable to figure how to fix the error, could anyone help me out here, thanks in advance, let me know if anything else is required for clarity</p>
  <p>Stacktrace -&gt;
  <a href="https://i.stack.imgur.com/BZYvE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZYvE.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/PHjV6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PHjV6.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/4qY0h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4qY0h.png" alt="enter image description here" /></a></p>