Improved webview screen header buttons and removed unused props

This reverts commit f70a289c

package.json

@@ -52,7 +52,6 @@
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "~2.2.0",
     "react-native-webview": "8.1.1",
-    "react-navigation-collapsible": "^5.4.0",
     "react-navigation-header-buttons": "^3.0.5"
   },
   "devDependencies": {

src/components/Custom/HeaderButton.js

@@ -8,18 +8,17 @@ import * as Touchable from "react-native/Libraries/Components/Touchable/Touchabl
 
 const MaterialHeaderButton = (props: Object) => (
     <HeaderButton
-        {...props}
         IconComponent={MaterialCommunityIcons}
         iconSize={26}
         color={props.theme.colors.text}
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
+        {...props}
     />
 );
 
 const MaterialHeaderButtons = (props: Object) => {
     return (
         <HeaderButtons
-            {...props}
             HeaderButtonComponent={withTheme(MaterialHeaderButton)}
             OverflowIcon={
                 <MaterialCommunityIcons
@@ -28,6 +27,7 @@ const MaterialHeaderButtons = (props: Object) => {
                     color={props.theme.colors.text}
                 />
             }
+            {...props}
         />
     );
 };

src/components/Screens/WebViewScreen.js

@@ -6,19 +6,14 @@ import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import ErrorView from "../Custom/ErrorView";
 import {ERROR_TYPE} from "../../utils/WebData";
 import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
+import {HiddenItem} from "react-navigation-header-buttons";
+import {Linking} from "expo";
+import i18n from 'i18n-js';
 
 type Props = {
     navigation: Object,
-    data: Array<{
+    url: string,
-        url: string,
+    customJS: string,
-        icon: string,
-        name: string,
-        customJS: string
-    }>,
-    headerTitle: string,
-    hasHeaderBackButton: boolean,
-    hasSideMenu: boolean,
-    hasFooter: boolean,
 }
 
 /**
@@ -27,9 +22,7 @@ type Props = {
 class WebViewScreen extends React.PureComponent<Props> {
 
     static defaultProps = {
-        hasBackButton: false,
+        customJS: '',
-        hasSideMenu: true,
-        hasFooter: true,
     };
 
     webviewRef: Object;
@@ -57,7 +50,22 @@ class WebViewScreen extends React.PureComponent<Props> {
     getRefreshButton() {
         return (
             <MaterialHeaderButtons>
-                <Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/>
+                <Item
+                    title="refresh"
+                    iconName="refresh"
+                    onPress={this.onRefreshClicked}/>
+                <HiddenItem
+                    title={i18n.t("general.goBack")}
+                    iconName="arrow-left"
+                    onPress={this.onGoBackClicked}/>
+                <HiddenItem
+                    title={i18n.t("general.goForward")}
+                    iconName="arrow-right"
+                    onPress={this.onGoForwardClicked}/>
+                <HiddenItem
+                    title={i18n.t("general.openInBrowser")}
+                    iconName="web"
+                    onPress={this.onOpenClicked}/>
             </MaterialHeaderButtons>
         );
     };
@@ -66,6 +74,10 @@ class WebViewScreen extends React.PureComponent<Props> {
      * Callback to use when refresh button is clicked. Reloads the webview.
      */
     onRefreshClicked = () => this.webviewRef.current.reload();
+    onGoBackClicked = () => this.webviewRef.current.goBack();
+    onGoForwardClicked = () => this.webviewRef.current.goForward();
+
+    onOpenClicked = () => Linking.openURL(this.props.url);
 
     /**
      * Gets the loading indicator
@@ -78,13 +90,9 @@ class WebViewScreen extends React.PureComponent<Props> {
         return (
             <WebView
                 ref={this.webviewRef}
-                source={{uri: this.props.data[0]['url']}}
+                source={{uri: this.props.url}}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
                 startInLoadingState={true}
-                injectedJavaScript={this.props.data[0]['customJS']}
+                injectedJavaScript={this.props.customJS}
                 javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
                 renderError={() => <ErrorView

src/navigation/MainTabNavigator.js

@@ -13,12 +13,12 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import {useTheme, withTheme} from 'react-native-paper';
+import {withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
-import {createCollapsibleStack} from 'react-navigation-collapsible';
+
 
 const TAB_ICONS = {
     home: 'triangle',
@@ -44,9 +44,7 @@ function getDrawerButton(navigation: Object) {
 
 const ProximoStack = createStackNavigator();
 
-function ProximoStackComponent(props: Object) {
+function ProximoStackComponent() {
-
-    const {colors} = useTheme();
     return (
         <ProximoStack.Navigator
             initialRouteName="index"
@@ -64,19 +62,13 @@ function ProximoStackComponent(props: Object) {
                 }}
                 component={ProximoMainScreen}
             />
-            {createCollapsibleStack(
+            <ProximoStack.Screen
-                <ProximoStack.Screen
+                name="proximo-list"
-                    name="proximo-list"
+                options={{
-                    options={{
+                    title: i18n.t('screens.proximoArticles')
-                        title: i18n.t('screens.proximoArticles')
+                }}
-                    }}
+                component={ProximoListScreen}
-                    component={ProximoListScreen}
+            />
-                />,
-                {
-                    collapsedColor: colors.surface,
-                    useNativeDriver: true /* Optional, default: true */,
-                }
-            )}
             <ProximoStack.Screen
                 name="proximo-about"
                 component={ProximoAboutScreen}

