Skip to content

Commit

Permalink
fix: replace safe-area-view with iphonex-helper (#2422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@satya164
satya164 committed Dec 14, 2020
1 parent b960ae6 commit d660113
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 119 deletions.
4 changes: 2 additions & 2 deletions docs/pages/5.react-native-web.md
View file
Expand Up @@ -30,7 +30,7 @@ yarn add --dev react-app-rewired
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: "babel-loader",
options: {
Expand Down Expand Up @@ -176,7 +176,7 @@ Now, add the following in the `module.rules` array in your webpack config:
```js
{
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -48,7 +48,7 @@
"dependencies": {
"@callstack/react-theme-provider": "^3.0.5",
"color": "^3.1.2",
"react-native-safe-area-view": "^0.14.9"
"react-native-iphone-x-helper": "^1.3.1"
},
"devDependencies": {
"@babel/core": "^7.10.3",
Expand Down
13 changes: 8 additions & 5 deletions src/components/BottomNavigation.tsx
View file
Expand Up @@ -13,7 +13,7 @@ import {
ViewStyle,
LayoutChangeEvent,
} from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { getBottomSpace } from 'react-native-iphone-x-helper';
import color from 'color';
import overlay from '../styles/overlay';
import Icon, { IconSource } from './Icon';
Expand Down Expand Up @@ -271,6 +271,7 @@ const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animat
const MIN_TAB_WIDTH = 96;
const MAX_TAB_WIDTH = 168;
const BAR_HEIGHT = 56;
const BOTTOM_INSET = getBottomSpace();
const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;

const Touchable = ({
Expand Down Expand Up @@ -784,9 +785,11 @@ class BottomNavigation extends React.Component<Props, State> {
onLayout={this.handleLayout}
>
<Animated.View style={[styles.barContent, { backgroundColor }]}>
<SafeAreaView
forceInset={{ top: 'never', bottom: 'always' }}
style={[styles.items, { maxWidth: maxTabBarWidth }]}
<View
style={[
styles.items,
{ marginBottom: BOTTOM_INSET, maxWidth: maxTabBarWidth },
]}
>
{shifting ? (
<Animated.View
Expand Down Expand Up @@ -1006,7 +1009,7 @@ class BottomNavigation extends React.Component<Props, State> {
),
});
})}
</SafeAreaView>
</View>
</Animated.View>
</Surface>
</View>
Expand Down
19 changes: 15 additions & 4 deletions src/components/Modal.tsx
View file
Expand Up @@ -7,8 +7,12 @@ import {
StyleSheet,
TouchableWithoutFeedback,
ViewStyle,
View,
} from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import {
getStatusBarHeight,
getBottomSpace,
} from 'react-native-iphone-x-helper';
import Surface from './Surface';
import { withTheme } from '../core/theming';

Expand Down Expand Up @@ -49,6 +53,8 @@ type State = {
};

const DEFAULT_DURATION = 220;
const TOP_INSET = getStatusBarHeight(true);
const BOTTOM_INSET = getBottomSpace();

/**
* The Modal component is a simple way to present content above an enclosing view.
Expand Down Expand Up @@ -89,7 +95,6 @@ const DEFAULT_DURATION = 220;
* export default MyComponent;
* ```
*/

class Modal extends React.Component<Props, State> {
static defaultProps = {
dismissable: true,
Expand Down Expand Up @@ -212,7 +217,13 @@ class Modal extends React.Component<Props, State> {
]}
/>
</TouchableWithoutFeedback>
<SafeAreaView style={styles.wrapper} pointerEvents="box-none">
<View
style={[
styles.wrapper,
{ marginTop: TOP_INSET, marginBottom: BOTTOM_INSET },
]}
pointerEvents="box-none"
>
<Surface
style={
[{ opacity }, styles.content, contentContainerStyle] as StyleProp<
Expand All @@ -222,7 +233,7 @@ class Modal extends React.Component<Props, State> {
>
{children}
</Surface>
</SafeAreaView>
</View>
</Animated.View>
);
}
Expand Down
176 changes: 80 additions & 96 deletions src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
View file
Expand Up @@ -89,19 +89,17 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -763,19 +761,17 @@ exports[`hides labels in shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -1457,19 +1453,17 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -2065,19 +2059,17 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 480,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 480,
},
]
}
>
<View
Expand Down Expand Up @@ -2945,19 +2937,17 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -3865,19 +3855,17 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -4691,19 +4679,17 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 504,
},
]
}
>
<View
Expand Down Expand Up @@ -5611,19 +5597,17 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<View
forwardedRef={[Function]}
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flexDirection": "row",
"maxWidth": 480,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"marginBottom": 0,
"maxWidth": 480,
},
]
}
>
<View
Expand Down
15 changes: 4 additions & 11 deletions yarn.lock
View file
Expand Up @@ -6486,11 +6486,6 @@ hermes-engine@~0.4.0:
resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.4.1.tgz#2d02b295596298643c4d24b86687eb554db9e950"
integrity sha512-Y3JFC8PD7eN3KpnrzrmvMAqp0IwnZrmP/oGOptvaSu33d7Zq/8b/2lHlZZkNvRl7/I1Q0umTX8TByK7zzLfTXA==

hoist-non-react-statics@^2.3.1:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==

hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
Expand Down Expand Up @@ -9682,12 +9677,10 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react-native-safe-area-view@^0.14.9:
version "0.14.9"
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"
integrity sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==
dependencies:
hoist-non-react-statics "^2.3.1"
react-native-iphone-x-helper@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==

react-native-testing-library@^1.5.0:
version "1.14.0"
Expand Down

0 comments on commit d660113

Please sign in to comment.