ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Fixed padding breaking other components offsets

Browse source
This commit is contained in:
Arnaud Vergnet 2020-05-31 17:18:53 +02:00
parent e2cdc26442
commit 1c2d2ab1ca
3 changed files with 19 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
App.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Platform, StatusBar, View, YellowBox} from 'react-native'; import {Platform, SafeAreaView, StatusBar, View, YellowBox} from 'react-native';
import LocaleManager from './src/managers/LocaleManager'; import LocaleManager from './src/managers/LocaleManager';
import AsyncStorageManager from "./src/managers/AsyncStorageManager"; import AsyncStorageManager from "./src/managers/AsyncStorageManager";
import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider"; import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
@ -17,7 +17,6 @@ import URLHandler from "./src/utils/URLHandler";
import {setSafeBounceHeight} from "react-navigation-collapsible"; import {setSafeBounceHeight} from "react-navigation-collapsible";
import SplashScreen from 'react-native-splash-screen' import SplashScreen from 'react-native-splash-screen'
import {OverflowMenuProvider} from "react-navigation-header-buttons"; import {OverflowMenuProvider} from "react-navigation-header-buttons";
import {SafeAreaProvider} from "react-native-safe-area-context";
// Native optimizations https://reactnavigation.org/docs/react-native-screens // Native optimizations https://reactnavigation.org/docs/react-native-screens
// Crashes app when navigating away from webview on android 9+ // Crashes app when navigating away from webview on android 9+
@ -193,16 +192,14 @@ export default class App extends React.Component<Props, State> {
<PaperProvider theme={this.state.currentTheme}> <PaperProvider theme={this.state.currentTheme}>
<OverflowMenuProvider> <OverflowMenuProvider>
<View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}> <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
<SafeAreaProvider <SafeAreaView style={{flex: 1}}>
edges={['bottom']}
>
<NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}> <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
<MainNavigator <MainNavigator
defaultHomeRoute={this.defaultHomeRoute} defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData} defaultHomeData={this.defaultHomeData}
/> />
</NavigationContainer> </NavigationContainer>
</SafeAreaProvider> </SafeAreaView>
</View> </View>
</OverflowMenuProvider> </OverflowMenuProvider>
</PaperProvider> </PaperProvider>

8
src/components/Tabbar/CustomTabBar.js
View file

@ -3,8 +3,6 @@ import {withTheme} from 'react-native-paper';
import TabIcon from "./TabIcon"; import TabIcon from "./TabIcon";
import TabHomeIcon from "./TabHomeIcon"; import TabHomeIcon from "./TabHomeIcon";
import {Animated} from 'react-native'; import {Animated} from 'react-native';
import {withSafeArea} from "../../utils/withSafeArea";
import {EdgeInsets} from "react-native-safe-area-context";
type Props = { type Props = {
state: Object, state: Object,
@ -12,7 +10,6 @@ type Props = {
navigation: Object, navigation: Object,
theme: Object, theme: Object,
collapsibleStack: Object, collapsibleStack: Object,
safeArea: EdgeInsets
} }
type State = { type State = {
@ -134,14 +131,13 @@ class CustomTabBar extends React.Component<Props, State> {
useNativeDriver useNativeDriver
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
height: CustomTabBar.TAB_BAR_HEIGHT + this.props.safeArea.bottom, height: CustomTabBar.TAB_BAR_HEIGHT,
width: '100%', width: '100%',
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
left: 0, left: 0,
backgroundColor: this.props.theme.colors.surface, backgroundColor: this.props.theme.colors.surface,
transform: [{translateY: this.state.translateY}], transform: [{translateY: this.state.translateY}],
paddingBottom: this.props.safeArea.bottom,
}} }}
> >
{this.props.state.routes.map(this.renderIcon)} {this.props.state.routes.map(this.renderIcon)}
@ -150,4 +146,4 @@ class CustomTabBar extends React.Component<Props, State> {
} }
} }
export default withSafeArea(withTheme(CustomTabBar)); export default withTheme(CustomTabBar);

14
src/utils/withSafeArea.js
View file

@ -1,14 +0,0 @@
import React from 'react';
import {useSafeArea} from 'react-native-safe-area-context';
export const withSafeArea = (Component: any) => {
return React.forwardRef((props: any, ref: any) => {
let safeArea = useSafeArea();
// safeArea.bottom = 0;
return <Component
safeArea={safeArea}
ref={ref}
{...props}
/>;
});
};