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

omairys commented 2 years ago

Steps to reproduce

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

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

{ status === 'connected' && <> { setMaxLocal(!maxLocal) }}> { !showNoCam && } { waiting ? Your Practitioner will be with you shortly

                      :
                      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 commented 1 year ago

Any update on this issue ?

omairys commented 1 year ago

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>

blackuy / react-native-twilio-video-webrtc