src/screens/Proximo/ProximoListScreen.js

@@ -1,16 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, Image, Platform, ScrollView, View} from "react-native";
+import {FlatList, Image, Platform, ScrollView, 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";
 import {stringMatchQuery} from "../../utils/Search";
 import ProximoListItem from "../../components/Lists/ProximoListItem";
 import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
-import {withCollapsible} from "../../utils/withCollapsible";
-
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -42,7 +39,6 @@ type Props = {
     navigation: Object,
     route: Object,
     theme: Object,
-    collapsibleStack: Object,
 }
 
 type State = {
@@ -326,9 +322,7 @@ class ProximoListScreen extends React.Component<Props, State> {
 
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
 
-
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <View style={{
                 height: '100%'
@@ -337,7 +331,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                     {this.state.modalCurrentDisplayItem}
                 </CustomModal>
                 {/*$FlowFixMe*/}
-                <AnimatedFlatList
+                <FlatList
                     data={this.listData}
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
                     keyExtractor={this.keyExtractor}
@@ -346,14 +340,10 @@ class ProximoListScreen extends React.Component<Props, State> {
                     removeClippedSubviews={true}
                     getItemLayout={this.itemLayout}
                     initialNumToRender={10}
-                    // Animations
-                    onScroll={onScroll}
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
             </View>
         );
     }
 }
 
-export default withCollapsible(withTheme(ProximoListScreen));
+export default withTheme(ProximoListScreen);

src/screens/Websites/AvailableRoomScreen.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import WebViewScreen from "../../components/Screens/WebViewScreen";
-import i18n from "i18n-js";
 
 type Props = {
     navigation: Object,
@@ -39,25 +38,9 @@ export default class AvailableRoomScreen extends React.Component<Props> {
         return (
             <WebViewScreen
                 navigation={nav}
-                data={[
+                url={ROOM_URL}
-                    {
+                customJS={this.customInjectedJS}
-                        url: ROOM_URL,
+                customInjectedJS={this.customInjectedJS}/>
-                        icon: 'file-document-outline',
-                        name: i18n.t('availableRoomScreen.normalRoom'),
-                        customJS: this.customInjectedJS
-                    },
-                    {
-                        url: PC_URL,
-                        icon: 'monitor',
-                        name: i18n.t('availableRoomScreen.computerRoom'),
-                        customJS: this.customInjectedJS
-                    },
-                ]}
-                customInjectedJS={this.customInjectedJS}
-                headerTitle={i18n.t('screens.availableRooms')}
-                hasHeaderBackButton={true}
-                hasSideMenu={false}
-                hasFooter={false}/>
         );
     }
 }

src/screens/Websites/BibScreen.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import WebViewScreen from "../../components/Screens/WebViewScreen";
-import i18n from "i18n-js";
 
 type Props = {
     navigation: Object,
@@ -50,19 +49,8 @@ export default class AvailableRoomScreen extends React.Component<Props> {
         return (
             <WebViewScreen
                 navigation={nav}
-                data={[
+                url={BIB_URL}
-                    {
+                customJS={this.customBibInjectedJS}/>
-                        url: BIB_URL,
-                        icon: 'book',
-                        name: i18n.t('availableRoomScreen.bibRoom'),
-                        customJS: this.customBibInjectedJS
-                    },
-                ]}
-                customInjectedJS={this.customInjectedJS}
-                headerTitle={i18n.t('screens.availableRooms')}
-                hasHeaderBackButton={true}
-                hasSideMenu={false}
-                hasFooter={false}/>
         );
     }
 }

src/screens/Websites/PlanexScreen.js

@@ -165,18 +165,8 @@ export default class PlanexScreen extends React.Component<Props, State> {
                 </Banner>
                 <WebViewScreen
                     navigation={nav}
-                    data={[
+                    url={PLANEX_URL}
-                        {
+                    customJS={this.customInjectedJS}/>
-                            url: PLANEX_URL,
-                            icon: '',
-                            name: '',
-                            customJS: this.customInjectedJS
-                        },
-                    ]}
-                    customInjectedJS={this.customInjectedJS}
-                    headerTitle={'Planex'}
-                    hasHeaderBackButton={false}
-                    hasFooter={false}/>
             </View>
         );
     }

src/utils/withCollapsible.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import {useCollapsibleStack} from "react-navigation-collapsible";
-
-export const withCollapsible = (Component: any) => {
-    return (props: any) => {
-        return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
-    };
-};

translations/en.json

@@ -345,7 +345,10 @@
   "general": {
     "loading": "Loading...",
     "retry": "Retry",
-    "networkError": "Unable to contact servers. Make sure you are connected to Internet."
+    "networkError": "Unable to contact servers. Make sure you are connected to Internet.",
+    "goBack": "Go Back",
+    "goForward": "Go Forward",
+    "openInBrowser": "Open in Browser"
   },
   "date": {
     "daysOfWeek": {

translations/fr.json

@@ -345,7 +345,10 @@
   "general": {
     "loading": "Chargement...",
     "retry": "Réessayer",
-    "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
+    "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet.",
+    "goBack": "Suivant",
+    "goForward": "Précédent",
+    "openInBrowser": "Ouvrir dans le navigateur"
   },
   "date": {
     "daysOfWeek": {