adding calling component

app/client/mobile/src/calling/Calling.styled.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import { Colors } from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  active: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+  inactive: {
+    display: 'none',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+});

app/client/mobile/src/calling/Calling.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { SafeAreaView, Modal, ScrollView, View } from 'react-native';
+import { Surface, Icon, Divider, Button, IconButton, Text, TextInput} from 'react-native-paper';
+import {styles} from './Calling.styled';
+import {useCalling} from './useCalling.hook';
+import {BlurView} from '@react-native-community/blur';
+
+export function Calling() {
+  const { state, actions } = useCalling();
+
+  return (
+    <View style={(state.link || state.ringing.length > 0) ? styles.active : styles.inactive}>
+      <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+    </View>
+  );
+}
+

app/client/mobile/src/calling/useCalling.hook.ts

@@ -0,0 +1,35 @@
+import { useState, useContext, useEffect } from 'react'
+import { AppContext } from '../context/AppContext'
+import { ContextType } from '../context/ContextType'
+
+export function useCalling() {
+  const app = useContext(AppContext) as ContextType
+  const [state, setState] = useState({
+    ringing: [],
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+    if (app.state.session) {
+      const setRinging = (ringing: { cardId: string, callId: string }[]) => {
+console.log(">>>> ", ringing);
+
+        updateState({ ringing });
+      }
+      const ring = app.state.session.getRing();
+      ring.addRingingListener(setRinging);
+      return () => {
+        ring.removeRingingListener(setRinging);
+      }
+    }
+  }, [app.state.session]);
+
+  const actions = {
+  }
+
+  return { state, actions }
+}

app/client/mobile/src/session/Session.tsx

@@ -17,6 +17,7 @@ import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/na
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Colors} from '../constants/Colors';
+import {Calling} from '../calling/Calling';
 
 const SettingsDrawer = createDrawerNavigator();
 const ContactsDrawer = createDrawerNavigator();
@@ -189,6 +190,7 @@ export function Session() {
           </Surface>
         </View>
       )}
+      <Calling />
     </View>
   );
 }

app/sdk/src/session.ts

@@ -68,8 +68,8 @@ export class SessionModule implements Session {
     this.attribute = new AttributeModule(log, this.settings, this.store, guid, token, node, secure);
     this.stream = new StreamModule(log, this.store, this.crypto, this.staging, guid, token, node, secure, channelTypes);
     this.content = new ContentModule(log, this.crypto, this.contact, this.stream);
-    this.ring = new RingModule(log, token, node, secure);
     this.connection = new Connection(log, token, node, secure);
+    this.ring = new RingModule(log);
 
     const onStatus = (ev: string) => {
       this.status = ev;