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

fix: enable detachInactiveScreens by default on web for better a11y

Browse Source
This commit is contained in:
Satyajit Sahoo
2021-01-14 14:16:15 +01:00
parent 6c5e196459
commit 4954d6aae3
4 changed files with 137 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/bottom-tabs/src/views/ResourceSavingScene.tsx
View File

@@ -16,45 +16,60 @@ type Props = {
const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
export default class ResourceSavingScene extends React.Component<Props> {
render() {
// react-native-screens is buggy on web
if (screensEnabled?.() && Platform.OS !== 'web') {
const { isVisible, ...rest } = this.props;
if (shouldUseActivityState) {
return <Screen activityState={isVisible ? 2 : 0} {...rest} />;
} else {
return <Screen active={isVisible ? 1 : 0} {...rest} />;
}
}
const { isVisible, children, style, ...rest } = this.props;
return (
<View
style={[
styles.container,
Platform.OS === 'web'
? { display: isVisible ? 'flex' : 'none' }
: null,
style,
]}
collapsable={false}
removeClippedSubviews={
// On iOS, set removeClippedSubviews to true only when not focused
// This is an workaround for a bug where the clipped view never re-appears
Platform.OS === 'ios' ? !isVisible : true
}
pointerEvents={isVisible ? 'auto' : 'none'}
{...rest}
>
<View style={isVisible ? styles.attached : styles.detached}>
export default function ResourceSavingScene({
isVisible,
children,
style,
...rest
}: Props) {
// react-native-screens is buggy on web
if (screensEnabled?.() && Platform.OS !== 'web') {
if (shouldUseActivityState) {
return (
<Screen activityState={isVisible ? 2 : 0} style={style} {...rest}>
{children}
</View>
</View>
);
</Screen>
);
} else {
return (
<Screen active={isVisible ? 1 : 0} style={style} {...rest}>
{children}
</Screen>
);
}
}
return (
<View
// @ts-expect-error: hidden exists on web, but not in React Native
hidden={!isVisible}
style={[
styles.container,
Platform.OS === 'web' ? { display: isVisible ? 'flex' : 'none' } : null,
style,
]}
collapsable={false}
removeClippedSubviews={
// On iOS, set removeClippedSubviews to true only when not focused
// This is an workaround for a bug where the clipped view never re-appears
Platform.OS === 'ios' ? !isVisible : true
}
pointerEvents={isVisible ? 'auto' : 'none'}
{...rest}
>
<View
style={
Platform.OS === 'web'
? null
: isVisible
? styles.attached
: styles.detached
}
>
{children}
</View>
</View>
);
}
const styles = StyleSheet.create({