kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-24 04:25:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use react-native-screens for web as well

Browse Source
This commit is contained in:
Satyajit Sahoo
2021-05-09 06:24:04 +02:00
parent 8da4c58065
commit 4294318210
4 changed files with 8 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/stack/src/views/Screens.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Animated, View, Platform, ViewProps } from 'react-native';
import { Animated, View, ViewProps } from 'react-native';
let Screens: typeof import('react-native-screens') | undefined;
@@ -9,29 +9,6 @@ try {
// Ignore
}
// So we use our custom implementation to handle a11y better
class WebScreen extends React.Component<
ViewProps & {
active: number;
children: React.ReactNode;
}
> {
render() {
const { active, style, ...rest } = this.props;
return (
<View
// @ts-expect-error: hidden exists on web, but not in React Native
hidden={!active}
style={[style, { display: active ? 'flex' : 'none' }]}
{...rest}
/>
);
}
}
const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);
export const MaybeScreenContainer = ({
enabled,
...rest
@@ -39,7 +16,7 @@ export const MaybeScreenContainer = ({
enabled: boolean;
children: React.ReactNode;
}) => {
if (enabled && Platform.OS !== 'web' && Screens?.screensEnabled()) {
if (Screens != null) {
return (
// @ts-ignore
<Screens.ScreenContainer enabled={enabled} {...rest} />
@@ -58,11 +35,7 @@ export const MaybeScreen = ({
active: 0 | 1 | Animated.AnimatedInterpolation;
children: React.ReactNode;
}) => {
if (enabled && Platform.OS === 'web') {
return <AnimatedWebScreen active={active} {...rest} />;
}
if (enabled && Screens?.screensEnabled()) {
if (Screens != null) {
return (
<Screens.Screen enabled={enabled} activityState={active} {...rest} />
);