undo changes related to SafeAreaView

2025-12-23 23:19:40 +01:00 · 2020-04-19 21:27:03 +05:00
parent e85e5acd54
commit c61070539a
12 changed files with 442 additions and 459 deletions
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -9,7 +9,6 @@ import { defaultState } from './src/provider/defaultState';
 import {eSubscribeEvent, eUnSubscribeEvent} from './src/services/eventManager';
 import {eDispatchAction} from './src/services/events';
 import {db, DDS} from './src/utils/utils';
-import { SafeAreaContext, SafeAreaProvider } from 'react-native-safe-area-context';

 const App = () => {
  const [state, dispatch] = useTracked();
@@ -44,7 +43,6 @@ const App = () => {
  useEffect(() => {
    Initialize().then(() => {
      db.init().then(async () => {
-
        let user = await db.user.get();
        dispatch({type: ACTIONS.USER, user: user});

@@ -86,15 +84,10 @@ const App = () => {
    return <></>;
  }
  return (
-
-
-    <SafeAreaProvider>
    <>
      <I.Initialize />
      <Loading />
    </>
-    </SafeAreaProvider>
-
  );
 };

--- a/apps/mobile/android/app/src/main/java/com/notes/MainActivity.java
+++ b/apps/mobile/android/app/src/main/java/com/notes/MainActivity.java
@@ -53,6 +53,12 @@ public class MainActivity extends ReactActivity {
    return "Notes";
  }

+    @Override
+    public void invokeDefaultOnBackPressed() {
+        moveTaskToBack(true);
+    }
+
+
   

 }
--- a/apps/mobile/src/components/Container/index.js
+++ b/apps/mobile/src/components/Container/index.js
@@ -3,10 +3,11 @@ import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
-  SafeAreaView,
  Text,
  TouchableOpacity,
  View,
+  StatusBar,
+  SafeAreaView,
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -20,16 +21,13 @@ import {Header} from '../header';
 import {Search} from '../SearchInput';
 import SelectionHeader from '../SelectionHeader';
 import {inputRef} from '../../utils/refs';
-import {useSafeArea} from 'react-native-safe-area-context';
-
-const AnimatedKeyboardAvoidingView = Animatable.createAnimatableComponent(
-  KeyboardAvoidingView,
-);

 const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
  TouchableOpacity,
 );

+const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView);
+
 export const Container = ({
  children,
  bottomButtonOnPress,
@@ -56,7 +54,6 @@ export const Container = ({
  const [text, setText] = useState('');
  const [hideHeader, setHideHeader] = useState(false);
  const [buttonHide, setButtonHide] = useState(false);
-  const insets = useSafeArea();

  let offsetY = 0;
  let countUp = 1;
@@ -185,16 +182,17 @@ export const Container = ({
  // Render

  return (
-    <AnimatedKeyboardAvoidingView
+    <KeyboardAvoidingView
+      behavior="padding"
+      enabled={Platform.OS === 'ios' ? true : false}>
+      <AnimatedSafeAreaView
        transition="backgroundColor"
        duration={300}
        style={{
          height: '100%',
          backgroundColor: colors.bg,
-        paddingTop: insets.top,
-      }}
-      behavior="padding"
-      enabled={Platform.OS === 'ios' ? true : false}>
+          paddingTop: StatusBar.currentHeight,
+        }}>
        {noSelectionHeader ? null : <SelectionHeader items={data} />}

        <View
@@ -253,7 +251,6 @@ export const Container = ({
              position: 'absolute',
              paddingHorizontal: 12,
              zIndex: 10,
-            bottom: Platform.OS === 'ios' ? insets.bottom : 15,
              transform: [
                {
                  translateY: buttonHide ? 200 : 0,
@@ -297,7 +294,8 @@ export const Container = ({
            </AnimatedTouchableOpacity>
          </Animatable.View>
        )}
-    </AnimatedKeyboardAvoidingView>
+      </AnimatedSafeAreaView>
+    </KeyboardAvoidingView>
  );
 };

--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -18,7 +18,6 @@ import { NotesPlaceHolder } from '../ListPlaceholders';
 import NoteItem from '../NoteItem';
 import SelectionWrapper from '../SelectionWrapper';
 import {useIsFocused} from 'react-navigation-hooks';
-import { useSafeArea } from 'react-native-safe-area-context';

 const sectionListRef = createRef();
 export const NotesList = ({isGrouped = false}) => {
@@ -27,7 +26,6 @@ export const NotesList = ({ isGrouped = false }) => {
  const isFocused = useIsFocused();
  const [refreshing, setRefreshing] = useState(false);
  const searchResults = {...state.searchResults};
-  const insets = useSafeArea();
  const _renderItem = ({item, index}) => (
    <SelectionWrapper
      index={index}
@@ -78,8 +76,8 @@ export const NotesList = ({ isGrouped = false }) => {
                : 135
              : 135 - 60
            : notes[0] && !selectionMode
-              ? 155 - insets.top
-              : (155 - 60) - insets.top,
+            ? 155
+            : 155 - 60,
      }}>
      <PinnedItems />
    </View>
--- a/apps/mobile/src/components/SideMenu/index.js
+++ b/apps/mobile/src/components/SideMenu/index.js
@@ -180,6 +180,34 @@ export default class SideMenu extends React.Component {
    return this.props.menuPosition === 'right' ? -1 : 1;
  }

+  doAfterShow() {
+    sideMenuOverlayRef.current?.setNativeProps({
+      style: {
+        display: 'none',
+        position: 'relative',
+        transform: [
+          {
+            translateX: -deviceScreen.width * 2,
+          },
+        ],
+      },
+    });
+  }
+
+  doAfterHide() {
+    sideMenuOverlayRef.current?.setNativeProps({
+      style: {
+        display: 'flex',
+        position: 'absolute',
+        transform: [
+          {
+            translateX: 0,
+          },
+        ],
+      },
+    });
+  }
+
  handlePanResponderMove(e, gestureState) {
    if (this.state.left.__getValue() * this.menuPositionMultiplier() >= 0) {
      let newLeft = this.prevLeft + gestureState.dx;
@@ -199,32 +227,11 @@ export default class SideMenu extends React.Component {

      let o = newLeft / this.props.openMenuOffset;
      this.opacity.setValue(o * 0.5);
-      if (o > 0.015) {
-        sideMenuOverlayRef.current?.setNativeProps({
-          style: {
-            display: 'none',
-            position: 'relative',
-            transform: [
-              {
-                translateX: -deviceScreen.width * 2,
-              },
-            ],
-          },
-        });
+      if (o > 0.1) {
+        this.doAfterShow();
      } else {
-        sideMenuOverlayRef.current?.setNativeProps({
-          style: {
-            display: 'flex',
-            position: 'absolute',
-            transform: [
-              {
-                translateX: 0,
-              },
-            ],
-          },
-        });
+        this.doAfterHide();
      }
-
      this.props.onMove(newLeft);
      this.state.left.setValue(newLeft);
    }
@@ -246,6 +253,7 @@ export default class SideMenu extends React.Component {
      const touchMoved = x > this.props.toleranceX && y < this.props.toleranceY;

      if (this.isOpen) {
+        this.doAfterShow();
        return touchMoved;
      }

@@ -266,30 +274,17 @@ export default class SideMenu extends React.Component {
    const {hiddenMenuOffset, openMenuOffset} = this.state;

    if (isOpen) {
-      sideMenuOverlayRef.current.setNativeProps({
-        style: {
-          display: 'none',
-          position: 'relative',
-          transform: [
-            {
-              translateX: -deviceScreen.width * 2,
-            },
-          ],
-        },
-      });
+      this.doAfterShow();
+      setTimeout(() => {
+        if (this.isOpen) {
+          this.doAfterShow();
+        }
+      }, 500);
    } else {
      setTimeout(() => {
-        sideMenuOverlayRef.current.setNativeProps({
-          style: {
-            display: 'flex',
-            position: 'absolute',
-            transform: [
-              {
-                translateX: 0,
-              },
-            ],
-          },
-        });
+        if (!this.isOpen) {
+          this.doAfterHide();
+        }
      }, 500);
    }

--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -8,7 +8,6 @@ import { eClearSearch, eScrollEvent } from '../../services/events';
 import {hexToRGBA} from '../../utils/utils';
 import {NotebookItem} from '../NotebookItem';
 import SelectionWrapper from '../SelectionWrapper';
-import { useSafeArea } from 'react-native-safe-area-context';

 const SimpleList = ({
  data,
@@ -27,7 +26,7 @@ const SimpleList = ({
  const [state, dispatch] = useTracked();
  const {colors, selectionMode} = state;
  const searchResults = {...state.searchResults};
-  const insets = useSafeArea();
+
  const _onScroll = event => {
    if (!event) return;
    let y = event.nativeEvent.contentOffset.y;
@@ -63,8 +62,8 @@ const SimpleList = ({
                ? 135
                : 135 - 60
              : data[0] && !selectionMode
-                ? 155 - insets.top
-                : (155 - insets.top) - 60,
+              ? 155
+              : 155 - 60,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -12,7 +12,6 @@ import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
 import {ACTIONS} from '../../provider/actions';
 import {sideMenuRef} from '../../utils/refs';
 import {moveNoteHideEvent} from '../DialogManager/recievers';
-import { useSafeArea } from 'react-native-safe-area-context';
 const menuRef = createRef();
 export const Header = ({
  heading,
@@ -28,7 +27,6 @@ export const Header = ({
 }) => {
  const [state, dispatch] = useTracked();
  const {colors} = state;
-  const insets = useSafeArea();

  return (
    <View
@@ -38,10 +36,10 @@ export const Header = ({
        height: 50,
        marginTop:
          Platform.OS === 'ios'
-            ? insets.top
+            ? 0
            : preventDefaultMargins || isLoginNavigator
            ? 0
-              : insets.top,
+            : StatusBar.currentHeight,
        marginBottom: 10,
        justifyContent: 'space-between',
        alignItems: 'center',
--- a/apps/mobile/src/services/Navigator.js
+++ b/apps/mobile/src/services/Navigator.js
@@ -15,6 +15,7 @@ import Signup from '../views/Signup';
 import Tags from '../views/Tags';
 import Trash from '../views/Trash';
 import {createStackNavigator} from 'react-navigation-stack';
+import {Animated} from 'react-native';

 const fade = props => {
  const {position, scene} = props;
@@ -35,7 +36,6 @@ const fade = props => {
  };
 };

-
 export const TopLevelNavigator = createStackNavigator(
  {
    Home: {
@@ -89,11 +89,9 @@ export const TopLevelNavigator = createStackNavigator(
    Notebook: {
      screen: Notebook,
    },
-
  },
  {
    initialRouteName: 'Home',
-
    defaultNavigationOptions: {
      gesturesEnabled: false,
      headerStyle: {
@@ -102,8 +100,14 @@ export const TopLevelNavigator = createStackNavigator(
        height: 0,
      },
    },
-    cardOverlayEnabled: true,
-    cardShadowEnabled: true,
+    transitionConfig: () => ({
+      transitionSpec: {
+        timing: Animated.timing,
+      },
+      screenInterpolator: () => {},
+    }),
+    cardOverlayEnabled: false,
+    cardShadowEnabled: false,
    animationEnabled: false,
  },
 );
--- a/apps/mobile/src/utils/refs.js
+++ b/apps/mobile/src/utils/refs.js
@@ -1,12 +1,5 @@
 import {createRef} from 'react';
-import * as Animatable from 'react-native-animatable';
-import { SafeAreaView } from 'react-native';

 export const sideMenuRef = createRef();
 export const inputRef = createRef();
 export const sideMenuOverlayRef = createRef();
-
-export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
-  SafeAreaView,
-);
-
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -38,7 +38,6 @@ import {
 import {exitEditorAnimation} from '../../utils/animations';
 import {sideMenuRef} from '../../utils/refs';
 import {db, DDS, editing, timeConverter, ToastEvent} from '../../utils/utils';
-import {useSafeArea} from 'react-native-safe-area-context';

 const EditorWebView = createRef();
 let note = {};
@@ -57,7 +56,7 @@ const Editor = ({noMenu}) => {
  const {colors} = state;
  const [fullscreen, setFullscreen] = useState(false);
  const [dateEdited, setDateEdited] = useState(0);
-  const insets = useSafeArea();
+
  // FUNCTIONS

  const post = message =>
@@ -518,7 +517,7 @@ const Editor = ({noMenu}) => {
              position: 'absolute',
              left: 0,
              top: 0,
-              marginTop: Platform.OS === 'ios' ? 0 : insets.top,
+              marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
              paddingLeft: 12,
              zIndex: 800,
            }}>
@@ -539,7 +538,7 @@ const Editor = ({noMenu}) => {
            flexDirection: 'row',
            marginRight: 0,
            position: 'absolute',
-            marginTop: Platform.OS === 'ios' ? 0 : insets.top,
+            marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
            zIndex: 800,
            right: 0,
            top: 0,
@@ -593,7 +592,8 @@ const Editor = ({noMenu}) => {
        <View
          style={{
            paddingHorizontal: 12,
-            marginTop: Platform.OS === 'ios' ? 45 : insets.top + 45,
+            marginTop:
+              Platform.OS === 'ios' ? 45 : StatusBar.currentHeight + 45,
            width: '100%',
            position: 'absolute',
            justifyContent: 'flex-start',
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -27,12 +27,11 @@ import { eSendEvent } from '../../services/eventManager';
 import {eOpenLoginDialog} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
 import {hexToRGBA, w, DDS, setSetting, db, ToastEvent} from '../../utils/utils';
-import { useSafeArea } from 'react-native-safe-area-context';

 export const Settings = ({navigation}) => {
  const [state, dispatch] = useTracked();
  const {colors, user, settings} = state;
-  const insets = useSafeArea();
+
  function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
    let newColors = setColorScheme(colors, accent);
    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
@@ -56,7 +55,7 @@ export const Settings = ({ navigation }) => {
      noBottomButton={true}>
      <View
        style={{
-          marginTop: Platform.OS == 'ios' ? 135 - 60 : (155 - insets.top) - 60,
+          marginTop: Platform.OS == 'ios' ? 135 - 60 : 155 - 60,
        }}
      />

--- a/apps/mobile/src/views/Trash/index.js
+++ b/apps/mobile/src/views/Trash/index.js
@@ -118,7 +118,7 @@ export const Trash = ({navigation}) => {
        focused={isFocused}
        onRefresh={_onRefresh}
        renderItem={_renderItem}
-        placeholder={<TrashPlaceHolder colors={colors} />}
+        //placeholder={<TrashPlaceHolder colors={colors} />}
        placeholderText="Deleted notes & notebooks appear here."
      />
    </Container>