Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: fix random onLayout events in Bottom Navigation. fixes #800
  • Loading branch information
satya164 committed Feb 1, 2019
1 parent c5ab9a3 commit a079626
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 94 deletions.
1 change: 1 addition & 0 deletions .flowconfig
Expand Up @@ -25,6 +25,7 @@
.*/node_modules/@expo/traveling-fastlane-darwin/.*

[untyped]
<PROJECT_ROOT>/node_modules/react-native-safe-area-view
<PROJECT_ROOT>/example/node_modules/react-native

[include]
Expand Down
3 changes: 2 additions & 1 deletion package.json
Expand Up @@ -55,7 +55,8 @@
"color": "^2.0.1",
"create-react-context": "^0.2.3",
"hoist-non-react-statics": "^3.1.0",
"react-lifecycles-compat": "^3.0.4"
"react-lifecycles-compat": "^3.0.4",
"react-native-safe-area-view": "^0.12.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
Expand Down
17 changes: 13 additions & 4 deletions src/components/BottomNavigation.js
Expand Up @@ -6,12 +6,12 @@ import {
View,
Animated,
TouchableWithoutFeedback,
SafeAreaView,
StyleSheet,
Platform,
Keyboard,
} from 'react-native';
import { polyfill } from 'react-lifecycles-compat';
import SafeAreaView from 'react-native-safe-area-view';
import color from 'color';
import Icon from './Icon';
import Surface from './Surface';
Expand Down Expand Up @@ -500,14 +500,22 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
});
};

_handleLayout = e =>
_handleLayout = e => {
const { layout } = this.state;
const { height, width } = e.nativeEvent.layout;

if (height === layout.height && width === layout.width) {
return;
}

this.setState({
layout: {
height: e.nativeEvent.layout.height,
width: e.nativeEvent.layout.width,
height,
width,
measured: true,
},
});
};

_handleTabPress = (index: number) => {
const { navigationState, onTabPress, onIndexChange } = this.props;
Expand Down Expand Up @@ -673,6 +681,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
>
<Animated.View style={[styles.barContent, { backgroundColor }]}>
<SafeAreaView
forceInset={{ top: 'never', bottom: 'always' }}
style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
>
{shifting ? (
Expand Down
192 changes: 104 additions & 88 deletions src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
Expand Up @@ -89,17 +89,19 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -662,7 +664,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
/>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -757,17 +759,19 @@ exports[`hides labels in shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -1350,7 +1354,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
/>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -1445,17 +1449,19 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -1958,7 +1964,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -2053,17 +2059,19 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 480,
},
]
Object {
"flexDirection": "row",
"maxWidth": 480,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -2836,7 +2844,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -2931,17 +2939,19 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -3720,7 +3730,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -3815,17 +3825,19 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -4525,7 +4537,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -4620,17 +4632,19 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 504,
},
]
Object {
"flexDirection": "row",
"maxWidth": 504,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -5409,7 +5423,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -5504,17 +5518,19 @@ exports[`renders shifting bottom navigation 1`] = `
}
}
>
<RCTSafeAreaView
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"flexDirection": "row",
"width": "100%",
},
Object {
"maxWidth": 480,
},
]
Object {
"flexDirection": "row",
"maxWidth": 480,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
}
}
>
<View
Expand Down Expand Up @@ -6662,7 +6678,7 @@ exports[`renders shifting bottom navigation 1`] = `
</View>
</View>
</View>
</RCTSafeAreaView>
</View>
</View>
</View>
</View>
Expand Down

0 comments on commit a079626

Please sign in to comment.