Auto focus search bar when clicking the search icon

components/CustomHeader.js

@@ -13,6 +13,7 @@ type Props = {
     hasBackButton: boolean,
     hasSearchField: boolean,
     searchCallback: Function,
+    shouldFocusSearchBar: boolean,
     leftButton: React.Node,
     rightButton: React.Node,
     title: string,
@@ -34,12 +35,20 @@ export default class CustomHeader extends React.Component<Props> {
         hasBackButton: false,
         hasSearchField: false,
         searchCallback: () => null,
+        shouldFocusSearchBar: false,
         title: '',
         leftButton: <View/>,
         rightButton: <View/>,
         hasTabs: false,
     };
 
+    searchBarRef: Input;
+
+    componentDidMount() {
+        if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar)
+            this.searchBarRef.focus();
+    }
+
     getSearchBar() {
         return (
             <Item
@@ -51,6 +60,7 @@ export default class CustomHeader extends React.Component<Props> {
                     icon={'magnify'}
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
                 <Input
+                    ref={(ref) => this.searchBarRef = ref}
                     placeholder={i18n.t('proximoScreen.search')}
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
                     onChangeText={(text) => this.props.searchCallback(text)}/>

screens/Proximo/ProximoListScreen.js

@@ -61,15 +61,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
 
     modalRef: { current: null | Modalize };
     originalData: Array<Object>;
+    navData = this.props.navigation.getParam('data', []);
+    shouldFocusSearchBar = this.navData['shouldFocusSearchBar'];
 
     constructor(props: any) {
         super(props);
         this.modalRef = React.createRef();
-        this.originalData = this.props.navigation.getParam('data', []);
+        this.originalData = this.navData['data'];
+
     }
 
     state = {
-        currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice),
+        currentlyDisplayedData: this.navData['data'].sort(sortPrice),
         currentSortMode: sortMode.price,
         isSortReversed: false,
         sortPriceIcon: '',
@@ -310,6 +313,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                     navigation={nav}
                     hasSearchField={true}
                     searchCallback={(text) => this.search(text)}
+                    shouldFocusSearchBar={this.shouldFocusSearchBar}
                     rightButton={this.getSortMenu()}/>
 
                 <Content>

screens/Proximo/ProximoMainScreen.js

@@ -101,25 +101,54 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
     }
 
     getRightButton() {
+        let searchScreenData = {
+            shouldFocusSearchBar: true,
+            data: {
+                type: {
+                    id: "0",
+                    name: i18n.t('proximoScreen.all'),
+                    icon: 'star'
+                },
+                data: this.getAvailableArticles(this.state.fetchedData.articles, undefined)
+            },
+        };
+
+
         return (
-            <Touchable
+            <View
-                style={{padding: 6}}
+                style={{
-                onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
+                    flexDirection: 'row'
-                <CustomMaterialIcon
+                }}>
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                <Touchable
-                    icon="information"/>
+                    style={{padding: 6}}
-            </Touchable>
+                    onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="magnify"/>
+                </Touchable>
+                <Touchable
+                    style={{padding: 6}}
+                    onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
+                    <CustomMaterialIcon
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                        icon="information"/>
+                </Touchable>
+            </View>
         );
     }
 
     getRenderItem(item: Object, section: Object, data: Object) {
+        let dataToSend = {
+            shouldFocusSearchBar: false,
+            data: item,
+        };
         if (item.data.length > 0) {
             return (
                 <ListItem
                     button
                     thumbnail
                     onPress={() => {
-                        this.props.navigation.navigate('ProximoListScreen', item);
+                        this.props.navigation.navigate('ProximoListScreen', dataToSend);
                     }}
                 >
                     <Left>