Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade react-navigation to 6.x #3078

Merged
merged 18 commits into from
Jun 8, 2021
Merged

Upgrade react-navigation to 6.x #3078

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d9035f6
Merge branch 'Expensify:main' into master
tugbadogan May 11, 2021
85dfdbf
Merge branch 'Expensify:main' into master
tugbadogan May 17, 2021
e76d11d
Upgrade react-navigation to 6.x
tugbadogan May 22, 2021
2852e12
Resolved exceptions
tugbadogan May 22, 2021
89b7caa
Fix android and web exceptions
tugbadogan May 23, 2021
a75fe58
Merge branch 'Expensify:main' into master
tugbadogan May 25, 2021
2841b8f
Merge branch 'Expensify:main' into master
tugbadogan May 26, 2021
536b839
Fix missing previous screen on web and desktop
tugbadogan May 26, 2021
5319798
Merge branch 'master' into tugbadogan-upgrade-react-navigation-drawer
tugbadogan May 26, 2021
a729c8a
Fix Podfile.lock
tugbadogan May 26, 2021
dcb0cbd
Merge branch 'Expensify:main' into master
tugbadogan Jun 2, 2021
b434435
Merge branch 'master' into tugbadogan-upgrade-react-navigation-drawer
tugbadogan Jun 2, 2021
0ac0c70
Fix lint errors
tugbadogan Jun 3, 2021
e613d11
Remove redundant comment
tugbadogan Jun 3, 2021
37b3591
Fix empty chat and scroll issue on web
tugbadogan Jun 3, 2021
c0766f5
Upgrade react-native-screens version and remove detachInactiveScreens…
tugbadogan Jun 3, 2021
9c067fd
Update Podfile.lock
tugbadogan Jun 3, 2021
aa81556
Add comment to presentation transparentModal
tugbadogan Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ const webpack = {

const metro = {
presets: [require('metro-react-native-babel-preset')],
plugins: [],
plugins: [
'react-native-reanimated/plugin',
],
};

module.exports = ({caller}) => {
Expand Down
1 change: 1 addition & 0 deletions config/webpack/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const platformExclude = platform === 'web' ? new RegExp(/\.desktop\.js$/) : new

const includeModules = [
'react-native-animatable',
'react-native-reanimated',
'react-native-picker-select',
'react-native-web',
'@react-native-picker',
Expand Down
41 changes: 34 additions & 7 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,8 +416,8 @@ PODS:
- React-Core
- RNCClipboard (1.5.1):
- React-Core
- RNCMaskedView (0.1.10):
- React
- RNCMaskedView (0.2.4):
- React-Core
- RNCPicker (1.9.11):
- React-Core
- RNFBAnalytics (7.6.8):
Expand All @@ -435,8 +435,35 @@ PODS:
- React-Core
- RNPermissions (3.0.1):
- React-Core
- RNReanimated (1.13.2):
- RNReanimated (2.1.0):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
- Folly
- glog
- RCTRequired
- RCTTypeSafety
- React
- React-callinvoker
- React-Core
- React-Core/DevSupport
- React-Core/RCTWebSocket
- React-CoreModules
- React-cxxreact
- React-jsi
- React-jsiexecutor
- React-jsinspector
- React-RCTActionSheet
- React-RCTAnimation
- React-RCTBlob
- React-RCTImage
- React-RCTLinking
- React-RCTNetwork
- React-RCTSettings
- React-RCTText
- React-RCTVibration
- ReactCommon/turbomodule/core
- Yoga
- RNScreens (2.17.1):
- React-Core
- RNSVG (12.1.0):
Expand Down Expand Up @@ -513,7 +540,7 @@ DEPENDENCIES:
- RNBootSplash (from `../node_modules/react-native-bootsplash`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
- "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
- "RNFBAnalytics (from `../node_modules/@react-native-firebase/analytics`)"
- "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
Expand Down Expand Up @@ -640,7 +667,7 @@ EXTERNAL SOURCES:
RNCClipboard:
:path: "../node_modules/@react-native-community/clipboard"
RNCMaskedView:
:path: "../node_modules/@react-native-community/masked-view"
:path: "../node_modules/@react-native-masked-view/masked-view"
RNCPicker:
:path: "../node_modules/@react-native-picker/picker"
RNFBAnalytics:
Expand Down Expand Up @@ -731,14 +758,14 @@ SPEC CHECKSUMS:
RNBootSplash: 3123ba68fe44d8be09a014e89cc8f0f55b68a521
RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9
RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3
RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
RNCMaskedView: 138134c4d8a9421b4f2bf39055a79aa05c2d47b1
RNCPicker: 6780c753e9e674065db90d9c965920516402579d
RNFBAnalytics: 2dc4dd9e2445faffca041b10447a23a71dcdabf8
RNFBApp: 7eacc7da7ab19f96c05e434017d44a9f09410da8
RNFBCrashlytics: 4870c14cf8833053b6b5648911abefe1923854d2
RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
RNPermissions: eb94f9fdc0a8ecd02fcce0676d56ffb1395d41e1
RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
RNSVG: ce9d996113475209013317e48b05c21ee988d42e
urbanairship-react-native: dfb6dc22b2f41ccaadd636b73d51b448cd1b2bbc
Expand Down
126 changes: 88 additions & 38 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@
"@react-native-community/async-storage": "^1.11.0",
"@react-native-community/cli": "4.13.1",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.9.10",
"@react-native-community/progress-bar-android": "^1.0.4",
"@react-native-community/progress-view": "^1.2.3",
"@react-native-firebase/analytics": "^7.6.7",
"@react-native-firebase/app": "^8.4.5",
"@react-native-firebase/crashlytics": "^8.4.9",
"@react-native-masked-view/masked-view": "^0.2.4",
"@react-native-picker/picker": "^1.9.11",
"@react-navigation/compat": "^5.3.15",
"@react-navigation/drawer": "5.12.5",
"@react-navigation/native": "5.9.2",
"@react-navigation/stack": "5.14.2",
"@react-navigation/drawer": "^6.0.0-next.10",
"@react-navigation/native": "^6.0.0-next.8",
"@react-navigation/stack": "^6.0.0-next.17",
"babel-plugin-transform-remove-console": "^6.9.4",
"dotenv": "^8.2.0",
"electron-context-menu": "^2.3.0",
Expand Down Expand Up @@ -84,8 +84,8 @@
"react-native-pdf": "^6.2.2",
"react-native-permissions": "^3.0.1",
"react-native-picker-select": "8.0.4",
"react-native-reanimated": "^2.1.0",
"react-native-plaid-link-sdk": "^7.0.5",
"react-native-reanimated": "1.13.2",
"react-native-render-html": "^6.0.0-alpha.10",
"react-native-safe-area-context": "^3.1.4",
"react-native-screens": "2.17.1",
Expand Down
6 changes: 3 additions & 3 deletions src/components/withDrawerState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {useIsDrawerOpen} from '@react-navigation/drawer';
import {useDrawerStatus} from '@react-navigation/drawer';
import getComponentDisplayName from '../libs/getComponentDisplayName';

export const withDrawerPropTypes = {
Expand All @@ -9,14 +9,14 @@ export const withDrawerPropTypes = {

export default function withDrawerState(WrappedComponent) {
const WithDrawerState = (props) => {
const isDrawerOpen = useIsDrawerOpen();
const drawerStatus = useDrawerStatus();

return (
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
ref={props.forwardedRef}
isDrawerOpen={isDrawerOpen}
isDrawerOpen={drawerStatus === 'open'}
/>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/libs/Navigation/AppNavigator/AuthScreens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ class AuthScreens extends React.Component {
// a header will briefly open and close the keyboard and crash Android.
// eslint-disable-next-line react/jsx-props-no-multi-spaces
keyboardHandlingEnabled={false}
detachInactiveScreens={false}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I am not sure if we want this. Doesn't this mean that we are missing out on memory savings?

https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I don't set this prop, chat window view in the background doesn't work for modal views on web. We just have gray background.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, @tugbadogan how did you determine that setting that prop to false would fix the issue? Just wondering if there are alternate solutions since this has the side effect @marcaaron mentioned above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found this by accident while looking at the documentation. But, we don't need this anymore as I fixed the issue by upgrading react-native-screens package version to >3.0.0 as required by react-navigation 6.x and used presentation: 'transparentModal' for modal screen options.

>
{/* The MainDrawerNavigator contains the SidebarScreen and ReportScreen */}
<RootStack.Screen
Expand Down
Loading