From c61070539abd5b8ad5328c07d9d10045c204a36c Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Sun, 19 Apr 2020 21:27:03 +0500 Subject: [PATCH] undo changes related to SafeAreaView --- apps/mobile/App.js | 43 ++-- .../src/main/java/com/notes/MainActivity.java | 6 + apps/mobile/src/components/Container/index.js | 206 +++++++++--------- apps/mobile/src/components/NotesList/index.js | 120 +++++----- apps/mobile/src/components/SideMenu/index.js | 87 ++++---- .../mobile/src/components/SimpleList/index.js | 157 +++++++------ apps/mobile/src/components/header/index.js | 54 +++-- apps/mobile/src/services/Navigator.js | 22 +- apps/mobile/src/utils/refs.js | 9 +- apps/mobile/src/views/Editor/index.js | 10 +- apps/mobile/src/views/Settings/index.js | 185 ++++++++-------- apps/mobile/src/views/Trash/index.js | 2 +- 12 files changed, 442 insertions(+), 459 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 4d371ce3c..dc56aa719 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -1,15 +1,14 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import MMKV from 'react-native-mmkv-storage'; import Orientation from 'react-native-orientation'; -import { Loading } from './Loading'; -import { getColorScheme, scale, updateSize } from './src/common/common'; -import { useTracked } from './src/provider'; -import { ACTIONS } from './src/provider/actions'; -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'; +import {Loading} from './Loading'; +import {getColorScheme, scale, updateSize} from './src/common/common'; +import {useTracked} from './src/provider'; +import {ACTIONS} from './src/provider/actions'; +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'; const App = () => { const [state, dispatch] = useTracked(); @@ -44,9 +43,8 @@ const App = () => { useEffect(() => { Initialize().then(() => { db.init().then(async () => { - let user = await db.user.get(); - dispatch({ type: ACTIONS.USER, user: user }); + dispatch({type: ACTIONS.USER, user: user}); setInit(true); }); @@ -59,7 +57,7 @@ const App = () => { let s; try { s = await MMKV.getStringAsync('settings'); - } catch (e) { } + } catch (e) {} if (typeof s !== 'string') { s = defaultState.settings; s = JSON.stringify(s); @@ -67,7 +65,7 @@ const App = () => { await MMKV.setStringAsync('settings', s); - dispatch({ type: ACTIONS.SETTINGS, s }); + dispatch({type: ACTIONS.SETTINGS, s}); } else { s = JSON.parse(s); if (s.fontScale) { @@ -77,24 +75,19 @@ const App = () => { } updateSize(); - dispatch({ type: ACTIONS.SETTINGS, settings: { ...s } }); + dispatch({type: ACTIONS.SETTINGS, settings: {...s}}); } - dispatch({ type: ACTIONS.THEME, colors: newColors }); + dispatch({type: ACTIONS.THEME, colors: newColors}); } if (!init) { return <>; } return ( - - - - <> - - - - - + <> + + + ); }; diff --git a/apps/mobile/android/app/src/main/java/com/notes/MainActivity.java b/apps/mobile/android/app/src/main/java/com/notes/MainActivity.java index 8d9b67141..d173db788 100644 --- 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); + } + + } diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index e4189d5cb..ecb098223 100644 --- 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,119 +182,120 @@ export const Container = ({ // Render return ( - - {noSelectionHeader ? null : } - - -
{ - setHideHeader(false); - countUp = 0; - countDown = 0; - }} - headerColor={headerColor} - navigation={navigation} - colors={colors} - isLoginNavigator={isLoginNavigator} - preventDefaultMargins={preventDefaultMargins} - heading={heading} - canGoBack={canGoBack} - customIcon={customIcon} - /> + {noSelectionHeader ? null : } - {data[0] && !noSearch ? ( - setText('')} - hide={hideHeader} - onChangeText={onChangeText} - headerColor={headerColor} - onSubmitEditing={onSubmitEditing} - placeholder={placeholder} - onBlur={onBlur} - onFocus={onFocus} - clearSearch={clearSearch} - value={text} - /> - ) : null} - - - {children} - - {noBottomButton ? null : ( - - { + setHideHeader(false); + countUp = 0; + countDown = 0; + }} + headerColor={headerColor} + navigation={navigation} + colors={colors} + isLoginNavigator={isLoginNavigator} + preventDefaultMargins={preventDefaultMargins} + heading={heading} + canGoBack={canGoBack} + customIcon={customIcon} + /> - alignSelf: 'center', - borderRadius: br, - backgroundColor: headerColor ? headerColor : colors.accent, - justifyContent: 'center', - alignItems: 'center', - marginBottom: 0, + {data[0] && !noSearch ? ( + setText('')} + hide={hideHeader} + onChangeText={onChangeText} + headerColor={headerColor} + onSubmitEditing={onSubmitEditing} + placeholder={placeholder} + onBlur={onBlur} + onFocus={onFocus} + clearSearch={clearSearch} + value={text} + /> + ) : null} + + + {children} + + {noBottomButton ? null : ( + - - - - {' ' + bottomButtonText} - - - - - )} - + + + {' ' + bottomButtonText} + + + + + )} + + ); }; diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index 9b40a326d..522e0c8ab 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, createRef } from 'react'; +import React, {useEffect, useState, createRef} from 'react'; import { ActivityIndicator, FlatList, @@ -8,27 +8,25 @@ import { Text, View, } from 'react-native'; -import { SIZE, WEIGHT } from '../../common/common'; -import { useTracked } from '../../provider'; -import { ACTIONS } from '../../provider/actions'; -import { eSendEvent } from '../../services/eventManager'; -import { eScrollEvent, eClearSearch } from '../../services/events'; -import { ToastEvent, hexToRGBA, DDS, db } from '../../utils/utils'; -import { NotesPlaceHolder } from '../ListPlaceholders'; +import {SIZE, WEIGHT} from '../../common/common'; +import {useTracked} from '../../provider'; +import {ACTIONS} from '../../provider/actions'; +import {eSendEvent} from '../../services/eventManager'; +import {eScrollEvent, eClearSearch} from '../../services/events'; +import {ToastEvent, hexToRGBA, DDS, db} from '../../utils/utils'; +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'; +import {useIsFocused} from 'react-navigation-hooks'; const sectionListRef = createRef(); -export const NotesList = ({ isGrouped = false }) => { +export const NotesList = ({isGrouped = false}) => { const [state, dispatch] = useTracked(); - const { colors, selectionMode, currentEditingNote, loading, notes } = state; + const {colors, selectionMode, currentEditingNote, loading, notes} = state; const isFocused = useIsFocused(); const [refreshing, setRefreshing] = useState(false); - const searchResults = { ...state.searchResults }; - const insets = useSafeArea(); - const _renderItem = ({ item, index }) => ( + const searchResults = {...state.searchResults}; + const _renderItem = ({item, index}) => ( { selectionMode={selectionMode} onLongPress={() => { if (!selectionMode) { - dispatch({ type: ACTIONS.SELECTION_MODE, enabled: true }); + dispatch({type: ACTIONS.SELECTION_MODE, enabled: true}); } - dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item }); + dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); }} update={() => { - dispatch({ type: ACTIONS.NOTES }); + dispatch({type: ACTIONS.NOTES}); }} item={item} 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, }}> @@ -116,23 +114,23 @@ export const NotesList = ({ isGrouped = false }) => { {loading ? ( ) : ( - <> - - - Notes you write will appear here. + <> + + + Notes you write will appear here. - - )} + + )} ); - const _renderSectionHeader = ({ section: { title } }) => ( + const _renderSectionHeader = ({section: {title}}) => ( { : 135 : 135 - 60 : notes[0] && !selectionMode - ? 155 - : 155 - 60, + ? 155 + : 155 - 60, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -209,10 +207,10 @@ export const NotesList = ({ isGrouped = false }) => { setRefreshing(false); ToastEvent.show(e.message, 'error'); } - dispatch({ type: ACTIONS.NOTES }); - dispatch({ type: ACTIONS.PINNED }); + dispatch({type: ACTIONS.NOTES}); + dispatch({type: ACTIONS.PINNED}); let user = await db.user.get(); - dispatch({ type: ACTIONS.USER, user: user }); + dispatch({type: ACTIONS.USER, user: user}); }} refreshing={refreshing} /> @@ -235,31 +233,31 @@ export const NotesList = ({ isGrouped = false }) => { renderItem={_renderItem} /> ) : ( - - ); + + ); }; const PinnedItems = () => { const [state, dispatch] = useTracked(); - const { pinned, colors, selectionMode } = state; + const {pinned, colors, selectionMode} = state; useEffect(() => { - dispatch({ type: ACTIONS.PINNED }); + dispatch({type: ACTIONS.PINNED}); }, []); return ( @@ -267,7 +265,7 @@ const PinnedItems = () => { item.id.toString()} - renderItem={({ item, index }) => + renderItem={({item, index}) => item.type === 'note' ? ( { selectionMode={selectionMode} onLongPress={() => { if (!selectionMode) { - dispatch({ type: ACTIONS.SELECTION_MODE, enabled: true }); + dispatch({type: ACTIONS.SELECTION_MODE, enabled: true}); } - dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item }); + dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); }} update={() => { - dispatch({ type: ACTIONS.NOTES }); + dispatch({type: ACTIONS.NOTES}); }} item={item} index={index} diff --git a/apps/mobile/src/components/SideMenu/index.js b/apps/mobile/src/components/SideMenu/index.js index 85ffddafc..33e69546e 100644 --- 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); } diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js index e96c3a987..c22c68af9 100644 --- a/apps/mobile/src/components/SimpleList/index.js +++ b/apps/mobile/src/components/SimpleList/index.js @@ -1,14 +1,13 @@ import React from 'react'; -import { FlatList, Platform, RefreshControl, Text, View } from 'react-native'; -import { SIZE, WEIGHT } from '../../common/common'; -import { useTracked } from '../../provider'; -import { ACTIONS } from '../../provider/actions'; -import { eSendEvent } from '../../services/eventManager'; -import { eClearSearch, eScrollEvent } from '../../services/events'; -import { hexToRGBA } from '../../utils/utils'; -import { NotebookItem } from '../NotebookItem'; +import {FlatList, Platform, RefreshControl, Text, View} from 'react-native'; +import {SIZE, WEIGHT} from '../../common/common'; +import {useTracked} from '../../provider'; +import {ACTIONS} from '../../provider/actions'; +import {eSendEvent} from '../../services/eventManager'; +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, @@ -25,9 +24,9 @@ const SimpleList = ({ noteToMove, }) => { const [state, dispatch] = useTracked(); - const { colors, selectionMode } = state; - const searchResults = { ...state.searchResults }; - const insets = useSafeArea(); + const {colors, selectionMode} = state; + const searchResults = {...state.searchResults}; + 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', @@ -91,70 +90,70 @@ const SimpleList = ({ ) : ( - - {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? ( - <> - item.id.toString()} - renderItem={({ item, index }) => - item.type === 'notebook' ? ( - + {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? ( + <> + item.id.toString()} + renderItem={({item, index}) => + item.type === 'notebook' ? ( + + { + if (!selectionMode) { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: true, + }); + } + dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); + }} + noteToMove={noteToMove} + item={item} pinned={true} - background={ - Platform.ios - ? hexToRGBA(colors.accent + '19') - : hexToRGBA(colors.shade) - } - item={item}> - { - if (!selectionMode) { - dispatch({ - type: ACTIONS.SELECTION_MODE, - enabled: true, - }); - } - dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item }); - }} - noteToMove={noteToMove} - item={item} - pinned={true} - index={index} - colors={colors} - /> - - ) : null - } - /> - - ) : null} - - ); + index={index} + colors={colors} + /> + + ) : null + } + /> + + ) : null} + + ); const _ListEmptyComponent = ( 0 + focused && + searchResults.results.length > 0 ? searchResults.results : data } diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 0918a6406..7f7fde8ce 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -1,18 +1,17 @@ -import React, { createRef } from 'react'; -import { Platform, StatusBar, Text, TouchableOpacity, View } from 'react-native'; +import React, {createRef} from 'react'; +import {Platform, StatusBar, Text, TouchableOpacity, View} from 'react-native'; import * as Animatable from 'react-native-animatable'; -import { SIZE, WEIGHT } from '../../common/common'; -import { useTracked } from '../../provider'; -import { eSendEvent } from '../../services/eventManager'; -import { eCloseLoginDialog } from '../../services/events'; +import {SIZE, WEIGHT} from '../../common/common'; +import {useTracked} from '../../provider'; +import {eSendEvent} from '../../services/eventManager'; +import {eCloseLoginDialog} from '../../services/events'; import NavigationService from '../../services/NavigationService'; -import { DDS } from '../../utils/utils'; +import {DDS} from '../../utils/utils'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -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'; +import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; +import {ACTIONS} from '../../provider/actions'; +import {sideMenuRef} from '../../utils/refs'; +import {moveNoteHideEvent} from '../DialogManager/recievers'; const menuRef = createRef(); export const Header = ({ heading, @@ -27,8 +26,7 @@ export const Header = ({ headerColor, }) => { const [state, dispatch] = useTracked(); - const { colors } = state; - const insets = useSafeArea(); + const {colors} = state; return ( {canGoBack ? ( { if (navigation && preventDefaultMargins) { if (navigation.state.routeName === 'Folders') { @@ -90,11 +88,11 @@ export const Header = ({ /> ) : ( - undefined - )} + undefined + )} {menu && !DDS.isTab ? ( { sideMenuRef.current?.openMenu(true); }} @@ -107,8 +105,8 @@ export const Header = ({ ) : ( - undefined - )} + undefined + )} { - dispatch({ type: ACTIONS.NOTES, sort: null }); + dispatch({type: ACTIONS.NOTES, sort: null}); menuRef.current?.hide(); }}> Default @@ -196,7 +194,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({ type: ACTIONS.NOTES, sort: 'abc' }); + dispatch({type: ACTIONS.NOTES, sort: 'abc'}); menuRef.current?.hide(); }}> Alphabetical @@ -207,7 +205,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({ type: ACTIONS.NOTES, sort: 'year' }); + dispatch({type: ACTIONS.NOTES, sort: 'year'}); menuRef.current?.hide(); }}> By year @@ -218,7 +216,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({ type: ACTIONS.NOTES, sort: 'month' }); + dispatch({type: ACTIONS.NOTES, sort: 'month'}); menuRef.current?.hide(); }}> By month @@ -229,7 +227,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({ type: ACTIONS.NOTES, sort: 'week' }); + dispatch({type: ACTIONS.NOTES, sort: 'week'}); menuRef.current?.hide(); }}> By week diff --git a/apps/mobile/src/services/Navigator.js b/apps/mobile/src/services/Navigator.js index 7181cf2d0..49caf6279 100644 --- a/apps/mobile/src/services/Navigator.js +++ b/apps/mobile/src/services/Navigator.js @@ -14,10 +14,11 @@ import Settings from '../views/Settings'; import Signup from '../views/Signup'; import Tags from '../views/Tags'; import Trash from '../views/Trash'; -import { createStackNavigator } from 'react-navigation-stack'; +import {createStackNavigator} from 'react-navigation-stack'; +import {Animated} from 'react-native'; const fade = props => { - const { position, scene } = props; + const {position, scene} = props; const index = scene.index; @@ -31,11 +32,10 @@ const fade = props => { return { opacity, - transform: [{ translateX }, { translateY }], + transform: [{translateX}, {translateY}], }; }; - 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, }, -); \ No newline at end of file +); diff --git a/apps/mobile/src/utils/refs.js b/apps/mobile/src/utils/refs.js index 9a23472b1..f0aeccc41 100644 --- 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'; +import {createRef} from 'react'; export const sideMenuRef = createRef(); export const inputRef = createRef(); export const sideMenuOverlayRef = createRef(); - -export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( - SafeAreaView, -); - diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 7163b6120..fbbaa5741 100755 --- 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}) => { { +export const Settings = ({navigation}) => { const [state, dispatch] = useTracked(); - const { colors, user, settings } = state; - const insets = useSafeArea(); + const {colors, user, settings} = state; + function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { let newColors = setColorScheme(colors, accent); StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content'); - dispatch({ type: ACTIONS.THEME, colors: newColors }); + dispatch({type: ACTIONS.THEME, colors: newColors}); } function changeAccentColor(accentColor) { @@ -56,7 +55,7 @@ export const Settings = ({ navigation }) => { noBottomButton={true}> @@ -143,27 +142,27 @@ export const Settings = ({ navigation }) => { {[ { name: 'Backup my notes', - func: () => { }, + func: () => {}, }, { name: 'My vault', - func: () => { }, + func: () => {}, }, { name: 'Subscription status', - func: () => { }, + func: () => {}, }, { name: 'Change password', - func: () => { }, + func: () => {}, }, { name: 'Logout', func: async () => { await db.user.logout(); - dispatch({ type: ACTIONS.USER, user: null }); - dispatch({ type: ACTIONS.CLEAR_ALL }); + dispatch({type: ACTIONS.USER, user: null}); + dispatch({type: ACTIONS.CLEAR_ALL}); ToastEvent.show('Logged out, syncing disabled', 'success'); }, }, @@ -193,74 +192,74 @@ export const Settings = ({ navigation }) => { ))} ) : ( - <> - { - DDS.isTab - ? eSendEvent(eOpenLoginDialog) - : NavigationService.navigate('Login'); - }} - activeOpacity={opacity / 2} + <> + { + DDS.isTab + ? eSendEvent(eOpenLoginDialog) + : NavigationService.navigate('Login'); + }} + activeOpacity={opacity / 2} + style={{ + paddingVertical: pv + 5, + marginBottom: pv + 5, + width: '100%', + flexDirection: 'row', + alignItems: 'center', + backgroundColor: colors.shade, + borderRadius: 5, + paddingHorizontal: 6, + }}> + - - - + + - + - - You are not logged in + You are not logged in - - Login to sync notes. + + Login to sync notes. - + - - - - - - )} + + + + + + )} { { if (!colors.night) { - MMKV.setStringAsync('theme', JSON.stringify({ night: true })); + MMKV.setStringAsync('theme', JSON.stringify({night: true})); changeColorScheme(COLOR_SCHEME_DARK); } else { - MMKV.setStringAsync('theme', JSON.stringify({ night: false })); + MMKV.setStringAsync('theme', JSON.stringify({night: false})); changeColorScheme(COLOR_SCHEME_LIGHT); } @@ -389,18 +388,18 @@ export const Settings = ({ navigation }) => { scale === 1 ? (scale = 1.1) : scale === 1.1 - ? (scale = 1.2) - : scale === 1.2 - ? (scale = 1.3) - : scale === 1.3 - ? (scale = 1.4) - : scale === 1.4 - ? (scale = 1.5) - : scale === 1.5 - ? (scale = 0.8) - : scale === 0.8 - ? (scale = 0.9) - : (scale = 0.9 ? (scale = 1) : (scale = 1)); + ? (scale = 1.2) + : scale === 1.2 + ? (scale = 1.3) + : scale === 1.3 + ? (scale = 1.4) + : scale === 1.4 + ? (scale = 1.5) + : scale === 1.5 + ? (scale = 0.8) + : scale === 0.8 + ? (scale = 0.9) + : (scale = 0.9 ? (scale = 1) : (scale = 1)); await setSetting(settings, 'fontScale', scale); }} @@ -588,15 +587,15 @@ export const Settings = ({ navigation }) => { {[ { name: 'Terms of Service', - func: () => { }, + func: () => {}, }, { name: 'Privacy Policy', - func: () => { }, + func: () => {}, }, { name: 'About', - func: () => { }, + func: () => {}, }, ].map(item => ( { focused={isFocused} onRefresh={_onRefresh} renderItem={_renderItem} - placeholder={} + //placeholder={} placeholderText="Deleted notes & notebooks appear here." />