Merge pull request #75 from mrakesh0608/expo-plugin

feat: add expo plugin

Author: linhvovan29546

CONTRIBUTING.md

@@ -47,6 +47,16 @@ To run the example app on iOS:
 yarn example ios
 ```
 
+### Running the Expo Example
+
+The project also includes an Expo example app in the `expo-example/` directory. To run the Expo example:
+
+```sh
+yarn
+yarn prepare
+yarn expo-example android
+```
+
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
@@ -108,6 +118,8 @@ The `package.json` file contains various scripts for common tasks:
 - `yarn example start`: start the Metro server for the example app.
 - `yarn example android`: run the example app on Android.
 - `yarn example ios`: run the example app on iOS.
+- `yarn expo-example android`: run the Expo example app on Android.
+- `yarn expo-example ios`: run the Expo example app on iOS.
 
 ### Sending a pull request
 

README.md

@@ -26,12 +26,17 @@ Starting from Android 12, the incoming call notification UI will resemble the on
 - Full-screen incoming call notifications
 - Customizable notification options (icons, colors, sound, etc.)
 - Android 12+ call-style UI support
+- Expo support with configuration plugin
 
 # Installation
+
+For React Native projects:
 ```sh
 npm install react-native-full-screen-notification-incoming-call
 
 ```
+
+For Expo projects, this library includes a configuration plugin. See the [Expo section](#expo) below for setup instructions.
 ### Compatibility
 Ensure you are using the appropriate version of this library for your React Native version:
 
@@ -97,6 +102,32 @@ In `AndroidManifest.xml`:
       </application>
 ```
 
+# Expo 
+
+Add the plugin in your app.json
+
+```
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-full-screen-notification-incoming-call", 
+        { 
+          "statusBarColor": "#000000" 
+        }
+      ]
+    ]
+  }
+}
+```
+
+Available plugin options : 
+
+```ts
+type PluginOptions = {
+  statusBarColor?: string; // optional, default is "#000000"
+};
+```
 # Usage
 
 ````js

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./lib/commonjs/expo');

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);

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": {

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}
       />

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,
       },

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';

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,

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