java.lang.ClassCastException: com.twiliorn.library.TwilioVideoPreviewManager cannot be cast to com.facebook.react.uimanager.ViewGroupManager

[omairys]

Steps to reproduce

1. Follow the steps of the configuration suggested in the example.
2. I am able to obtain the token and onRoomDidConnect

` (status === 'connected' || status === 'connecting') &&

{
status === 'connected' &&

              <>

                <View style={styles.remoteGrid}>
                  <View style={maxLocal ? { width: '100%', height: '140%', zIndex: 10000 } : styles.localVideo}>
                    <TwilioVideoLocalView
                      ref={localRef}
                      enabled={true}
                      style={[styles.localVideo]}
                      scaleType={"fill"}
                    >
                      <TouchableOpacity style={{ position: 'absolute', left: '90%' }} onPress={() => { setMaxLocal(!maxLocal) }}>
                        <Ionicons
                          name={maxLocal ? 'md-contract' : 'md-expand'}
                          size={25}
                          color='white'
                          style={{ padding: '2%' }}
                        />
                      </TouchableOpacity>
                      {
                        !showNoCam &&
                        <Image
                          source={{
                            uri: 'https://*********/vas_nocam.png'
                          }}
                          style={{
                            width: '175%',
                            height: '150%',
                            resizeMode: 'contain',
                            alignSelf: 'center'
                          }}

                        />
                      }
                    </TwilioVideoLocalView>
                  </View>
                  {
                    waiting ?
                      <View style={styles.remoteView}
                      >


                        <ActivityIndicator
                          style={{
                            position: 'relative',
                          }}
                          color={colors.primaryColor}
                          size='large'
                        />
                        <Text style={{ color: 'white', marginTop: '5%' }}
                        >Your Practitioner will be with you shortly</Text>

                      </View>

                      :
                      Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
                        return (
                          <TwilioVideoParticipantView
                            enabled={true}
                            key={trackSid}
                            trackIdentifier={trackIdentifier}
                            style={maxRemote ? { top: '1%', width: '97%', height: '90%', zIndex: 10000, alignSelf: 'center' } : styles.remoteView}
                            scaleType={"fill"}
                          >
                            <TouchableOpacity style={{ position: 'absolute', top: '1%', left: '90%' }} onPress={() => { setMaxRemote(!maxRemote) }}>
                              <Ionicons
                                name={maxRemote ? 'md-contract' : 'md-expand'}
                                size={25}
                                color='white'
                                style={{ padding: '2%' }}
                              />
                            </TouchableOpacity>

                          </TwilioVideoParticipantView>
                        );
                      })}
                  {/**
                       * 
                       * Use the function below if ever facetime like interface is desired 
                       */}
                  { }
                  { }
                  <View style={menuOpen ? styles.optionsContainer : [styles.optionsContainer, { top: '100%' }]}>
                    <TouchableOpacity
                      style={styles.optionButton}
                      onPress={_onEndButtonPress}>
                      <MaterialIcons
                        name='call-end'
                        size={25}
                        color='red'
                        style={{ padding: '2%' }}
                      />
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={styles.optionButton}
                      onPress={_onMuteButtonPress}>
                      {isAudioEnabled ?
                        <MaterialIcons
                          name='mic-none'
                          size={25}
                          color='white'
                          style={{ padding: '2%' }}
                        /> :
                        <MaterialIcons
                          name='mic-off'
                          size={25}
                          color='white'
                          style={{ padding: '2%' }}
                        />}
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={styles.optionButton}
                      onPress={_onFlipButtonPress}>
                      <MaterialIcons
                        name='flip-camera-ios'
                        size={25}
                        color='white'
                        style={{ padding: '2%' }}

                      />
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={styles.optionButton}
                      onPress={_onDisableVideoButtonPress}>
                      {
                        isVideoEnabled
                          ?
                          <MaterialIcons
                            name='videocam'
                            size={25}
                            color='white'
                            style={{ padding: '2%' }}

                          />
                          :
                          <MaterialIcons
                            name='videocam-off'
                            size={25}
                            color='white'
                            style={{ padding: '2%' }}

                          />
                      }

                    </TouchableOpacity>
                    { }
                  </View>
                </View>
              </>

            }
          </View>
        }
      </>`

Expected behaviour

Activate the camera and make a video call

Actual behaviour

Environment

• Node.js version: v16.15.0
• React Native version: 0.64.3
• React Native platform + platform version: Android 10

react-native-twilio-video-webrtc

Version: npm version or "master"

[GittyAjay]

Any update on this issue ?

[omairys]

Yes, The error is in how this part of the code is written. So, I remove the tag </TwilioVideoParticipantView> and the same for </TwilioVideoLocalView>. And that's it. The problem that I have now is expanding and contracting the screen in Android. I hope it helps.

                          <TwilioVideoParticipantView
                            enabled={true}
                            key={trackSid}
                            trackIdentifier={trackIdentifier}
                            style={maxRemote ? { top: '1%', width: '97%', height: '90%', zIndex: 10000, alignSelf: 'center' } : styles.remoteView}
                            scaleType={"fill"}
                          >
                            <TouchableOpacity style={{ position: 'absolute', top: '1%', left: '90%' }} onPress={() => { setMaxRemote(!maxRemote) }}>
                              <Ionicons
                                name={maxRemote ? 'md-contract' : 'md-expand'}
                                size={25}
                                color='white'
                                style={{ padding: '2%' }}
                              />
                            </TouchableOpacity>

                          </TwilioVideoParticipantView>