Could not get React-Native-WebRTC to work - react-native

Question

Need some help running through my codes to make WebRTC work. I am just trying to make a call from one device to the other. Realise I'm not throughly understanding WebRTC. My app crashes when the answer is emitted back.
The socket/emitter I am working with is actually
FeathersJS services. It is serving as my backend, whenever I need to emit, I send a create service and in my backend, feathersJS emit a customEmitter ['offer' 'answer' 'ice-candidate']. Although I am able to receive all emitted events, I am unable to get WebRTC to work. The below are my React-native code:
import React, { useContext, useEffect, useState } from 'react';
import {
View, SafeAreaView, Button, StyleSheet,
} from 'react-native';
import {
RTCPeerConnection,
RTCSessionDescription,
RTCView,
mediaDevices,
} from 'react-native-webrtc';
import ContextApp from '../../context/contextApp';
import FeathersApp, { Services } from '../../Feathers';
const styles = StyleSheet.create({
container: {
backgroundColor: '#313131',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%',
},
text: {
fontSize: 30,
},
rtcview: {
justifyContent: 'center',
alignItems: 'center',
height: '40%',
width: '80%',
backgroundColor: 'black',
},
rtc: {
width: '80%',
height: '100%',
},
toggleButtons: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
},
});
const VideoCallPage = ( props: any ) => {
const { userId } = props;
const { authState } = useContext(ContextApp);
const callService = FeathersApp.service(Services.CALL);
const [callAlert, setCallAlert] = useState<boolean>(false);
const [offerData, setOfferData] = useState<any>();
const configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
const localPC = new RTCPeerConnection(configuration);
const [localStream, setLocalStream] = useState<any>();
const [remoteStream, setRemoteStream] = useState<any>();
const sendToPeer = (messageType: any, payload: any) => {
callService.create({
callType: messageType,
sdp: payload,
caller: authState._id,
answerer: userId,
candidate: payload,
})
}
const createOffer = async () => {
const offer = await localPC.createOffer();
await localPC.setLocalDescription(offer).then(() => console.log('local offer succeeded'));
sendToPeer('offer', localPC.localDescription);
}
const createIceCandidate = () => {
localPC.onicecandidate = e => {
try {
console.log('localPC icecandidate:', e.candidate);
if (e.candidate) {
sendToPeer('ice-candidate', e.candidate)
}
} catch (err) {
console.error(`Error adding remotePC iceCandidate: ${err}`);
}
};
}
const startCall = async () => {
console.log('start call funtion')
const newStream = await mediaDevices.getUserMedia({
audio: true,
video: false,
});
setLocalStream(newStream);
createIceCandidate()
createOffer();
};
const recieveCall = async (incoming: any) => {
console.log('accepting call');
await localPC.setRemoteDescription(new RTCSessionDescription(incoming.sdp));
const answer = await localPC.createAnswer();
await localPC.setLocalDescription(answer).then(() => console.log('localPC desc succeeded'));
sendToPeer('answer', localPC.localDescription);
createIceCandidate();
localPC.addStream(localStream);
localPC.onaddstream = e => {
console.log('remotePC tracking with ', e);
if (e.stream && remoteStream !== e.stream) {
console.log('RemotePC received the stream', e.stream);
setRemoteStream(e.stream);
}
};
};
const recieveAnswer = (payload: any) => {
console.log('recieved answer: ', payload.candidate.sdp)
localPC.setRemoteDescription(new RTCSessionDescription(payload.candidate.sdp));
localPC.onaddstream = e => {
if (e.stream && remoteStream !== e.stream) {
console.log('RemotePC received the stream', e.stream);
setRemoteStream(e.stream);
}
};
}
// alert for any calls
useEffect(() => {
callService.on('ice-candidate', (incoming: any) => {
localPC.addIceCandidate(incoming.data.sdp);
localPC.addStream(localStream);
});
callService.on('offer', async (payload: any) => {
if (payload.data.answerer === authState._id) {
const newStreamForReciever = await mediaDevices.getUserMedia({
audio: true,
video: false,
});
setLocalStream(newStreamForReciever);
setOfferData(await payload.data);
setCallAlert(true);
}
});
callService.on('answer', async (payload: any) => {
if (payload.data.answerer === authState._id) {
console.log(userId, 'answered')
recieveAnswer(await payload.data);
}
});
// return (() => {
// callService.removeAllListener('ice-candidate');
// callService.removeAllListener('offer');
// callService.removeAllListener('answer');
// })
}, [callService]);
return (
<SafeAreaView style={styles.container}>
{!localStream && <Button title="Click to start CALL stream" onPress={startCall} />}
{callAlert && <Button title="Answer Call" onPress={() => recieveCall(offerData)} />}
{localStream && (
<View style={styles.toggleButtons}>
</View>
)}
<View style={styles.rtcview}>
{localStream && <RTCView style={styles.rtc} streamURL={localStream.toURL()} />}
</View>
<View style={styles.rtcview}>
{remoteStream && <RTCView style={styles.rtc} streamURL={remoteStream.toURL()} />}
</View>
</SafeAreaView>
)
};
export default VideoCallPage;
What is it that I am missing out??
Any guidance you can provide is greatly appreciated!