[UPGRADE] react-navigation@v5

android/app/build.gradle

@@ -78,7 +78,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
     bundleCommand          : "ram-bundle",
     // extraPackagerArgs      : ["--indexed-ram-bundle"]
 ]
@@ -134,8 +134,8 @@ android {
         applicationId "com.zrgteam.awesome"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 24
-        versionName "1.2.2"
+        versionCode 25
+        versionName "1.2.5"
         missingDimensionStrategy 'react-native-camera', 'general'
         multiDexEnabled true
     }

android/gradle.properties

@@ -26,3 +26,9 @@ android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
 FLIPPER_VERSION=0.33.1
+
+org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
+MYAPP_RELEASE_KEY_ALIAS=zerglingno1
+MYAPP_RELEASE_STORE_PASSWORD=nhaovodi
+MYAPP_RELEASE_KEY_PASSWORD=nhaovodi

index.js

@@ -1,4 +1,5 @@
 import './src/libraries/logger'
+import 'react-native-gesture-handler'
 import { AppRegistry, Platform } from 'react-native'
 import { enableScreens } from 'react-native-screens'
 import { getTimeSinceStartup } from 'react-native-startup-time'

package.json

@@ -16,15 +16,17 @@
   },
   "dependencies": {
     "@eva-design/eva": "^1.2.0",
+    "@react-native-community/art": "^1.2.0",
     "@react-native-community/async-storage": "^1.6.2",
     "@react-native-community/blur": "^3.3.1",
+    "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^4.4.0",
     "@react-native-community/viewpager": "^2.0.2",
+    "@react-navigation/bottom-tabs": "^5.4.2",
+    "@react-navigation/native": "^5.3.0",
+    "@react-navigation/stack": "^5.3.2",
     "@ui-kitten/eva-icons": "^4.2.0",
     "axios": "^0.19.0",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "bignumber.js": "^9.0.0",
-    "events": "^1.1.1",
     "i18n-js": "^3.3.0",
     "lottie-ios": "^3.1.3",
     "lottie-react-native": "^3.3.2",
@@ -35,36 +37,37 @@
     "react-native-animatable": "^1.3.3",
     "react-native-app-intro-slider": "^3.0.0",
     "react-native-bundle-splitter": "^1.0.7",
-    "react-native-camera": "^3.7.2",
     "react-native-cheerio": "^1.0.0-rc.4",
     "react-native-collapsible": "^1.5.1",
     "react-native-device-info": "^5.5.3",
     "react-native-exception-handler": "^2.10.8",
     "react-native-fast-image": "^7.0.2",
     "react-native-fs": "^2.16.6",
-    "react-native-gesture-handler": "^1.4.1",
+    "react-native-gesture-handler": "^1.6.1",
     "react-native-keyboard-aware-scroll-view": "^0.9.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-markdown-renderer": "^3.2.8",
+    "react-native-neomorph-shadows": "^1.0.3",
     "react-native-permissions": "^2.0.2",
     "react-native-push-notification": "^3.1.9",
+    "react-native-reanimated": "^1.8.0",
     "react-native-render-html": "^4.2.0",
-    "react-native-screens": "2.2.0",
+    "react-native-safe-area-context": "^1.0.0",
+    "react-native-screens": "^2.2.0",
     "react-native-share": "^2.0.0",
+    "react-native-shared-element": "^0.7.0",
     "react-native-snap-carousel": "^3.8.3",
     "react-native-splash-screen": "^3.2.0",
     "react-native-spring-scrollview": "^2.0.23",
     "react-native-sqlite-storage": "^4.1.0",
     "react-native-startup-time": "^1.2.2",
     "react-native-svg": "9.13.3",
-    "react-native-syntax-highlighter": "^2.1.0",
     "react-native-ui-kitten": "^4.2.0",
     "react-native-vector-icons": "^6.6.0",
     "react-native-webview": "^9.0.2",
-    "react-navigation": "^3.3.2",
-    "react-navigation-fluid-transitions": "^0.3.2",
-    "react-navigation-tabs": "^2.5.6",
-    "react-navigation-transitions": "^1.0.12",
+    "react-navigation": "^4.3.9",
+    "react-navigation-shared-element": "v3",
+    "react-navigation-stack": "^2.5.1",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
     "redux-actions": "^2.6.5",
@@ -79,6 +82,7 @@
     "@babel/runtime": "^7.6.3",
     "@react-native-community/eslint-config": "^0.0.5",
     "babel-jest": "^24.9.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^6.6.0",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.58.0",

src/assets/elements.js

@@ -23,7 +23,8 @@ export const images = {
   spiderum_banner: require('../assets/images/spiderum_banner.png'),
   splash: require('../assets/images/splash.png'),
   default_parallax: require('../assets/images/default_parallax.jpg'),
-  no_result: require('../assets/images/no_result.png')
+  no_result: require('../assets/images/no_result.png'),
+  video_placeholder: require('../assets/images/video_placeholder.jpg')
 }
 
 export const animations = {

src/common/components/DefaultHeader.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React, { memo } from 'react'
 // import i18n from 'i18n-js'
 import {
   Icon,
@@ -7,60 +7,55 @@ import {
   TopNavigationAction
 } from 'react-native-ui-kitten'
 import LinearGradient from 'react-native-linear-gradient'
+import { useNavigationState, useNavigation } from '@react-navigation/native'
 // import * as Animatable from 'react-native-animatable'
 import commonStyles, { HEADER_GRADIENT } from '../../styles/common'
 import { navigationPop, navigationPopToTop } from '../utils/navigation'
 import SearchPanel from '../components/Widgets/SearchPanel'
 
-class DefaultHeader extends PureComponent {
-  constructor (props) {
-    super(props)
-    this.handleBack = this.handleBack.bind(this)
-    this.handleSearch = this.handleSearch.bind(this)
-    this.renderRightComponent = this.renderRightComponent.bind(this)
+const DefaultHeader = memo((props) => {
+  let navigation = null
+  try {
+    navigation = useNavigation()
+  } catch (err) {
   }
-
-  handleSearch () {
+  const handleSearch = () => {
     SearchPanel.show()
   }
 
-  handleBack () {
-    const { navigation, backTopTop = false, onPressBack } = this.props
-    if (onPressBack) {
-      return onPressBack()
-    }
-    if (backTopTop) {
-      return navigationPopToTop(navigation)
+  const handleBack = () => {
+    try {
+      const { backTopTop = false, onPressBack } = props
+      if (onPressBack) {
+        return onPressBack()
+      }
+      if (backTopTop) {
+        return navigationPopToTop(navigation)
+      }
+      navigationPop(navigation)
+    } catch (err) {
+
     }
-    navigationPop(navigation)
   }
 
-  getStackLength () {
-    const { navigation } = this.props
+  const getStackLength = () => {
     try {
-      const parent = navigation.dangerouslyGetParent()
-      if (
-        parent &&
-        parent.state &&
-        parent.state.routes
-      ) {
-        return parent.state.routes.length
-      }
-      return 0
+      const routesLength = useNavigationState(state => state.routes.length)
+      return routesLength
     } catch (err) {
       return 0
     }
   }
 
-  renderLeftComponent (props) {
-    const { leftComponent, noBack, onPressBack } = this.props
+  const renderLeftComponent = () => {
+    const { leftComponent, noBack, onPressBack } = props
     if (leftComponent) {
       return leftComponent
     }
-    if (onPressBack || (this.getStackLength() > 1 && !noBack)) {
+    if (onPressBack || (getStackLength() > 1 && !noBack)) {
       return (
         <TopNavigationAction
-          onPress={this.handleBack}
+          onPress={handleBack}
           icon={(style) => {
             return (<Icon style={[style, {}]} name='arrow-left' />)
           }}
@@ -70,13 +65,13 @@ class DefaultHeader extends PureComponent {
     return null
   }
 
-  renderRightComponent () {
-    const { search } = this.props
+  const renderRightComponent = () => {
+    const { search } = props
     if (search) {
       return [
         <TopNavigationAction
           key='search'
-          onPress={this.handleSearch}
+          onPress={handleSearch}
           icon={(style) => {
             return (<Icon style={[style, { fontSize: 30, width: 28 }]} name='search' />)
           }}
@@ -86,48 +81,46 @@ class DefaultHeader extends PureComponent {
     return null
   }
 
-  render () {
-    const {
-      title = '',
-      themedStyle,
-      linearGradient,
-      headerContainer = {},
-      headerWrapperContainer = {}
-      // leftTitle = ''
-    } = this.props
+  const {
+    title = '',
+    themedStyle,
+    linearGradient,
+    headerContainer = {},
+    headerWrapperContainer = {}
+    // leftTitle = ''
+  } = props
 
-    if (!linearGradient) {
-      return (
-        <TopNavigation
-          title={title}
-          alignment='center'
-          titleStyle={{}}
-          style={[themedStyle.header, commonStyles.shadow, headerContainer]}
-          leftControl={this.renderLeftComponent()}
-          rightControls={this.renderRightComponent()}
-        />
-      )
-    }
+  if (!linearGradient) {
     return (
-      <LinearGradient
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 0 }}
-        colors={HEADER_GRADIENT}
-        // locations={[0.1, 0.6, 1]}
-        style={[themedStyle.linearGradient, commonStyles.shadow, headerWrapperContainer]}
-      >
-        <TopNavigation
-          title={title}
-          alignment='center'
-          titleStyle={{}}
-          style={[themedStyle.header, commonStyles.shadow, headerContainer]}
-          leftControl={this.renderLeftComponent()}
-          rightControls={this.renderRightComponent()}
-        />
-      </LinearGradient>
+      <TopNavigation
+        title={title}
+        alignment='center'
+        titleStyle={{}}
+        style={[themedStyle.header, commonStyles.shadow, headerContainer]}
+        leftControl={renderLeftComponent()}
+        rightControls={renderRightComponent()}
+      />
     )
   }
-}
+  return (
+    <LinearGradient
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      colors={HEADER_GRADIENT}
+      // locations={[0.1, 0.6, 1]}
+      style={[themedStyle.linearGradient, commonStyles.shadow, headerWrapperContainer]}
+    >
+      <TopNavigation
+        title={title}
+        alignment='center'
+        titleStyle={{}}
+        style={[themedStyle.header, commonStyles.shadow, headerContainer]}
+        leftControl={renderLeftComponent()}
+        rightControls={renderRightComponent()}
+      />
+    </LinearGradient>
+  )
+})
 
 export default withStyles(DefaultHeader, (theme) => ({
   header: {