Upgraded react-navigation and migrated all files

android/app/src/main/java/com/shockwallet/MainActivity.java

@@ -2,6 +2,9 @@
 
 import android.os.Bundle;
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import com.zoontek.rnbootsplash.RNBootSplash;
 
 public class MainActivity extends ReactActivity {
@@ -15,6 +18,16 @@ protected String getMainComponentName() {
         return "shockwallet";
     }
 
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+      return new ReactActivityDelegate(this, getMainComponentName()) {
+        @Override
+        protected ReactRootView createRootView() {
+         return new RNGestureHandlerEnabledRootView(MainActivity.this);
+        }
+      };
+    }
+
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

app/components/CustomDrawer.js

@@ -6,6 +6,7 @@ import {
   ScrollView,
   Text,
 } from 'react-native'
+import { DrawerActions } from 'react-navigation-drawer'
 import { LNURL_SCREEN } from '../screens/LNURL'
 import Pad from './Pad'
 // import ShockAvatar from './ShockAvatar'
@@ -62,10 +63,10 @@ const drawerBottomItems = [
 ]
 
 /**
- * @typedef {import('react-navigation').DrawerItemsProps} DrawerItemsProps
+ * @typedef {import('react-navigation-drawer').DrawerContentComponentProps} DrawerContentComponentProps
  */
 /**
- * @extends Component<DrawerItemsProps>
+ * @extends Component<DrawerContentComponentProps>
  */
 
 export default class CustomDrawer extends Component {
@@ -93,6 +94,7 @@ export default class CustomDrawer extends Component {
     }
 
     navigation.navigate(screenName)
+    navigation.dispatch(DrawerActions.closeDrawer())
   }
 
   /** @argument {DrawerItem[]} items */

app/components/OnboardingScreen.js

