chore: add expo example

mrakesh0608 · mrakesh0608 · commit 5056a29a9b30 · 2025-05-25T19:11:39.000+05:30
diff --git a/example/index.js b/example/index.js
@@ -2,6 +2,7 @@ import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
 import CustomIncomingCall from './src/CustomIncomingCall';
+import { IncomingCallAppName } from './src/constants';
 
-AppRegistry.registerComponent('MyReactNativeApp', () => CustomIncomingCall);
+AppRegistry.registerComponent(IncomingCallAppName, () => CustomIncomingCall);
 AppRegistry.registerComponent(appName, () => App);
diff --git a/example/package.json b/example/package.json
@@ -15,8 +15,6 @@
     "@react-native-picker/picker": "^2.9.0",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
-    "@types/react": "18.3.1",
-    "add": "^2.0.6",
     "react": "18.2.0",
     "react-native": "0.74.1",
     "react-native-background-timer": "^2.4.1",
@@ -25,8 +23,7 @@
     "react-native-permissions": "^3.8.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "3.29.0",
-    "uuid-random": "^1.3.2",
-    "yarn": "^1.22.22"
+    "uuid-random": "^1.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -35,6 +32,7 @@
     "@react-native/babel-preset": "0.74.83",
     "@react-native/metro-config": "0.74.83",
     "@react-native/typescript-config": "0.74.83",
