Add support for react-navigation@5

Author: armenio

src/Header.js

@@ -7,19 +7,19 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { withNavigation } from 'react-navigation';
-import { HeaderBackButton } from 'react-navigation-stack';
+
+import { HeaderBackButton } from '@react-navigation/stack';
 import { getInset, getStatusBarHeight } from 'react-native-safe-area-view';
 import { isIphoneX } from 'react-native-iphone-x-helper';
+import { useNavigation } from '@react-navigation/native';
 
 // @todo: make this work properly when in landscape
 const hasNotch = isIphoneX();
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
-@withNavigation
-export default class Header extends React.PureComponent {
+class Header extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -136,3 +136,11 @@ export default class Header extends React.PureComponent {
     );
   }
 }
+
+export default function (props) {
+  const navigation = useNavigation();
+
+  return (
+    <Header {...props} navigation={navigation} />
+  );
+}

src/SearchBar.ios.js

@@ -10,8 +10,8 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { withNavigation } from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useNavigation } from '@react-navigation/native';
 
 const Layout = {
   window: {
@@ -28,7 +28,6 @@ const SearchIcon = () => (
   </View>
 );
 
-@withNavigation
 class PlaceholderButtonSearchBar extends React.PureComponent {
   static defaultProps = {
     placeholder: 'Search',
@@ -62,8 +61,7 @@ class PlaceholderButtonSearchBar extends React.PureComponent {
   };
 }
 
-@withNavigation
-export default class SearchBar extends React.PureComponent {
+class SearchBar extends React.PureComponent {
   state = {
     text: '',
     showCancelButton: false,
@@ -183,6 +181,14 @@ export default class SearchBar extends React.PureComponent {
   };
 }
 
+export default function (props) {
+    const navigation = useNavigation();
+
+    return (
+        <SearchBar {...props} navigation={navigation} />
+    );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

src/SearchBar.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import { NativeModules, StyleSheet, TextInput, View } from 'react-native';
-import { withNavigation } from 'react-navigation';
-import Touchable from 'react-native-platform-touchable';
+import { NativeModules, StyleSheet, TextInput, TouchableNativeFeedback, View } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useNavigation } from '@react-navigation/native';
 
-@withNavigation
-export default class SearchBar extends React.PureComponent {
+class SearchBar extends React.PureComponent {
   componentDidMount() {
     requestAnimationFrame(() => {
       this._textInput.focus();
@@ -42,17 +40,17 @@ export default class SearchBar extends React.PureComponent {
         <View
           style={{ width: 50, alignItems: 'center', justifyContent: 'center' }}>
           {this.state.text
-            ? <Touchable
+            ? <TouchableNativeFeedback
                 onPress={this._handleClear}
                 hitSlop={{top: 15, left: 10, right: 15, bottom: 15}}
                 style={{ padding: 5 }}
-                background={Touchable.Ripple(this.props.tintColor, true)}>
+                background={TouchableNativeFeedback.Ripple(this.props.tintColor, true)}>
                 <Ionicons
                   name="md-close"
                   size={25}
                   color={this.props.tintColor}
                 />
-              </Touchable>
+              </TouchableNativeFeedback>
             : null}
         </View>
       </View>
@@ -74,6 +72,14 @@ export default class SearchBar extends React.PureComponent {
   };
 }
 
+export default function (props) {
+    const navigation = useNavigation();
+
+    return (
+        <SearchBar {...props} navigation={navigation} />
+    );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,