@@ -1,8 +1,6 @@
 /* eslint-disable  */
 import React from 'react'
 import {
-  Animated,
-  Easing,
   ImageBackground,
   StatusBar,
   StyleSheet,
@@ -224,20 +222,17 @@ export const linkTextStyle = [
 ]
 
 /**
- * @type {import('react-navigation').StackNavigatorConfig}
+ * @type {import('react-navigation-stack').NavigationStackOptions}
  */
 export const stackNavConfigMixin = {
-  headerLayoutPreset: 'center',
-
-  navigationOptions: {
-    header: null,
-  },
-
-  transitionConfig: () => ({
-    transitionSpec: {
-      duration: 0,
-      timing: Animated.timing,
-      easing: Easing.step0,
-    },
-  }),
+  header: () => null,
+
+  // Deprecated in react-navigation v4
+  // transitionConfig: () => ({
+  //   transitionSpec: {
+  //     duration: 0,
+  //     timing: Animated.timing,
+  //     easing: Easing.step0,
+  //   },
+  // }),
 }

app/components/ShockBackground.js

@@ -37,42 +37,40 @@ const styles = StyleSheet.create({
 })
 
 /**
- * @type {import('react-navigation').StackNavigatorConfig}
+ * @type {import('react-navigation-stack').NavigationStackOptions}
  */
 export const stackNavConfigHeaderMixin = {
-  headerLayoutPreset: 'center',
-
-  navigationOptions: {
-    headerStyle: {
-      backgroundColor: CSS.Colors.BACKGROUND_BLUE,
-      elevation: 0,
-      shadowOpacity: 0,
-      shadowOffset: {
-        height: 0,
-        width: 0,
-      },
+  headerStyle: {
+    backgroundColor: CSS.Colors.BACKGROUND_BLUE,
+    elevation: 0,
+    shadowOpacity: 0,
+    shadowOffset: {
+      height: 0,
+      width: 0,
     },
+  },
 
-    headerBackImage: ((
-      <View style={styles.headerBackImage}>
-        <Ionicons
-          suppressHighlighting
-          color="white"
-          name="ios-arrow-round-back"
-          size={48}
-        />
-      </View>
-    )),
+  headerTitleAlign: 'center',
 
-    headerTitleStyle: {
-      // design has regular (400 weight) font but 600 looks more like the
-      // rendered design
-      fontFamily: 'Montserrat-700',
-      fontSize: 15,
-      // https://github.com/react-navigation/react-navigation/issues/542#issuecomment-283663786
-      fontWeight: 'normal',
-    },
+  headerBackImage: () => ((
+    <View style={styles.headerBackImage}>
+      <Ionicons
+        suppressHighlighting
+        color="white"
+        name="ios-arrow-round-back"
+        size={48}
+      />
+    </View>
+  )),
 
-    headerTintColor: CSS.Colors.BACKGROUND_WHITE,
+  headerTitleStyle: {
+    // design has regular (400 weight) font but 600 looks more like the
+    // rendered design
+    fontFamily: 'Montserrat-700',
+    fontSize: 15,
+    // https://github.com/react-navigation/react-navigation/issues/542#issuecomment-283663786
+    fontWeight: 'normal',
   },
+
+  headerTintColor: CSS.Colors.BACKGROUND_WHITE,
 }

app/navigators/Root.js

@@ -2,12 +2,11 @@
  * @prettier
  */
 
-import {
-  createBottomTabNavigator,
-  createStackNavigator,
-  createSwitchNavigator,
-  createDrawerNavigator,
-} from 'react-navigation'
+import { Dimensions } from 'react-native'
+import { createSwitchNavigator, createAppContainer } from 'react-navigation'
+import { createDrawerNavigator } from 'react-navigation-drawer'
+import { createStackNavigator } from 'react-navigation-stack'
+import { createBottomTabNavigator } from 'react-navigation-tabs'
 import * as CSS from '../res/css'
 
 import Chat, { CHAT_ROUTE } from '../screens/Chat'
@@ -90,14 +89,14 @@ const WalletNav = createStackNavigator(
   },
   {
     initialRouteName: BOTTOM_NAV,
-    navigationOptions: {
-      header: null,
+    defaultNavigationOptions: {
+      header: () => null,
     },
   },
 )
 
 BottomNav.navigationOptions = {
-  header: null,
+  header: () => null,
   // drawerIcon: () => {
   //   return <IconDrawerHome />
   // },
@@ -106,8 +105,13 @@ BottomNav.navigationOptions = {
 const MAIN_DRAWER = 'MAIN_DRAWER'
 const theme = 'dark'
 
-/** @type {import('react-navigation').NavigationRouteConfigMap} */
+/** @typedef {import('react-navigation-drawer').NavigationDrawerOptions} NavigationDrawerOptions */
+/** @typedef {import('react-navigation').NavigationParams} NavigationParams */
+/** @typedef {import('react-navigation').NavigationRoute<NavigationParams>} NavigationRoute */
+/** @typedef {import('react-navigation-drawer').NavigationDrawerProp<NavigationRoute, any>} NavigationDrawerProp */
+/** @typedef {import('react-navigation').NavigationRouteConfigMap<NavigationDrawerOptions, NavigationDrawerProp, unknown>} NavigationRouteConfigMap */
 
+/** @type {NavigationRouteConfigMap} */
 const drawerScreens = {
   [WALLET_NAV]: {
     screen: WalletNav,
@@ -258,10 +262,14 @@ if (__DEV__) {
   }
 }
 
+const EDGE_WIDTH = Dimensions.get('screen').width
+
 const MainDrawer = createDrawerNavigator(drawerScreens, {
   initialRouteName: WALLET_NAV,
   drawerPosition: 'right',
   contentComponent: CustomDrawer,
+  edgeWidth: EDGE_WIDTH,
+  drawerBackgroundColor: 'transparent',
   contentOptions: {
     labelStyle: {
       textAlign: 'right',
@@ -280,7 +288,6 @@ const App = createStackNavigator(
     [MAIN_DRAWER]: MainDrawer,
   },
   {
-    headerLayoutPreset: 'center',
     initialRouteName: MAIN_DRAWER,
   },
 )
@@ -309,4 +316,4 @@ const MainSwitch = createSwitchNavigator(
   },
 )
 
-export default MainSwitch
+export default createAppContainer(MainSwitch)

app/navigators/WalletManager/CreateWalletOrAlias.js

@@ -57,7 +57,7 @@ export const CREATE_WALLET_OR_ALIAS = 'CREATE_WALLET_OR_ALIAS'
  */
 class CreateWalletOrAlias extends React.Component {
   /**
-   * @type {import('react-navigation').NavigationStackScreenOptions}
+   * @type {import('react-navigation-stack').NavigationStackOptions}
    */
   static navigationOptions = ({
     title: 'CREATE WALLET/ALIAS',

app/navigators/WalletManager/Landing.js

@@ -28,10 +28,10 @@ export const LANDING = 'LANDING'
  */
 export default class CreateWallet extends React.Component {
   /**
-   * @type {import('react-navigation').NavigationScreenOptions}
+   * @type {import('react-navigation-stack').NavigationStackOptions}
    */
   static navigationOptions = {
-    header: null,
+    header: () => null,
   }
 
   didFocus = {

app/navigators/WalletManager/index.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from 'react-navigation'
+import { createStackNavigator } from 'react-navigation-stack'
 
 import { stackNavConfigMixin } from '../../components/OnboardingScreen'
 
@@ -16,7 +16,9 @@ const WalletManager = createStackNavigator(
   },
   {
     initialRouteName: LANDING,
-    ...stackNavConfigMixin,
+    defaultNavigationOptions: {
+      ...stackNavConfigMixin,
+    },
   },
 )
 

app/screens/Advanced/index.js

@@ -129,8 +129,9 @@ export const ADVANCED_SCREEN = 'ADVANCED_SCREEN'
  * @augments React.Component<Props, State, never>
  */
 class AdvancedScreen extends Component {
+  /** @type {import('react-navigation-stack').NavigationStackOptions} */
   static navigationOptions = {
-    header: null,
+    header: () => null,
     // drawerIcon: () => {
     //   return <IconDrawerAdvancedLightning />
     // },

app/screens/Chat/index.js

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
   hamburger: { marginRight: 24 },
 })
 
-const headerRight = (
+const headerRight = () => (
   <Ion name="ios-menu" color="white" size={36} style={styles.hamburger} />
 )
 
@@ -88,8 +88,8 @@ const HeaderLeft = React.memo(({ onPress }) => ((
  */
 export default class Chat extends React.Component {
   /**
-   * @param {{ navigation: Navigation }} args
-   * @returns {import('react-navigation').NavigationStackScreenOptions}
+   * @param {import('react-navigation-stack').NavigationStackScreenProps} args
+   * @returns {import('react-navigation-stack').NavigationStackOptions}
    */
   static navigationOptions = ({ navigation }) => {
     const title = navigation.getParam('_title')

app/screens/Chats/index.js

@@ -56,7 +56,7 @@ const byTimestampFromOldestToNewest = (a, b) => a.timestamp - b.timestamp
  */
 export default class Chats extends React.Component {
   /**
-   * @type {import('react-navigation').NavigationBottomTabScreenOptions}
+   * @type {import('react-navigation-tabs').NavigationBottomTabOptions}
    */
   static navigationOptions = {
     // tabBarIcon: ({ focused }) => {

app/screens/ConnectToNode.js

@@ -78,10 +78,10 @@ const DEFAULT_STATE = {
  */
 class ConnectToNode extends React.Component {
   /**
-   * @type {import('react-navigation').NavigationScreenOptions}
+   * @type {import('react-navigation-stack').NavigationStackOptions}
    */
   static navigationOptions = {
-    header: null,
+    header: () => null,
   }
 
   theme = 'dark'

app/screens/CreatePostDark.tsx

@@ -65,11 +65,8 @@ const DEFAULT_STATE: State = {
 }
 
 class CreatePostDark extends React.Component<Props, State> {
-  /**
-   * @type {import('react-navigation').NavigationScreenOptions}
-   */
-  static navigationOptions = {
-    header: null,
+  static navigationOptions: import('react-navigation-stack').NavigationStackOptions = {
+    header: () => null,
   }
 
   state = DEFAULT_STATE

app/screens/Feed/index.tsx

@@ -12,7 +12,8 @@ import {
   FlatListProps,
 } from 'react-native'
 import { connect } from 'react-redux'
-import { NavigationScreenProp, NavigationScreenOptions } from 'react-navigation'
+import { NavigationScreenProp } from 'react-navigation'
+import { NavigationBottomTabOptions } from 'react-navigation-tabs';
 import _ from 'lodash'
 import * as Common from 'shock-common'
 
@@ -54,8 +55,7 @@ type Props = StateProps & DispatchProps & OwnProps
 const keyExtractor = (item: Common.Schema.Post) => item.id
 
 class Feed extends React.Component<Props, State> {
-  static navigationOptions: NavigationScreenOptions = {
-    header: null,
+  static navigationOptions: NavigationBottomTabOptions = {
     tabBarIcon: ({ focused }) => {
       if (focused) {
         return <ShockIconBlue style={{ width: 32, height: 32 }} />

app/screens/Login.js

@@ -54,10 +54,10 @@ const shockBG = require('../assets/images/shock-bg.png')
  */
 export class Login extends React.Component {
   /**
-   * @type {import('react-navigation').NavigationScreenOptions}
+   * @type {import('react-navigation-stack').NavigationStackOptions}
    */
   static navigationOptions = {
-    header: null,
+    header: () => null,
   }
 
   /** @type {State} */