+    "@types/react": "18.3.1",
     "babel-plugin-module-resolver": "^5.0.0"
   },
   "engines": {
diff --git a/example/src/CustomIncomingCall/index.tsx b/example/src/CustomIncomingCall/index.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { CustomIncomingActivityProps } from 'react-native-full-screen-notification-incoming-call';
-import RNNotificationCall from '../../../src/index';
+import RNNotificationCall from 'react-native-full-screen-notification-incoming-call';
+import { defaultUserImgUrl } from '../constants';
 
 export default function CustomIncomingCall(props: CustomIncomingActivityProps) {
   console.log('props===', props);
@@ -14,9 +15,7 @@ export default function CustomIncomingCall(props: CustomIncomingActivityProps) {
       <Text style={styles.callerName}>{props.name || 'Unknown Caller'}</Text>
       <Image
         source={{
-          uri:
-            payload.callerImage ||
-            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKet-b99huP_BtZT_HUqvsaSz32lhrcLtIDQ&s',
+          uri: payload.callerImage || defaultUserImgUrl,
         }}
         style={styles.callerImage}
       />
diff --git a/example/src/Home/index.tsx b/example/src/Home/index.tsx
@@ -12,6 +12,7 @@ import { useNavigation } from '@react-navigation/native';
 import { CallKeepService } from '../services/CallKeepService';
 import CheckBox from '@react-native-community/checkbox';
 import { Picker } from '@react-native-picker/picker';
+import { IncomingCallAppName, defaultUserImgUrl } from '../constants';
 
 CallKeepService.instance().setupCallKeep();
 
@@ -26,9 +27,7 @@ const IncomingCallDemo = () => {
   CallKeepService.navigation = navigation;
 
   const [callerName, setCallerName] = useState('John Doe');
-  const [callerImageURL, setCallerImageURL] = useState(
-    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKet-b99huP_BtZT_HUqvsaSz32lhrcLtIDQ&s'
-  );
+  const [callerImageURL, setCallerImageURL] = useState(defaultUserImgUrl);
   const [selectedRingtone, setSelectedRingtone] = useState<
     'default' | 'skype_ring'
   >('default');
@@ -47,7 +46,7 @@ const IncomingCallDemo = () => {
       hasVideo: isVideoCall,
       other: {
         ringtone: selectedRingtone !== 'default' ? selectedRingtone : null,
-        mainComponent: useCustomIncomingCallUI ? 'MyReactNativeApp' : null,
+        mainComponent: useCustomIncomingCallUI ? IncomingCallAppName : null,
         channelId:
           ringtoneChannelIds[selectedRingtone] || ringtoneChannelIds.default,
       },
diff --git a/example/src/constants.ts b/example/src/constants.ts
@@ -0,0 +1,4 @@
+export const IncomingCallAppName = 'MyReactNativeApp';
+
+export const defaultUserImgUrl =
+  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKet-b99huP_BtZT_HUqvsaSz32lhrcLtIDQ&s';
diff --git a/example/src/services/CallKeepService.ts b/example/src/services/CallKeepService.ts
@@ -2,7 +2,7 @@ import { Platform } from 'react-native';
 import RNNotificationCall, {
   type AnswerPayload,
   type DeclinePayload,
-} from '../../../src/index';
+} from 'react-native-full-screen-notification-incoming-call';
 import RNCallKeep from 'react-native-callkeep';
 import type { HandleType } from 'react-native-callkeep';
 import {
@@ -11,6 +11,7 @@ import {
   RESULTS,
   requestMultiple,
 } from 'react-native-permissions';
+import { defaultUserImgUrl } from '../constants';
 
 const appName = 'Incoming-Test';
 const isAndroid = Platform.OS === 'android';
@@ -115,7 +116,7 @@ export class CallKeepService {
           const isVideo = hasVideo === 'true';
           RNNotificationCall.displayNotification(
             callUUID,
-            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKet-b99huP_BtZT_HUqvsaSz32lhrcLtIDQ&s',
+            defaultUserImgUrl,
             30000,
             {
               ...answerOption,
diff --git a/expo-example/.gitignore b/expo-example/.gitignore
@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+android
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
diff --git a/expo-example/app.json b/expo-example/app.json
@@ -0,0 +1,40 @@
+{
+  "expo": {
+    "name": "expo-example",
+    "slug": "expo-example",
+    "scheme": "expo-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": false,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "com.expoexample"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "@config-plugins/react-native-callkeep",
+      [
+        "../app.plugin.js",
+        {
+          "statusBarColor": "#000000"
+        }
+      ]
+    ]
+  }
+}
diff --git a/expo-example/assets/adaptive-icon.png b/expo-example/assets/adaptive-icon.png
diff --git a/expo-example/assets/favicon.png b/expo-example/assets/favicon.png
diff --git a/expo-example/assets/icon.png b/expo-example/assets/icon.png
diff --git a/expo-example/assets/splash-icon.png b/expo-example/assets/splash-icon.png
diff --git a/expo-example/babel.config.js b/expo-example/babel.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  presets: ['babel-preset-expo'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        extensions: ['.tsx', '.ts', '.js', '.json'],
+        alias: {
+          [pak.name]: path.join(__dirname, '..', pak.source),
+        },
+      },
+    ],
+  ],
+};
diff --git a/expo-example/index.ts b/expo-example/index.ts
@@ -0,0 +1,13 @@
+import { registerRootComponent } from 'expo';
+import { AppRegistry } from 'react-native';
+
+import App from '../example/src/App';
+import CustomIncomingCall from '../example/src/CustomIncomingCall';
+import { IncomingCallAppName } from '../example/src/constants';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
+
+AppRegistry.registerComponent(IncomingCallAppName, () => CustomIncomingCall);
diff --git a/expo-example/metro.config.js b/expo-example/metro.config.js
@@ -0,0 +1,51 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+const blacklist = require('metro-config/src/defaults/exclusionList');
+const path = require('path');
+const escape = require('escape-string-regexp');
+const pak = require('../package.json');
+const root = path.resolve(__dirname, '..');
+const defaultConfig = getDefaultConfig(__dirname);
+const modules = Object.keys({ ...pak.peerDependencies });
+
+// Fixes node_module path mismatch issue - it allows to use the same code for both React Native and Expo examples
+defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (context.originModulePath.includes('/example/node_modules/')) {
+    context.originModulePath = context.originModulePath.replace(
+      '/example/node_modules/',
+      '/expo-example/node_modules/'
+    );
+  }
+
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+module.exports = {
+  ...defaultConfig,
+  projectRoot: __dirname,
+  watchFolders: [root],
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    ...defaultConfig.resolver,
+    blacklistRE: blacklist(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+  transformer: {
+    ...defaultConfig.transformer,
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
diff --git a/expo-example/package.json b/expo-example/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "expo-example",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@config-plugins/react-native-callkeep": "^9.0.0",
+    "@react-native-community/checkbox": "^0.5.17",
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-picker/picker": "2.9.0",
+    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/stack": "^5.10.0",
+    "expo": "~52.0.46",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-callkeep": "^4.3.8",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-permissions": "^3.8.0",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "uuid-random": "^1.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~18.3.12",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/expo-example/react-native.config.js b/expo-example/react-native.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  dependencies: {
+    [pak.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};
diff --git a/expo-example/tsconfig.json b/expo-example/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "isolatedModules": true,
+    "typeRoots": ["./node_modules/@types"],
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "sourceMap": true,
+    "paths": {
+      "react-native-full-screen-notification-incoming-call": ["../src/index"]
+    },
+    "strictPropertyInitialization": false
+  },
+  "compileOnSave": true,
+  "include": ["index.js", "src"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
