diff --git a/.gitignore b/.gitignore index 2418195..a1415e2 100644 --- a/.gitignore +++ b/.gitignore @@ -65,4 +65,4 @@ GoogleService-Info.plist google-services.json ios/tmp.xcconfig fastlane/report.xml -notifee.config.json +notifee.*.json diff --git a/src/components/Animations/Zoom/index.tsx b/src/components/Animations/Zoom/index.tsx new file mode 100644 index 0000000..315ce57 --- /dev/null +++ b/src/components/Animations/Zoom/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import Animated from 'react-native-reanimated' +import { useTimingTransition } from 'react-native-redash/lib/module/v1' + +import { ZoomProps } from './types' + +export const Zoom: React.FC = ({ show, maxZoomOut = 0.01, delay = 0, style, ...rest }) => { + const node = useTimingTransition(show ? 1 : maxZoomOut, { duration: 200, delay }) + + return ( + + ) +} diff --git a/src/components/Animations/Zoom/types.ts b/src/components/Animations/Zoom/types.ts new file mode 100644 index 0000000..66c6a32 --- /dev/null +++ b/src/components/Animations/Zoom/types.ts @@ -0,0 +1,10 @@ +import { ViewProps } from 'react-native' + +export interface ZoomProps extends ViewProps { + /** show/hide */ + show: boolean, + /** max zoom out value */ + maxZoomOut?: number, + /** animation delay */ + delay?: number, +} diff --git a/src/components/Picker/helpers.ts b/src/components/Picker/helpers.ts index 0b7010b..59d49ca 100644 --- a/src/components/Picker/helpers.ts +++ b/src/components/Picker/helpers.ts @@ -68,7 +68,7 @@ export const withDecay = (params: WithDecayParams) => { } const config = { toValue: new Value(0), - duration: new Value(1000), + duration: new Value(500), easing: Easing.bezier(0.22, 1, 0.36, 1), } return block([ diff --git a/src/routes/BottomNavigator/index.tsx b/src/routes/BottomNavigator/index.tsx index 53dd858..9441398 100644 --- a/src/routes/BottomNavigator/index.tsx +++ b/src/routes/BottomNavigator/index.tsx @@ -8,6 +8,7 @@ import overlay from 'util/overlay' import { FeedScreen } from 'screens/Feed' import { NotificationsScreen } from 'screens/Notifications' import { BeerTab } from 'screens/BeerTab' +import { Zoom } from 'components/Animations/Zoom' import { BottomNavigatorProps } from './types' @@ -87,18 +88,23 @@ export const BottomNavigator = ({ route }: BottomNavigatorProps) => { - + > + + ) diff --git a/src/screens/BottomSheet/index.tsx b/src/screens/BottomSheet/index.tsx index 486fe3d..5cf346e 100644 --- a/src/screens/BottomSheet/index.tsx +++ b/src/screens/BottomSheet/index.tsx @@ -28,14 +28,14 @@ export const BottomSheetScreen: React.FC = ({ navigation if (bsRef.current) { bsRef.current.snapTo(snapPoints.current.length - 2) } - }, [bsRef, snapPoints]) + }, []) // Animate on close - onCloseEnd will be called after const onOverlayPress = useCallback(() => { if (bsRef.current) { bsRef.current.snapTo(snapPoints.current.length - 1) } - }, [bsRef, snapPoints]) + }, []) // pop position in the navigation stack so the screen behind become interactive const handleOnCloseEnd = useCallback(() => { @@ -56,7 +56,9 @@ export const BottomSheetScreen: React.FC = ({ navigation BackHandler.addEventListener('hardwareBackPress', onBackPress) - return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress) + return () => { + BackHandler.removeEventListener('hardwareBackPress', onBackPress) + } }, [onOverlayPress]), ) @@ -97,6 +99,8 @@ export const BottomSheetScreen: React.FC = ({ navigation initialSnap={snapPoints.current.length - 1} renderContent={renderBSContent} renderHeader={renderHeader} + // TODO: this callback seems not to fire randomly + // the use case found was in using a as content which also has reanimated logic. related? onCloseEnd={handleOnCloseEnd} enabledContentGestureInteraction={false} /> diff --git a/src/store/preferences/index.ts b/src/store/preferences/index.ts index bace021..a542909 100644 --- a/src/store/preferences/index.ts +++ b/src/store/preferences/index.ts @@ -73,6 +73,7 @@ export const preferences: StoreonModule = (store) => { // schedule notification upsertClockifyReminder(newPreferences.clockify) + .catch((error) => console.warn('Failed to to upsert Clockify Reminder:', error)) return { preferences: newPreferences,