shakebug-react-native 2.4.15 → 2.4.17

package/src/Componanats/ReviewModal.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
-import { Modal, View, Text, TextInput, TouchableOpacity, StyleSheet, Image, KeyboardAvoidingView, ScrollView, TouchableWithoutFeedback, Keyboard, NativeModules } from 'react-native';
+import { Modal, View, Text, TextInput, TouchableOpacity, StyleSheet, Image, KeyboardAvoidingView, ScrollView, TouchableWithoutFeedback, Keyboard, NativeModules, useColorScheme, Platform } from 'react-native';
 import { AddReviewApi } from '../APIs/AddReview';
+import { isShakebugDark } from './Theme';
 
-const ReviewModal = ({ visible, onClose, onSubmit, color }) => {
+const ReviewModal = ({ visible, onClose, onSubmit, color = '#313A46' }) => {
+    const colorScheme = useColorScheme();
+    const isDark = isShakebugDark(colorScheme);
 
     const { ShakebugSDKSharedPreferencesModule } = NativeModules;
 
@@ -32,9 +35,9 @@ const ReviewModal = ({ visible, onClose, onSubmit, color }) => {
                         keyboardShouldPersistTaps="handled"
                         bounces={false}
                     >
-                        <View style={styles.modalContainer}>
-                            <Text style={styles.title}>Rate Your Experience</Text>
-                            <Text style={styles.subtitle}>We value your feedback</Text>
+                        <View style={[styles.modalContainer, { backgroundColor: isDark ? '#2b2f38' : '#fff' }]}>
+                            <Text style={[styles.title, { color: isDark ? '#fff' : '#333' }]}>Rate Your Experience</Text>
+                            <Text style={[styles.subtitle, { color: isDark ? '#8e9db0' : '#777' }]}>We value your feedback</Text>
 
                             <View style={styles.starsContainer}>
                                 {[1, 2, 3, 4, 5].map((star) => (
@@ -45,7 +48,7 @@ const ReviewModal = ({ visible, onClose, onSubmit, color }) => {
                                                     ? require("../Assets/images/solar_star-bold.png")
                                                     : require("../Assets/images/solar_star-line-duotone.png")
                                             }
-                                            tintColor={color}
+                                            tintColor={isDark ? '#eab308' : (color || '#313A46')}
                                             style={styles.star}
                                         />
                                     </TouchableOpacity>
@@ -54,24 +57,28 @@ const ReviewModal = ({ visible, onClose, onSubmit, color }) => {
 
                             <TextInput
                                 placeholder="Write your review(optioanl)..."
-                                placeholderTextColor="#999"
+                                placeholderTextColor={isDark ? '#8e9db0' : '#999'}
                                 value={feedback}
                                 onChangeText={setFeedback}
                                 multiline
-                                style={styles.textInput}
+                                style={[styles.textInput, {
+                                    borderColor: isDark ? '#363b46' : '#ccc',
+                                    color: isDark ? '#fff' : '#000',
+                                    backgroundColor: isDark ? '#21252c' : '#fff'
+                                }]}
                             />
 
                             <View style={styles.buttons}>
                                 <TouchableOpacity
-                                    style={styles.cancelButton}
+                                    style={[styles.cancelButton, { borderColor: isDark ? '#444955' : '#ccc' }]}
                                     onPress={() => {
                                         ShakebugSDKSharedPreferencesModule.setString("LAST_POPUP_TIME", Date.now()?.toString())
                                         onClose()
                                     }}
                                 >
-                                    <Text style={styles.cancelText}>Cancel</Text>
+                                    <Text style={[styles.cancelText, { color: isDark ? '#cbd5e1' : '#666' }]}>Cancel</Text>
                                 </TouchableOpacity>
-                                <TouchableOpacity style={[styles.submitButton, { backgroundColor: color }]} onPress={handleSubmit}>
+                                <TouchableOpacity style={[styles.submitButton, { backgroundColor: color || '#313A46' }]} onPress={handleSubmit}>
                                     <Text style={styles.submitText}>Submit</Text>
                                 </TouchableOpacity>
                             </View>

package/src/Componanats/SafeAreaHelper.js

@@ -0,0 +1,70 @@
+import { Platform, Dimensions, StatusBar } from 'react-native';
+import DeviceInfo from '../../DeviceInfo';
+
+/**
+ * Checks if the current iOS device has a notch or Dynamic Island (home indicator at bottom).
+ */
+export const isIPhoneWithNotch = () => {
+  if (Platform.OS !== 'ios') return false;
+  try {
+    if (typeof DeviceInfo.hasNotch === 'function' && DeviceInfo.hasNotch()) {
+      return true;
+    }
+    if (typeof DeviceInfo.hasDynamicIsland === 'function' && DeviceInfo.hasDynamicIsland()) {
+      return true;
+    }
+  } catch (e) {}
+
+  const windowDim = Dimensions.get('window');
+  const screenDim = Dimensions.get('screen');
+  const maxDim = Math.max(
+    windowDim?.width || 0,
+    windowDim?.height || 0,
+    screenDim?.width || 0,
+    screenDim?.height || 0
+  );
+  // iPhone X, XR, XS, 11, 12, 13, 14, 15, 16 all have screen dimension >= 780
+  return maxDim >= 780 || maxDim === 0;
+};
+
+/**
+ * Returns safe bottom inset space in points:
+ * - 34pt on notched / Dynamic Island iPhones (for home indicator)
+ * - 0pt on home-button iPhones (iPhone SE, 8, etc.)
+ * - 56dp on Android (clears 3-button navigation bar and gesture navigation)
+ */
+export const getBottomSpace = () => {
+  if (Platform.OS === 'ios') {
+    return isIPhoneWithNotch() ? 34 : 0;
+  }
+  return 56;
+};
+
+/**
+ * Returns safe top inset space in points:
+ * - StatusBar.currentHeight on Android
+ * - 54pt on Dynamic Island iPhones (14 Pro, 15, 16 series)
+ * - 44pt on notched iPhones (X through 14)
+ * - 20pt on standard iPhones
+ */
+export const getTopSpace = () => {
+  if (Platform.OS === 'android') {
+    return Math.max(StatusBar.currentHeight || 0, 24);
+  }
+  if (!isIPhoneWithNotch()) {
+    return 20;
+  }
+  const windowDim = Dimensions.get('window');
+  const screenDim = Dimensions.get('screen');
+  const maxDim = Math.max(
+    windowDim?.width || 0,
+    windowDim?.height || 0,
+    screenDim?.width || 0,
+    screenDim?.height || 0
+  );
+  // Dynamic Island iPhones (14 Pro, 15, 16 series) have height >= 852
+  if (maxDim >= 852 || maxDim === 0) {
+    return 54;
+  }
+  return 44;
+};