Oct
16
8 hours ago
Activity icon
issue

grgr-dkrk issue comment react-navigation/react-navigation

grgr-dkrk
grgr-dkrk

fix(drawer): hide overlay if drawer is not open

fix #9828

From the fix at https://github.com/react-navigation/react-navigation/commit/3241190b19946c1cd0a744fb09a19d79ba683d74, the overlay containing Pressable is permanently displayed. This prevents VoiceOver from accessing the content under the overlay. This PR prevents overlays from being generated while the drawer is not open.

https://user-images.githubusercontent.com/40130327/136688279-ae23c70e-946b-4651-801a-75eef7c73fec.mov

grgr-dkrk
grgr-dkrk

@satya164 Thank you very much. I couldn't reproduce the gesture glitch, but instead of removing the overlay, I changed it to hide the element from assistive technology.

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

Large title not shown until explicitly scrolling to top by user

Current behavior

The large title is hidden and is a default title until scrolling to top. It does not happen if I just put a plain view or text in Stack.Screen.

(The green bar indicates that the app is reloaded)

https://user-images.githubusercontent.com/25424409/133506416-23191f63-1035-4e1d-859b-8e9ac82a0620.mp4

Expected behavior

The large title should be shown at first not after app launch(in this case it's reloading).

Reproduction

https://gist.github.com/lockieluke/40cf7a29cbb36195f9ead9fe4db322b4

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.2
@react-navigation/native-stack 6.1.0
react-native-safe-area-context 3.2.0
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native-reanimated 2.2.0
react-native 0.63.4
expo 42.0.1
node 16.4.0(Installed with NVM)
yarn 1.22.11
github-actions[bot]
github-actions[bot]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

Execution failed for JetifyTransform: node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar.

Current behavior

I just started the project with RN 0.66 and Drawer Navigator v5, Using Drawer Navigator error. I switched to using Drawer Navigator v6 still same error as version v5 Don't use expo "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^5.11.15", "@react-navigation/drawer": "^5.12.9", "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.8.0" },

OR update to v6 Same mistake.

"dependencies": { "@react-navigation/bottom-tabs": "^6.0.7", "@react-navigation/drawer": "^6.1.6", "@react-navigation/native": "^6.0.4", "@react-navigation/native-stack": "^6.2.2", "@react-navigation/stack": "^6.0.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2" },

Help me. thanks

Error FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':app:checkDebugAarMetadata'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Failed to transform react-native-reanimated-66-jsc.aar (project :react-native-reanimated) to match attributes {artifactType=android-aar-metadata}. > Execution failed for JetifyTransform: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. > Transform's input file does not exist: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. (See https://issuetracker.google.com/issues/158753935)

Expected behavior

Use React native 0.66 and Drawer Navigator v6

Reproduction

https://github.com/longtqdayma/RN66Navigator-.git

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
github-actions[bot]
github-actions[bot]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

Activity icon
issue

longtqdayma issue react-navigation/react-navigation

longtqdayma
longtqdayma

Execution failed for JetifyTransform: node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar.

Current behavior

I just started the project with RN 0.66 and Drawer Navigator v5, Using Drawer Navigator error. I switched to using Drawer Navigator v6 still same error as version v5 Don't use expo "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^5.11.15", "@react-navigation/drawer": "^5.12.9", "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.8.0" },

OR update to v6 Same mistake.

"dependencies": { "@react-navigation/bottom-tabs": "^6.0.7", "@react-navigation/drawer": "^6.1.6", "@react-navigation/native": "^6.0.4", "@react-navigation/native-stack": "^6.2.2", "@react-navigation/stack": "^6.0.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2" },

Help me. thanks

Error FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':app:checkDebugAarMetadata'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Failed to transform react-native-reanimated-66-jsc.aar (project :react-native-reanimated) to match attributes {artifactType=android-aar-metadata}. > Execution failed for JetifyTransform: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. > Transform's input file does not exist: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. (See https://issuetracker.google.com/issues/158753935)

Expected behavior

Use React native 0.66 and Drawer Navigator v6

Reproduction

https://github.com/longtqdayma/RN66Navigator-.git

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
Activity icon
issue

longtqdayma issue comment react-navigation/react-navigation

longtqdayma
longtqdayma

Execution failed for JetifyTransform: node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar.

Current behavior

I just started the project with RN 0.66 and Drawer Navigator v5, Using Drawer Navigator error. I switched to using Drawer Navigator v6 still same error as version v5 Don't use expo "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^5.11.15", "@react-navigation/drawer": "^5.12.9", "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.8.0" },

OR update to v6 Same mistake.

"dependencies": { "@react-navigation/bottom-tabs": "^6.0.7", "@react-navigation/drawer": "^6.1.6", "@react-navigation/native": "^6.0.4", "@react-navigation/native-stack": "^6.2.2", "@react-navigation/stack": "^6.0.9", "react": "17.0.2", "react-native": "0.66.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.2" },

Help me. thanks

Error FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':app:checkDebugAarMetadata'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Failed to transform react-native-reanimated-66-jsc.aar (project :react-native-reanimated) to match attributes {artifactType=android-aar-metadata}. > Execution failed for JetifyTransform: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. > Transform's input file does not exist: E:\3.CODE_ICT\1.CODE_MOBILE\MSmartEVN\node_modules\react-native-reanimated\android\react-native-reanimated-66-jsc.aar. (See https://issuetracker.google.com/issues/158753935)

Expected behavior

Use React native 0.66 and Drawer Navigator v6

Reproduction

https://github.com/longtqdayma/RN66Navigator-.git

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
longtqdayma
longtqdayma

ok thanhs. I did it and it worked

Oct
15
1 day ago
Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

TypeError: interpolate is not a function

I use the version of drawer navigation 4. X, but when I jump to the drawer page while running the project, the project crashes. How can I solve this problem?

image

My code is below: image image image

github-actions[bot]
github-actions[bot]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

Activity icon
issue

Jeysoon issue comment react-navigation/react-navigation

Jeysoon
Jeysoon

TypeError: interpolate is not a function

I use the version of drawer navigation 4. X, but when I jump to the drawer page while running the project, the project crashes. How can I solve this problem?

image

My code is below: image image image

Jeysoon
Jeysoon

@maufcost answer totally worked for me just had a little problem running npm install [email protected] but it was solved with npm install [email protected] --legacy-peer-deps and it worked like a charm as it use to before upgrading to SKD 43 and everythin else updated as well.

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

Header padding in @react-navigation/native-stack

Current behavior

If the default back button is hidden by passing {headerBackVisible: false, headerLeft: () => <HeaderBackButton/>} where the HeaderBackButton component is imported from @react-navigation/elements there is some padding to the left of the back button that is not there when using the default back button.

This issue is not the case when using the stack navigator from @react-navigatin/stack Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 33 Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 36

Expected behavior

Inserting HeaderBackButton for headerLeft should be identical to the default back button (visually)

Reproduction

https://github.com/b-steel/react-navigation-header-demo

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/stack 6.0.11
@react-navigation/native-stack 6.2.4
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.1
node 14.17.1
npm or yarn 1.22.15
github-actions[bot]
github-actions[bot]

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

Header padding in @react-navigation/native-stack

Current behavior

If the default back button is hidden by passing {headerBackVisible: false, headerLeft: () => <HeaderBackButton/>} where the HeaderBackButton component is imported from @react-navigation/elements there is some padding to the left of the back button that is not there when using the default back button.

This issue is not the case when using the stack navigator from @react-navigatin/stack Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 33 Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 36

Expected behavior

Inserting HeaderBackButton for headerLeft should be identical to the default back button (visually)

Reproduction

https://github.com/b-steel/react-navigation-header-demo

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.06
@react-navigation/stack 6.0.11
@react-navigation/native-stack 6.2.4
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.1
node 14.17.1
npm or yarn 1.22.15
github-actions[bot]
github-actions[bot]

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/native
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

Previous