Start using react navigation header

navigation/MainTabNavigator.js

@@ -3,7 +3,6 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
 import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
 
 import HomeScreen from '../screens/HomeScreen';
-import PerfHomeScreen from '../screens/PerfHomeScreen';
 import PlanningScreen from '../screens/PlanningScreen';
 import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
@@ -15,6 +14,8 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../utils/ThemeManager";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
+import {StyleSheet, View} from "react-native";
+import Touchable from "react-native-platform-touchable";
 
 const TAB_ICONS = {
     Home: 'triangle',
@@ -26,13 +27,24 @@ const TAB_ICONS = {
 
 const ProximoStack = createStackNavigator();
 
+const styles = StyleSheet.create({
+    header: {
+        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
+    },
+    headerTitle: {
+        color: "#ffffff",
+    },
+});
+
+
 function ProximoStackComponent() {
     return (
         <ProximoStack.Navigator
             initialRouteName="ProximoMainScreen"
-            mode='card'
+            headerMode="float"
-            headerMode="none"
             screenOptions={{
+                headerTintColor: 'white',
+                headerStyle: styles.header,
                 gestureEnabled: true,
                 cardOverlayEnabled: true,
                 ...TransitionPresets.SlideFromRightIOS,
@@ -40,16 +52,23 @@ function ProximoStackComponent() {
         >
             <ProximoStack.Screen
                 name="ProximoMainScreen"
+                options={{
+                    title: 'Proximo',
+                }}
                 component={ProximoMainScreen}
             />
             <ProximoStack.Screen
                 name="ProximoListScreen"
+                options={{
+                    title: 'Articles'
+                }}
                 component={ProximoListScreen}
             />
             <ProximoStack.Screen
                 name="ProximoAboutScreen"
                 component={ProximoAboutScreen}
                 options={{
+                    title: 'Proximo',
                     ...TransitionPresets.ModalSlideFromBottomIOS,
                 }}
             />
@@ -116,7 +135,7 @@ function HomeStackComponent() {
         <HomeStack.Navigator
             initialRouteName="HomeScreen"
             mode='card'
-            headerMode="none"
+            headerMode="float"
             screenOptions={{
                 gestureEnabled: true,
                 cardOverlayEnabled: true,

screens/Proximo/ProximoAboutScreen.js

@@ -20,7 +20,6 @@ export default class ProximoAboutScreen extends React.Component<Props> {
         const nav = this.props.navigation;
         return (
             <Container>
-                <CustomHeader navigation={nav} title={i18n.t('screens.proximo')} hasBackButton={true}/>
                 <Content padder>
                     <View style={{
                         width: '100%',

screens/Proximo/ProximoListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Body, Container, Content, H1, H3, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
+import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import {FlatList, Image, Platform, View} from "react-native";
 import Touchable from 'react-native-platform-touchable';
@@ -147,6 +147,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 break;
         }
         this.setupSortIcons(mode, isReverse);
+        if (this.sortMenuRef !== undefined)
             this.sortMenuRef.hide();
     }
 
@@ -154,9 +155,37 @@ export default class ProximoListScreen extends React.Component<Props, State> {
      * Set the sort mode from state when components are ready
      */
     componentDidMount() {
+        const button = this.getSortMenu.bind(this);
+        const title = this.getSearchBar.bind(this);
+        this.props.navigation.setOptions({
+            headerRight: button,
+            headerTitle: title,
+        });
         this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
     }
 
+    getSearchBar() {
+        return (
+            <Body style={{width: '100%'}}>
+                <Item
+                    style={{
+                        width: '100%',
+                        marginBottom: 7
+                    }}>
+                    <MaterialCommunityIcons
+                        name={'magnify'}
+                        size={26}
+                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
+                    <Input
+                        ref="searchInput"
+                        placeholder={i18n.t('proximoScreen.search')}
+                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
+                        onChangeText={this.onSearchStringChange}/>
+                </Item>
+            </Body>
+        );
+    }
+
     /**
      * get color depending on quantity available
      *
@@ -299,7 +328,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 ref={this.onMenuRef}
                 button={
                     <Touchable
-                        style={{padding: 6}}
+                        style={{padding: 6, marginRight: 10}}
                         onPress={this.onSortMenuPress}>
                         <MaterialCommunityIcons
                             color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
@@ -364,14 +393,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
                     {this.getModalContent()}
                 </Modalize>
-                <CustomHeader
-                    hasBackButton={true}
-                    navigation={nav}
-                    hasSearchField={true}
-                    searchCallback={this.onSearchStringChange}
-                    shouldFocusSearchBar={this.shouldFocusSearchBar}
-                    rightButton={this.getSortMenu()}
-                />
                 <FlatList
                     data={this.state.currentlyDisplayedData}
                     extraData={this.state.currentlyDisplayedData}

screens/Proximo/ProximoMainScreen.js

@@ -2,12 +2,11 @@
 
 import * as React from 'react';
 import {Platform, View} from 'react-native'
-import {Body, Left, ListItem, Right, Text} from 'native-base';
+import {Body, Left, ListItem, Right, Text, Container} from 'native-base';
 import i18n from "i18n-js";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
-import BaseContainer from "../../components/BaseContainer";
 import WebSectionList from "../../components/WebSectionList";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
@@ -41,6 +40,14 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
         this.createDataset = this.createDataset.bind(this);
     }
 
+    componentDidMount() {
+        const button = this.getRightButton.bind(this);
+        this.props.navigation.setOptions({
+            headerRight: button
+            ,
+        });
+    }
+
     static sortFinalData(a: Object, b: Object) {
         let str1 = a.type.name.toLowerCase();
         let str2 = b.type.name.toLowerCase();
@@ -150,7 +157,8 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
         return (
             <View
                 style={{
-                    flexDirection: 'row'
+                    flexDirection: 'row',
+                    marginRight: 10,
                 }}>
                 <Touchable
                     style={{padding: 6}}
@@ -215,10 +223,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         return (
-            <BaseContainer
+            <Container>
-                navigation={nav}
-                headerTitle={i18n.t('screens.proximo')}
-                headerRightButton={this.getRightButton()}>
                 <WebSectionList
                     createDataset={this.createDataset}
                     navigation={nav}
@@ -226,7 +231,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                     fetchUrl={DATA_URL}
                     renderItem={this.getRenderItem}
                     updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
-            </BaseContainer>
+            </Container>
         );
     }
 }