fix tooltip on ios

apps/mobile/ios/Podfile

@@ -4,7 +4,7 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ
 platform :ios, '11.0'
 
 pod 'Base64'
-pod 'SexyTooltip',:git => 'https://github.com/prscX/SexyTooltip.git'
+pod 'SexyTooltip',:git => 'https://github.com/ammarahm-ed/SexyTooltip.git'
 pod 'MMKV'
 
 target 'Notesnook' do

apps/mobile/ios/Podfile.lock

@@ -453,7 +453,7 @@ DEPENDENCIES:
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNTooltips (from `../node_modules/react-native-tooltips`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
-  - SexyTooltip (from `https://github.com/prscX/SexyTooltip.git`)
+  - SexyTooltip (from `https://github.com/ammarahm-ed/SexyTooltip.git`)
   - "toolbar-android (from `../node_modules/@react-native-community/toolbar-android`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -601,7 +601,7 @@ EXTERNAL SOURCES:
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   SexyTooltip:
-    :git: https://github.com/prscX/SexyTooltip.git
+    :git: https://github.com/ammarahm-ed/SexyTooltip.git
   toolbar-android:
     :path: "../node_modules/@react-native-community/toolbar-android"
   Yoga:
@@ -609,8 +609,8 @@ EXTERNAL SOURCES:
 
 CHECKOUT OPTIONS:
   SexyTooltip:
-    :commit: 2fbe10260fb1b0f7dcd9822681a6970ce88112af
+    :commit: bb13cf11a7c19b635f10047fc04d857dd6cb6553
-    :git: https://github.com/prscX/SexyTooltip.git
+    :git: https://github.com/ammarahm-ed/SexyTooltip.git
 
 SPEC CHECKSUMS:
   Base64: cecfb41a004124895a7bcee567a89bae5a89d49b
@@ -684,12 +684,12 @@ SPEC CHECKSUMS:
   RNSecureRandom: 0dcee021fdb3d50cd5cee5db0ebf583c42f5af0e
   RNShare: 3185c074441b7e8897014d95ba982434a0a024a1
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
-  RNTooltips: 47a992eb7b12f624e5a8a40f0990fbef49dcb83e
+  RNTooltips: 5424d4bf0b3d441104127943b1115cc7f0616b1f
   RNVectorIcons: 4143ba35feebab8fdbe6bc43d1e776b393d47ac8
   SexyTooltip: 5c9b4dec52bfb317938cb0488efd9da3717bb6fd
   toolbar-android: 2a73856e98b750d7e71ce4644d3f41cc98211719
   Yoga: 5cbf25add73edb290e1067017690f7ebf56c5468
 
-PODFILE CHECKSUM: 69a787dbce9f45b28a09e255a4ae39a9cfe82d20
+PODFILE CHECKSUM: caa8e050bad1a0f4d452e7e74a6dc724578310b1
 
 COCOAPODS: 1.11.2

apps/mobile/src/components/AppLoader/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { NativeModules, Platform, View } from 'react-native';
+import { NativeModules, Platform, StatusBar, View } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
 import { checkVersion } from 'react-native-check-version';
 import { useTracked } from '../../provider';
@@ -75,9 +75,13 @@ const AppLoader = ({ onLoad }) => {
     await sleep(requireIntro.value ? 500 : 0);
     await RNBootSplash.hide({ fade: true });
     setTimeout(async () => {
-      NativeModules.RNBars.setStatusBarStyle(!colors.night ? 'light-content' : 'dark-content');
+      if (Platform.OS === 'android') {
-      await sleep(5);
+        NativeModules.RNBars.setStatusBarStyle(!colors.night ? 'light-content' : 'dark-content');
-      NativeModules.RNBars.setStatusBarStyle(colors.night ? 'light-content' : 'dark-content');
+        await sleep(5);
+        NativeModules.RNBars.setStatusBarStyle(colors.night ? 'light-content' : 'dark-content');
+      } else {
+        StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+      }
     }, 500);
   };
 

apps/mobile/src/components/LoginDialog/login.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { SheetManager } from 'react-native-actions-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
@@ -34,6 +35,7 @@ export const Login = ({ changeMode }) => {
 
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
+  const insets = useSafeAreaInsets();
 
   const setUser = useUserStore(state => state.setUser);
 
@@ -109,7 +111,7 @@ export const Login = ({ changeMode }) => {
           position: 'absolute',
           zIndex: 999,
           left: 12,
-          top: 12
+          top: 12 + insets.top
         }}
       />
 

apps/mobile/src/components/LoginDialog/signup.js

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
-import { View } from 'react-native';
+import { Dimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
@@ -31,6 +32,8 @@ export const Signup = ({ changeMode, welcome }) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  const insets = useSafeAreaInsets();
+
   const setUser = useUserStore(state => state.setUser);
   const setLastSynced = useUserStore(state => state.setLastSynced);
 
@@ -87,7 +90,7 @@ export const Signup = ({ changeMode, welcome }) => {
             position: 'absolute',
             zIndex: 999,
             left: 12,
-            top: 12
+            top: 12 + insets.top
           }}
         />
       )}
@@ -118,7 +121,7 @@ export const Signup = ({ changeMode, welcome }) => {
             alignSelf: 'center',
             paddingHorizontal: 12,
             marginBottom: 30,
-            marginTop: 15
+            marginTop: Dimensions.get('window').height < 700 ? -75 : 15
           }}
         >
           <Heading

apps/mobile/src/utils/index.js

@@ -355,18 +355,20 @@ export const TOOLTIP_POSITIONS = {
   BOTTOM: 4
 };
 let prevTarget = null;
-export function showTooltip(event, text, position) {
+export function showTooltip(event, text, position = 2) {
   if (!event._targetInst?.ref?.current) return;
   prevTarget && RNTooltips.Dismiss(prevTarget);
   prevTarget = null;
   prevTarget = event._targetInst.ref.current;
-  RNTooltips.Show(event._targetInst.ref.current, tabBarRef.current, {
+  RNTooltips.Show(prevTarget, tabBarRef.current, {
     text: text,
-    tintColor: 'black',
+    tintColor: '#000000',
-    corner: 40,
+    corner: Platform.OS === 'ios' ? 5 : 40,
     textSize: 14,
     position: position,
-    duration: 1000
+    duration: 1000,
+    autoHide: true,
+    clickToHide: true
   });
 }
 

apps/mobile/src/utils/useTooltip.ts

@@ -1,4 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
 //@ts-ignore
 import RNTooltips from 'react-native-tooltips';
 import { useTracked } from '../provider';
@@ -52,12 +53,13 @@ const useTooltip = () => {
       RNTooltips.Show(target.current, parent.current, {
         text: popup.text,
         tintColor: colors.night ? colors.nav : '#404040',
-        corner: 80,
+        corner: Platform.OS === 'ios' ? 5 : 80,
         textSize: 15,
         position: positions[position],
         duration: duration || 10000,
         clickToHide: true,
-        shadow: true
+        shadow: true,
+        autoHide: true
       });
     }, 1000);
   }