diff --git a/packages/drawer/src/views/Drawer.tsx b/packages/drawer/src/views/Drawer.tsx index 5bea6612..86dcbfb1 100644 --- a/packages/drawer/src/views/Drawer.tsx +++ b/packages/drawer/src/views/Drawer.tsx @@ -69,6 +69,7 @@ const SPRING_CONFIG = { restSpeedThreshold: 0.01, }; +const ANIMATED_ZERO = new Animated.Value(0); const ANIMATED_ONE = new Animated.Value(1); type Binary = 0 | 1; @@ -103,7 +104,10 @@ export default class DrawerView extends React.Component { drawerPosition: I18nManager.isRTL ? 'left' : 'right', drawerType: 'front', gestureEnabled: true, - swipeEnabled: Platform.OS !== 'web', + swipeEnabled: + Platform.OS !== 'web' && + Platform.OS !== 'windows' && + Platform.OS !== 'macos', swipeEdgeWidth: 32, swipeVelocityThreshold: 500, keyboardDismissMode: 'on-drag', @@ -577,19 +581,19 @@ export default class DrawerView extends React.Component { const contentTranslateX = drawerType === 'front' || drawerType === 'permanent' - ? 0 + ? ANIMATED_ZERO : this.translateX; const drawerTranslateX = drawerType === 'permanent' - ? 0 + ? ANIMATED_ZERO : drawerType === 'back' ? I18nManager.isRTL ? multiply( sub(this.containerWidth, this.drawerWidth), isRight ? 1 : -1 ) - : 0 + : ANIMATED_ZERO : this.translateX; const offset = @@ -649,7 +653,9 @@ export default class DrawerView extends React.Component { { // Disable overlay if sidebar is permanent - drawerType === 'permanent' ? null : Platform.OS === 'web' ? ( + drawerType === 'permanent' ? null : Platform.OS === 'web' || + Platform.OS === 'windows' || + Platform.OS === 'macos' ? ( this.toggleDrawer(false) : undefined diff --git a/packages/drawer/src/views/GestureHandler.macos.tsx b/packages/drawer/src/views/GestureHandler.macos.tsx new file mode 100644 index 00000000..fed06d52 --- /dev/null +++ b/packages/drawer/src/views/GestureHandler.macos.tsx @@ -0,0 +1,7 @@ +export { + PanGestureHandler, + TapGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/drawer/src/views/GestureHandler.tsx b/packages/drawer/src/views/GestureHandler.tsx index a3829752..fed06d52 100644 --- a/packages/drawer/src/views/GestureHandler.tsx +++ b/packages/drawer/src/views/GestureHandler.tsx @@ -1,31 +1,7 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import type { - PanGestureHandlerProperties, - TapGestureHandlerProperties, -} from 'react-native-gesture-handler'; - -const Dummy: any = ({ children }: { children: React.ReactNode }) => ( - <>{children} -); - -export const PanGestureHandler = Dummy as React.ComponentType< - PanGestureHandlerProperties ->; - -export const TapGestureHandler = Dummy as React.ComponentType< - TapGestureHandlerProperties ->; - -export const GestureHandlerRootView = View; - -export const GestureState = { - UNDETERMINED: 0, - FAILED: 1, - BEGAN: 2, - CANCELLED: 3, - ACTIVE: 4, - END: 5, -}; - +export { + PanGestureHandler, + TapGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/drawer/src/views/GestureHandler.windows.tsx b/packages/drawer/src/views/GestureHandler.windows.tsx new file mode 100644 index 00000000..fed06d52 --- /dev/null +++ b/packages/drawer/src/views/GestureHandler.windows.tsx @@ -0,0 +1,7 @@ +export { + PanGestureHandler, + TapGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/drawer/src/views/GestureHandlerStub.tsx b/packages/drawer/src/views/GestureHandlerStub.tsx new file mode 100644 index 00000000..a3829752 --- /dev/null +++ b/packages/drawer/src/views/GestureHandlerStub.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { View } from 'react-native'; +import type { + PanGestureHandlerProperties, + TapGestureHandlerProperties, +} from 'react-native-gesture-handler'; + +const Dummy: any = ({ children }: { children: React.ReactNode }) => ( + <>{children} +); + +export const PanGestureHandler = Dummy as React.ComponentType< + PanGestureHandlerProperties +>; + +export const TapGestureHandler = Dummy as React.ComponentType< + TapGestureHandlerProperties +>; + +export const GestureHandlerRootView = View; + +export const GestureState = { + UNDETERMINED: 0, + FAILED: 1, + BEGAN: 2, + CANCELLED: 3, + ACTIVE: 4, + END: 5, +}; + +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/drawer/src/views/Overlay.tsx b/packages/drawer/src/views/Overlay.tsx index 0fe7a57a..1691d716 100644 --- a/packages/drawer/src/views/Overlay.tsx +++ b/packages/drawer/src/views/Overlay.tsx @@ -25,7 +25,14 @@ const Overlay = React.forwardRef(function Overlay( ) { const animatedStyle = { opacity: interpolate(progress, { - inputRange: [PROGRESS_EPSILON, 1], + // Default input range is [PROGRESS_EPSILON, 1] + // On Windows, the output value is 1 when input value is out of range for some reason + // The default value 0 will be interpolated to 1 in this case, which is not what we want. + // Therefore changing input range on Windows to [0,1] instead. + inputRange: + Platform.OS === 'windows' || Platform.OS === 'macos' + ? [0, 1] + : [PROGRESS_EPSILON, 1], outputRange: [0, 1], }), // We don't want the user to be able to press through the overlay when drawer is open diff --git a/packages/stack/src/navigators/createStackNavigator.tsx b/packages/stack/src/navigators/createStackNavigator.tsx index befda354..6b56574e 100644 --- a/packages/stack/src/navigators/createStackNavigator.tsx +++ b/packages/stack/src/navigators/createStackNavigator.tsx @@ -29,7 +29,10 @@ function StackNavigator({ }: Props) { const defaultOptions = { gestureEnabled: Platform.OS === 'ios', - animationEnabled: Platform.OS !== 'web', + animationEnabled: + Platform.OS !== 'web' && + Platform.OS !== 'windows' && + Platform.OS !== 'macos', }; const { state, descriptors, navigation } = useNavigationBuilder< diff --git a/packages/stack/src/views/GestureHandler.macos.tsx b/packages/stack/src/views/GestureHandler.macos.tsx new file mode 100644 index 00000000..1b2b970c --- /dev/null +++ b/packages/stack/src/views/GestureHandler.macos.tsx @@ -0,0 +1,6 @@ +export { + PanGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/stack/src/views/GestureHandler.tsx b/packages/stack/src/views/GestureHandler.tsx index f935b716..1b2b970c 100644 --- a/packages/stack/src/views/GestureHandler.tsx +++ b/packages/stack/src/views/GestureHandler.tsx @@ -1,24 +1,6 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import type { PanGestureHandlerProperties } from 'react-native-gesture-handler'; - -const Dummy: any = ({ children }: { children: React.ReactNode }) => ( - <>{children} -); - -export const PanGestureHandler = Dummy as React.ComponentType< - PanGestureHandlerProperties ->; - -export const GestureHandlerRootView = View; - -export const GestureState = { - UNDETERMINED: 0, - FAILED: 1, - BEGAN: 2, - CANCELLED: 3, - ACTIVE: 4, - END: 5, -}; - +export { + PanGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/stack/src/views/GestureHandler.windows.tsx b/packages/stack/src/views/GestureHandler.windows.tsx new file mode 100644 index 00000000..1b2b970c --- /dev/null +++ b/packages/stack/src/views/GestureHandler.windows.tsx @@ -0,0 +1,6 @@ +export { + PanGestureHandler, + GestureHandlerRootView, + GestureState, +} from './GestureHandlerStub'; +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/stack/src/views/GestureHandlerStub.tsx b/packages/stack/src/views/GestureHandlerStub.tsx new file mode 100644 index 00000000..f935b716 --- /dev/null +++ b/packages/stack/src/views/GestureHandlerStub.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { View } from 'react-native'; +import type { PanGestureHandlerProperties } from 'react-native-gesture-handler'; + +const Dummy: any = ({ children }: { children: React.ReactNode }) => ( + <>{children} +); + +export const PanGestureHandler = Dummy as React.ComponentType< + PanGestureHandlerProperties +>; + +export const GestureHandlerRootView = View; + +export const GestureState = { + UNDETERMINED: 0, + FAILED: 1, + BEGAN: 2, + CANCELLED: 3, + ACTIVE: 4, + END: 5, +}; + +export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; diff --git a/packages/stack/src/views/MaskedView.macos.tsx b/packages/stack/src/views/MaskedView.macos.tsx new file mode 100644 index 00000000..7ab9a180 --- /dev/null +++ b/packages/stack/src/views/MaskedView.macos.tsx @@ -0,0 +1 @@ +export { default } from './MaskedViewStub'; diff --git a/packages/stack/src/views/MaskedView.tsx b/packages/stack/src/views/MaskedView.tsx index b7881d72..7ab9a180 100644 --- a/packages/stack/src/views/MaskedView.tsx +++ b/packages/stack/src/views/MaskedView.tsx @@ -1,10 +1 @@ -import type * as React from 'react'; - -type Props = { - maskElement: React.ReactElement; - children: React.ReactElement; -}; - -export default function MaskedView({ children }: Props) { - return children; -} +export { default } from './MaskedViewStub'; diff --git a/packages/stack/src/views/MaskedView.windows.tsx b/packages/stack/src/views/MaskedView.windows.tsx new file mode 100644 index 00000000..7ab9a180 --- /dev/null +++ b/packages/stack/src/views/MaskedView.windows.tsx @@ -0,0 +1 @@ +export { default } from './MaskedViewStub'; diff --git a/packages/stack/src/views/MaskedViewStub.tsx b/packages/stack/src/views/MaskedViewStub.tsx new file mode 100644 index 00000000..b7881d72 --- /dev/null +++ b/packages/stack/src/views/MaskedViewStub.tsx @@ -0,0 +1,10 @@ +import type * as React from 'react'; + +type Props = { + maskElement: React.ReactElement; + children: React.ReactElement; +}; + +export default function MaskedView({ children }: Props) { + return children; +} diff --git a/packages/stack/src/views/TouchableItem.macos.tsx b/packages/stack/src/views/TouchableItem.macos.tsx new file mode 100644 index 00000000..aeb894af --- /dev/null +++ b/packages/stack/src/views/TouchableItem.macos.tsx @@ -0,0 +1,3 @@ +import { TouchableOpacity } from 'react-native'; + +export const TouchableItem = (TouchableOpacity as any) as typeof import('./TouchableItem.native').TouchableItem; diff --git a/packages/stack/src/views/TouchableItem.windows.tsx b/packages/stack/src/views/TouchableItem.windows.tsx new file mode 100644 index 00000000..aeb894af --- /dev/null +++ b/packages/stack/src/views/TouchableItem.windows.tsx @@ -0,0 +1,3 @@ +import { TouchableOpacity } from 'react-native'; + +export const TouchableItem = (TouchableOpacity as any) as typeof import('./TouchableItem.native').TouchableItem;