Skip to content
This repository has been archived by the owner on Feb 8, 2020. It is now read-only.

Commit

Permalink
fix: workaround SafereaProvider causing jumping
Browse files Browse the repository at this point in the history
see #174
  • Loading branch information
satya164 committed Nov 16, 2019
1 parent 31b8819 commit c17ad18
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 13 deletions.
6 changes: 3 additions & 3 deletions packages/bottom-tabs/src/views/BottomTabView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { Route, CommonActions } from '@react-navigation/core';
import { TabNavigationState } from '@react-navigation/routers';
// eslint-disable-next-line import/no-unresolved
import { ScreenContainer } from 'react-native-screens';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import SafeAreaProviderCompat from './SafeAreaProviderCompat';
import ResourceSavingScene from './ResourceSavingScene';
import BottomTabBar from './BottomTabBar';
import {
Expand Down Expand Up @@ -210,7 +210,7 @@ export default class BottomTabView extends React.Component<Props, State> {
const { loaded } = this.state;

return (
<SafeAreaProvider>
<SafeAreaProviderCompat>
<View style={styles.container}>
<ScreenContainer style={styles.pages}>
{routes.map((route, index) => {
Expand Down Expand Up @@ -246,7 +246,7 @@ export default class BottomTabView extends React.Component<Props, State> {
</ScreenContainer>
{this.renderTabBar()}
</View>
</SafeAreaProvider>
</SafeAreaProviderCompat>
);
}
}
Expand Down
26 changes: 26 additions & 0 deletions packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import {
SafeAreaProvider,
SafeAreaConsumer,
} from 'react-native-safe-area-context';

type Props = {
children: React.ReactNode;
};

export default function SafeAreaProviderCompat({ children }: Props) {
return (
<SafeAreaConsumer>
{insets => {
if (insets) {
// If we already have insets, don't wrap the stack in another safe area provider
// This avoids an issue with updates at the cost of potentially incorrect values
// https://github.com/react-navigation/navigation-ex/issues/174
return children;
}

return <SafeAreaProvider>{children}</SafeAreaProvider>;
}}
</SafeAreaConsumer>
);
}
6 changes: 3 additions & 3 deletions packages/drawer/src/views/DrawerView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
Platform,
ScaledSize,
} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
// eslint-disable-next-line import/no-unresolved
import { ScreenContainer } from 'react-native-screens';
import { PanGestureHandler } from 'react-native-gesture-handler';
Expand All @@ -16,6 +15,7 @@ import {
} from '@react-navigation/routers';

import DrawerGestureContext from '../utils/DrawerGestureContext';
import SafeAreaProviderCompat from './SafeAreaProviderCompat';
import ResourceSavingScene from './ResourceSavingScene';
import DrawerContent from './DrawerContent';
import Drawer from './Drawer';
Expand Down Expand Up @@ -213,7 +213,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
const { gestureEnabled } = descriptors[activeKey].options;

return (
<SafeAreaProvider>
<SafeAreaProviderCompat>
<DrawerGestureContext.Provider value={this.drawerGestureRef}>
<Drawer
open={state.isDrawerOpen}
Expand All @@ -235,7 +235,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
renderSceneContent={this.renderContent}
/>
</DrawerGestureContext.Provider>
</SafeAreaProvider>
</SafeAreaProviderCompat>
);
}
}
Expand Down
26 changes: 26 additions & 0 deletions packages/drawer/src/views/SafeAreaProviderCompat.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import {
SafeAreaProvider,
SafeAreaConsumer,
} from 'react-native-safe-area-context';

type Props = {
children: React.ReactNode;
};

export default function SafeAreaProviderCompat({ children }: Props) {
return (
<SafeAreaConsumer>
{insets => {
if (insets) {
// If we already have insets, don't wrap the stack in another safe area provider
// This avoids an issue with updates at the cost of potentially incorrect values
// https://github.com/react-navigation/navigation-ex/issues/174
return children;
}

return <SafeAreaProvider>{children}</SafeAreaProvider>;
}}
</SafeAreaConsumer>
);
}
26 changes: 26 additions & 0 deletions packages/stack/src/views/SafeAreaProviderCompat.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import {
SafeAreaProvider,
SafeAreaConsumer,
} from 'react-native-safe-area-context';

type Props = {
children: React.ReactNode;
};

export default function SafeAreaProviderCompat({ children }: Props) {
return (
<SafeAreaConsumer>
{insets => {
if (insets) {
// If we already have insets, don't wrap the stack in another safe area provider
// This avoids an issue with updates at the cost of potentially incorrect values
// https://github.com/react-navigation/navigation-ex/issues/174
return children;
}

return <SafeAreaProvider>{children}</SafeAreaProvider>;
}}
</SafeAreaConsumer>
);
}
11 changes: 4 additions & 7 deletions packages/stack/src/views/Stack/StackView.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import * as React from 'react';
import { Platform } from 'react-native';
import {
SafeAreaProvider,
SafeAreaConsumer,
EdgeInsets,
} from 'react-native-safe-area-context';
import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
import { Route } from '@react-navigation/core';
import { StackActions, StackNavigationState } from '@react-navigation/routers';

import Stack from './Stack';
import HeaderContainer, {
Props as HeaderContainerProps,
} from '../Header/HeaderContainer';
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
import {
StackNavigationHelpers,
StackNavigationConfig,
Expand Down Expand Up @@ -328,7 +325,7 @@ class StackView extends React.Component<Props, State> {
mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';

return (
<SafeAreaProvider>
<SafeAreaProviderCompat>
<SafeAreaConsumer>
{insets => (
<Stack
Expand All @@ -355,7 +352,7 @@ class StackView extends React.Component<Props, State> {
/>
)}
</SafeAreaConsumer>
</SafeAreaProvider>
</SafeAreaProviderCompat>
);
}
}
Expand Down

1 comment on commit c17ad18

@janicduplessis
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Gonna try to look at this next week

Please sign in to comment.