React Native Sample Code for videosdk.live is returning error "Invalid hook call. Hooks can only be called inside..."

Question

I have downloaded the sample code for Videosdk.live. The 2 Sample code I downloaded were the sample code for the SERVER (videosdk-rtc-nodejs-sdk-example) and the sample code for REACT-NATIVE (videosdk-rtc-react-native-sdk-example-master).

I first run the SERVER code via npm start and it starts the server listening at localhost:9000 for any api calls and of course making sure to add my API KEY, etc.

I then start the REACT-NATIVE code. The REACT-NATIVE app then successfully call the server to get the TOKEN and then successfully call the validateMeeting function provided in the sample which actually creates a new meeting. The id for the meeting is then saved into a variable called meetingId within the code.

Then finally using that valid meetingId the sample code finally uses the hooks provided by videosdk.live to start a meeting, e.g. MeetingProvider However this is when the error occurs.....

This is the part of the code where the error occurs:

return token ? (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#F6F6FF' }}>
            <MeetingProvider
                config={{
                    meetingId: meetingId,
                    micEnabled: false,
                    webcamEnabled: true,
                    name: 'Test User',
                    notification: {
                        title: 'Code Sample',
                        message: 'Meeting is running.',
                    },
                }}
                token={token}
            >
                <MeetingContainer setToken={setToken} />
            </MeetingProvider>
        </SafeAreaView>
    ) : null

and this is the actual error shown:

>     ExceptionsManager.js:180 Error: 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
>     See https://fb..... for tips about how to debug and fix this problem.
>     
>     This error is located at:
>         in MeetingProvider (at react-native-sdk/index.js:76)
>         in MeetingProvider (at App.js:69)
>         in RCTSafeAreaView (at SafeAreaView.js:51)
>         in SafeAreaView (at App.js:68)
>         in App (at renderApplication.js:47)
>         in RCTView (at View.js:34)
>         in View (at AppContainer.js:107)
>         in RCTView (at View.js:34)
>         in View (at AppContainer.js:134)
>         in AppContainer (at renderApplication.js:40)

How to fix this?

Answer 1

This issue occured in older version of SDK. Plese update the React native SDK package for resolving this issue.

Npm package: https://www.npmjs.com/package/@videosdk.live/react-native-sdk

React native code sample: https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example