Fixed focusing on search bar not working

components/CustomHeader.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import {Body, Header, Input, Item, Left, Right, Title} from "native-base";
+import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
 import {Platform, StyleSheet, View} from "react-native";
 import {getStatusBarHeight} from "react-native-status-bar-height";
 import Touchable from 'react-native-platform-touchable';
@@ -42,15 +42,16 @@ export default class CustomHeader extends React.Component<Props> {
         hasTabs: false,
     };
 
-    searchBarRef: Input;
-
     componentDidMount() {
-        if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar)
-            this.searchBarRef.focus();
+        if (this.refs.searchInput !== undefined && this.props.shouldFocusSearchBar) {
+            // does not work if called to early for some reason...
+            setInterval(() => this.refs.searchInput._root.focus(), 500);
+        }
     }
 
     getSearchBar() {
         return (
+            <Form>
             <Item
                 style={{
                     width: '100%',
@@ -60,11 +61,12 @@ export default class CustomHeader extends React.Component<Props> {
                     icon={'magnify'}
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
                 <Input
-                    ref={(ref) => this.searchBarRef = ref}
+                    ref="searchInput"
                     placeholder={i18n.t('proximoScreen.search')}
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
                     onChangeText={(text) => this.props.searchCallback(text)}/>
             </Item>
+            </Form>
         );
     }
 

screens/Proximo/ProximoListScreen.js

@@ -45,7 +45,6 @@ type Props = {
 }
 
 type State = {
-    navData: Array<Object>,
     currentSortMode: string,
     isSortReversed: boolean,
     sortPriceIcon: React.Node,
@@ -62,13 +61,12 @@ 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'];
+    shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
 
     constructor(props: any) {
         super(props);
         this.modalRef = React.createRef();
         this.originalData = this.navData['data'];
-
     }
 
     state = {
@@ -300,7 +298,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         const navType = nav.getParam('type', '{name: "Error"}');
-
         return (
             <Container>
                 <Modalize ref={this.modalRef}

screens/Proximo/ProximoMainScreen.js

@@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
         return [
             {
                 title: '',
-                data: ProximoMainScreen.generateData(fetchedData),
+                data: this.generateData(fetchedData),
                 extraData: super.state,
                 keyExtractor: this.getKeyExtractor
             }
@@ -52,7 +52,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
      * @param fetchedData The array of articles represented by objects
      * @returns {Array} The formatted dataset
      */
-    static generateData(fetchedData: Object) {
+    generateData(fetchedData: Object) {
         let finalData = [];
         if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
             let types = fetchedData.types;
@@ -84,7 +84,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
      * @param type The type of articles to find (undefined for any type)
      * @return {Array} The array of available articles
      */
-    static getAvailableArticles(articles: Array<Object>, type: ?Object) {
+    getAvailableArticles(articles: Array<Object>, type: ?Object) {
         let availableArticles = [];
         for (let k = 0; k < articles.length; k++) {
             if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
@@ -109,7 +109,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
                     name: i18n.t('proximoScreen.all'),
                     icon: 'star'
                 },
-                data: this.getAvailableArticles(this.state.fetchedData.articles, undefined)
+                data: this.state.fetchedData.articles !== undefined ?
+                    this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
             },
         };