Temporary fix for statusbar height and image modal jump

App.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar} from 'react-native';
+import {Platform, StatusBar, YellowBox} from 'react-native';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
 import CustomIntroSlider from "./src/components/Custom/CustomIntroSlider";
@@ -18,6 +18,10 @@ import ConnectionManager from "./src/managers/ConnectionManager";
 import URLHandler from "./src/utils/URLHandler";
 import {setSafeBounceHeight} from "react-navigation-collapsible";
 
+YellowBox.ignoreWarnings([ // collapsible headers cause this warning, just ignore as it is not an issue
+    'Non-serializable values were found in the navigation state',
+]);
+
 type Props = {};
 
 type State = {
@@ -40,9 +44,6 @@ export default class App extends React.Component<Props, State> {
         currentTheme: null,
     };
 
-    onIntroDone: Function;
-    onUpdateTheme: Function;
-
     navigatorRef: Object;
 
     defaultRoute: string | null;
@@ -55,8 +56,6 @@ export default class App extends React.Component<Props, State> {
     constructor() {
         super();
         LocaleManager.initTranslations();
-        this.onIntroDone = this.onIntroDone.bind(this);
-        this.onUpdateTheme = this.onUpdateTheme.bind(this);
         SplashScreen.preventAutoHide();
         this.navigatorRef = React.createRef();
         this.defaultRoute = null;
@@ -82,25 +81,29 @@ export default class App extends React.Component<Props, State> {
     /**
      * Updates the theme
      */
-    onUpdateTheme() {
+    onUpdateTheme = () => {
         this.setState({
             currentTheme: ThemeManager.getCurrentTheme()
         });
         this.setupStatusBar();
-    }
+    };
 
     setupStatusBar() {
+        if (Platform.OS === 'ios') {
             if (ThemeManager.getNightMode()) {
                 StatusBar.setBarStyle('light-content', true);
             } else {
                 StatusBar.setBarStyle('dark-content', true);
             }
         }
+        // StatusBar.setTranslucent(false);
+        // StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface);
+    }
 
     /**
      * Callback when user ends the intro. Save in preferences to avaoid showing back the introSlides
      */
-    onIntroDone() {
+    onIntroDone = () => {
         this.setState({
             showIntro: false,
             showUpdate: false,
@@ -109,7 +112,7 @@ export default class App extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0');
         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.updateNumber.key, Update.number.toString());
         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showAprilFoolsStart.key, '0');
-    }
+    };
 
     async componentDidMount() {
         await this.loadAssetsAsync();

app.json

@@ -3,18 +3,30 @@
     "name": "Campus",
     "description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
     "slug": "application-amicale",
-    "scheme": "campus-insat",
+    "backgroundColor": "#ffffff",
     "privacy": "public",
+    "version": "2.0.0",
     "platforms": [
       "ios",
-      "android",
+      "android"
-      "web"
     ],
-    "version": "2.0.0",
     "orientation": "portrait",
     "primaryColor": "#be1522",
-    "userInterfaceStyle": "automatic",
     "icon": "./assets/android.icon.png",
+    "scheme": "campus-insat",
+    "facebookAutoInitEnabled": false,
+    "facebookAutoLogAppEventsEnabled": false,
+    "facebookAdvertiserIDCollectionEnabled": false,
+    "androidStatusBar": {
+      "barStyle": "light-content",
+      "hidden": false,
+      "translucent": false,
+      "backgroundColor": "#000000"
+    },
+    "androidNavigationBar": {
+      "barStyle": "light-content",
+      "backgroundColor": "#121212"
+    },
     "splash": {
       "backgroundColor": "#be1522",
       "resizeMode": "contain",
@@ -28,12 +40,13 @@
     "updates": {
       "enabled": false
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
     "ios": {
       "bundleIdentifier": "fr.amicaleinsat.application",
-      "icon": "./assets/ios.icon.png"
+      "icon": "./assets/ios.icon.png",
+      "appStoreUrl": "https://apps.apple.com/us/app/campus-amicale-insat/id1477722148?ls=1",
+      "usesIcloudStorage": false,
+      "usesAppleSignIn":  false,
+      "accessesContactNotes": false
     },
     "android": {
       "package": "fr.amicaleinsat.application",
@@ -43,10 +56,17 @@
         "foregroundImage": "./assets/android.adaptive-icon.png",
         "backgroundColor": "#be1522"
       },
+      "playStoreUrl": "https://play.google.com/store/apps/details?id=fr.amicaleinsat.application",
       "permissions": [
         "VIBRATE",
         "CAMERA"
       ]
-    }
+    },
+    "userInterfaceStyle": "automatic",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+
+
   }
 }

package.json

@@ -44,7 +44,7 @@
     "react-native-calendars": "^1.260.0",
     "react-native-collapsible": "^1.5.2",
     "react-native-gesture-handler": "~1.6.0",
-    "react-native-image-modal": "^1.0.1",
+    "react-native-image-modal": "^1.0.4",
     "react-native-modalize": "^1.3.6",
     "react-native-paper": "^3.8.0",
     "react-native-reanimated": "~1.7.0",

src/components/Lists/ProxiwashListItem.js

@@ -97,10 +97,10 @@ class ProxiwashListItem extends React.Component<Props> {
             />
             : <AnimatedIcon
                 icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-                animation={isRunning ? "flash" : undefined}
+                animation={isRunning ? "pulse" : undefined}
                 iterationCount={"infinite"}
                 easing={"linear"}
-                duration={2000}
+                duration={1000}
                 useNativeDriver
                 size={40}
                 color={colors.text}

src/components/Lists/WebSectionList.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {ERROR_TYPE, readData} from "../../utils/WebData";
 import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
-import {Animated, RefreshControl, View} from "react-native";
+import {Animated, Platform, RefreshControl, StatusBar, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -205,6 +205,12 @@ class WebSectionList extends React.PureComponent<Props, State> {
             dataset = this.props.createDataset(this.state.fetchedData);
         const shouldRenderHeader = this.props.renderSectionHeader !== null;
         const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             <View>
                 {/*$FlowFixMe*/}
@@ -213,7 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     extraData={this.props.updateData}
                     refreshControl={
                         <RefreshControl
-                            progressViewOffset={containerPaddingTop}
+                            progressViewOffset={padding}
                             refreshing={this.state.refreshing}
                             onRefresh={this.onRefresh}
                         />
@@ -235,10 +241,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     // Animations
                     onScroll={onScrollWithListener(this.props.onScroll)}
                     contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
+                        paddingTop: padding,
                         minHeight: '100%'
                     }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                    scrollIndicatorInsets={{top: inset}}
                 />
                 <Snackbar
                     visible={this.state.snackbarVisible}

src/components/Screens/WebViewScreen.js

@@ -9,7 +9,7 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
 import {HiddenItem} from "react-navigation-header-buttons";
 import {Linking} from "expo";
 import i18n from 'i18n-js';
-import {Animated, BackHandler} from "react-native";
+import {Animated, BackHandler, Platform, StatusBar} from "react-native";
 import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
@@ -133,6 +133,9 @@ class WebViewScreen extends React.PureComponent<Props> {
 
     render() {
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android'  // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
         return (
             <AnimatedWebView
                 ref={this.webviewRef}
@@ -149,7 +152,7 @@ class WebViewScreen extends React.PureComponent<Props> {
                     this.canGoBack = navState.canGoBack;
                 }}
                 onMessage={this.props.onMessage}
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(padding))}
                 // Animations
                 onScroll={onScrollWithListener(this.props.onScroll)}
             />

src/components/Tabbar/CustomTabBar.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {View} from "react-native";
 import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
+import * as Animatable from 'react-native-animatable';
 
 type Props = {
     state: Object,
@@ -42,10 +42,15 @@ class CustomTabBar extends React.Component<Props> {
         const descriptors = this.props.descriptors;
         const navigation = this.props.navigation;
         return (
-            <View style={{
+            <Animatable.View
+                animation={"fadeInUp"}
+                duration={500}
+                useNativeDriver
+                style={{
                     flexDirection: 'row',
                     height: TAB_BAR_HEIGHT,
-            }}>
+                }}
+            >
                 {state.routes.map((route, index) => {
                     const {options} = descriptors[route.key];
                     const label =
@@ -77,14 +82,17 @@ class CustomTabBar extends React.Component<Props> {
                             label={label}
                             focused={isFocused}
                             extraData={state.index > index}
+                            key={route.key}
                         />
                     } else
                         return <TabHomeIcon
                             onPress={onPress}
                             onLongPress={onLongPress}
-                            focused={isFocused}/>
+                            focused={isFocused}
+                            key={route.key}
+                        />
                 })}
-            </View>
+            </Animatable.View>
         );
     }
 }

src/components/Tabbar/TabHomeIcon.js

@@ -30,15 +30,15 @@ class TabHomeIcon extends React.Component<Props> {
                     scale: 1, translateY: 0
                 },
                 "0.9": {
-                    scale: 1.3, translateY: -6
+                    scale: 1.2, translateY: -9
                 },
                 "1": {
-                    scale: 1.2, translateY: -5
+                    scale: 1.1, translateY: -7
                 },
             },
             fabFocusOut: {
                 "0": {
-                    scale: 1.2, translateY: -5
+                    scale: 1.1, translateY: -6
                 },
                 "1": {
                     scale: 1, translateY: 0

src/components/Tabbar/TabIcon.js

@@ -35,15 +35,15 @@ class TabIcon extends React.Component<Props> {
                     scale: 1, translateY: 0
                 },
                 "0.9": {
-                    scale: 1.5, translateY: 7
+                    scale: 1.3, translateY: 7
                 },
                 "1": {
-                    scale: 1.4, translateY: 6
+                    scale: 1.2, translateY: 6
                 },
             },
             focusOut: {
                 "0": {
-                    scale: 1.4, translateY: 6
+                    scale: 1.2, translateY: 6
                 },
                 "1": {
                     scale: 1, translateY: 0
@@ -100,6 +100,7 @@ class TabIcon extends React.Component<Props> {
                             color: props.color,
                             marginLeft: 'auto',
                             marginRight: 'auto',
+                            fontSize: 10,
                         }}
                     >
                         {props.label}

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Platform} from "react-native";
+import {Animated, Platform, StatusBar} from "react-native";
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@@ -97,6 +97,12 @@ class ClubListScreen extends React.Component<Props, State> {
     getScreen = (data: Object) => {
         this.categories = data[0].categories;
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             //$FlowFixMe
             <Animated.FlatList
@@ -109,8 +115,8 @@ class ClubListScreen extends React.Component<Props, State> {
                 getItemLayout={this.itemLayout}
                 // Animations
                 onScroll={onScroll}
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
+                contentContainerStyle={{paddingTop: padding}}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                scrollIndicatorInsets={{top: inset}}
             />
         )
     };

src/screens/Proximo/ProximoListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
+import {Animated, Image, Platform, ScrollView, StatusBar, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../components/Custom/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
@@ -298,6 +298,12 @@ class ProximoListScreen extends React.Component<Props, State> {
 
     render() {
         const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
+        const inset = Platform.OS === 'android'
+            ? scrollIndicatorInsetTop - StatusBar.currentHeight
+            : scrollIndicatorInsetTop;
         return (
             <View style={{
                 height: '100%'
@@ -317,8 +323,8 @@ class ProximoListScreen extends React.Component<Props, State> {
                     initialNumToRender={10}
                     // Animations
                     onScroll={onScroll}
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
+                    contentContainerStyle={{paddingTop: padding}}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                    scrollIndicatorInsets={{top: inset}}
                 />
             </View>
         );

src/screens/Proxiwash/ProxiwashScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Alert, Platform, View} from 'react-native';
+import {Alert, Platform, StatusBar, View} from 'react-native';
 import i18n from "i18n-js";
 import WebSectionList from "../../components/Lists/WebSectionList";
 import * as Notifications from "../../utils/Notifications";
@@ -421,13 +421,16 @@ class ProxiwashScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         const {containerPaddingTop} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
         return (
             <AnimatedFocusView
                 {...this.props}
             >
                 <Banner
                     style={{
-                    marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
+                    marginTop: this.state.bannerVisible ? padding : 0,
                 }}
                     visible={this.state.bannerVisible}
                     actions={[

src/screens/Websites/PlanexScreen.js

@@ -5,7 +5,7 @@ import ThemeManager from "../../managers/ThemeManager";
 import WebViewScreen from "../../components/Screens/WebViewScreen";
 import {Avatar, Banner, withTheme} from "react-native-paper";
 import i18n from "i18n-js";
-import {View} from "react-native";
+import {Platform, StatusBar, View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import AlertDialog from "../../components/Dialog/AlertDialog";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -299,13 +299,16 @@ class PlanexScreen extends React.Component<Props, State> {
 
     render() {
         const {containerPaddingTop} = this.props.collapsibleStack;
+        const padding = Platform.OS === 'android' // Fix for android non translucent bar on expo
+            ? containerPaddingTop - StatusBar.currentHeight
+            : containerPaddingTop;
         return (
             <AnimatedFocusView
                 {...this.props}
             >
                 <Banner
                     style={{
-                        marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
+                        marginTop: this.state.bannerVisible ? padding : 0,
                     }}
                     visible={this.state.bannerVisible}
                     actions={[