We are developing a smartphone app that uses React-Native. I used react-native-safe-area-context to get the height of the notch on the iPhone 12. However, I get the following error:

```

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This error is located at:
    in Screen (created by ConnectFunction)
    in ConnectFunction (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by ForwardRef(CardSheet))
    in ForwardRef(CardSheet) (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by Card)
    in RCTView (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RCTView (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RCTView (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack (created by Context.Consumer)
    in KeyboardManager (created by Context.Consumer)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (created by Context.Consumer)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by StackView)
    in StackView (created by StackView)
    in StackView
    in Unknown (created by Navigator)
    in Navigator (at create-redux-container.js:93)
    in NavigatorReduxWrapper (created by ConnectFunction)
    in ConnectFunction (at AppController.js:332)
    in AppController (created by ConnectFunction)
    in ConnectFunction (at prj/index.js:16)
    in Provider (at prj/index.js:15)
    in Root (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

useSafeAreaInsets
    SafeAreaContext.tsx:104:36
Screen#getUnitTextSize
    Screen.js:804:2
Screen#constructor
    Scree.js:115:25
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
forEach
    [native code]:0
Refresh.performReactRefresh
    setUpReactRefresh.js:43:6
setTimeout$argument_0
    require.js:609:10
callFunctionReturnFlushedQueue
    [native code]:0

```

code

```

import React, {Component} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';

class Screen extends Component {
getNotchHeight() {
    const insets = useSafeAreaInsets();
    console.log('insets', insets);
  }
}

componentDidMount() {
    this.getNotchHeight();
  }
}

```

The development environment is as follows.

* iOS14.4(Simulator iPhone12)
* react：16.9.0
* react-native：0.61.5
* react-native-safe-area-context：3.2.0
* XCode：12.4 (12D4e)
* node.js：12.3.1

I have tried the following.

* Call in componentDidMount
* Change the version of react-native-safe-area-context to 0 series

Please let us know if you have anything else to try.