Drawer Navigator: Can't highlight text due to PanGestureHandler applying user-select: none

[TyPhyter]

Current behavior

Using the modern implementation of the Drawer Navigator in web builds, you cannot select text on any of your screens rendered by the navigator due to a user-select: none; rule being applied.

software-mansion/react-native-gesture-handler#2211
This issue from react-native-gesture-handler references the issue at hand in this package, which seems to propagate to this package due to the use of PanGestureHandler in the modern Drawer implementation.

react-navigation-gesture-handler released v2.7.1 today which addresses this issue, if we could get a react-navigation/drawer release that references this new version that would be great.

NOTE: I tried to get a repro going on snack but it doesn't seem possible to do with reanimated >2.5? Putting this up for now, if it gets closed I'll try to make a personal repo with a repro tomorrow.

Expected behavior

Should be able to select text rendered by drawer navigator.

Reproduction

Repro repo here
Repro has an attempt at using enableExperimentalWebImplementation() from react-native-gesture-handler commented out. Unsure if it should be above, below, or inplace of the import 'react-native-gesture-handler';, but we tried all three to no avail.

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

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

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.13
@react-navigation/drawer	6.5.0
react-native-safe-area-context	4.2.4
react-native-screens	3.15.0
react-native-gesture-handler	2.7.1
react-native-reanimated	2.8.0
react-native	0.68.2
expo	45.0.1
node	16.13.2
npm or yarn	yarn 1.22.5

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link, a www.typescriptlang.org/play link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

A repro will help us debug the issue. The issue will be closed automatically after a while if you don't provide a repro.

[kacperkapusciak]

Hi @TyPhyter 👋

Have you tried invoking enableExperimentalWebImplementation() from react-native-gesture-handler at the top of your application to enable this behavior?

I sure hope the new web implementation should work without action on react-navigation side.

Cheers

[TyPhyter]

Thanks for the reply @kacperkapusciak !

We did try that and it did not seem to resolve the issue.
I think the experimental web implementation in the referenced version of react-native-gesture-handler was so far unaware of the user-select issues, which if I'm looking at it correctly actually were introduced in the referenced version (2.5.0) based on the previous issue on the react-native-gesture-handler side.

I think our only way forward at this point without a resolution in this package will be to drop back to reanimated version 1 and use the legacy implementation of drawer navigator (crossing fingers that works).

I can set up a repro repo this afternoon for reference.

[TyPhyter]

A reproduction has been provided. Verified that enableExperimentalWebImplementation() does not seem to solve the issue

[m-bert]

Hi @TyPhyter 👋

Calling enableExperimentalWebImplementation() won't solve this problem because PR in issue that you've mentioned removed user-select: none; on NativeViewGestureHandler, not on PanGestureHandler.

We are planning to add new prop to gesture handlers on web, which will allow users to manually enable/disable user-select. With that change, solving this issue will be much easier.

[stevenconner]

now that this has been implemented in react-native-gesture-handler what can we do to fix this going forward? experiencing this issue myself

[megantaylor]

i think i'm also seeing this behavior, any movement?

[adamhari]

You can now override user-select by:

• calling enableExperimentalWebImplementation(true); from react-native-gesture-handler
• adding ...Platform.select({ web: { userSelect: 'auto' } }) to the gestureHandlerProps prop on DrawerNavigationOptions

[megantaylor]

hmm, neither of those approaches is working for me :(

[adamhari]

hmm, neither of those approaches is working for me :(

You need to do both. The first call should be made in your entry file (index.js), the gestureHandlerProps should be applied to your drawer navigator's screenOptions prop.

[megantaylor]

aha! thanks!

[coolben54]

Hello

Since i migrate my project to expo 50 from expo 48 I can't select text in web for page that is in my drawer.
Do you know i the fix still work ?

This is my code

import { Drawer } from 'expo-router/drawer';
import CustomSidebarMenu from '../../../Navigations/CustomSidebarMenu';
import appConst from '../../../AppStyles';
import { Platform } from 'react-native';
import { enableExperimentalWebImplementation } from 'react-native-gesture-handler';

export default function Layout() {
    enableExperimentalWebImplementation(true)

    //return <Slot />
    return (
        <Drawer
            drawerContent={(props: any) => <CustomSidebarMenu {...props} />}
            screenOptions={{
                headerShown: false,
                headerTintColor: appConst.primaryColor,
                ...Platform.select({ web: { userSelect: 'text' } })
            }}
        >
        </Drawer>
    );
}

[m-bert]

Hi @coolben54! As far as I can see Drawer uses version 2.14.x of react-native-gesture-handler, so calling enableExperimentalWebImplementation(true) should not be necessary anymore (new implementation is enabled by default, starting from version 2.10.0). Also you shouldn't call it inside component, but on the top-level instead.

I believe you have to pass userSelect into gestureHandlerProps like this:

screenOptions={{
          gestureHandlerProps: {
            ...Platform.select({ web: { userSelect: "text" } }),
          },
        }}

It worked in my case. It can be quite misleading though, since react-navigation docs say that this option is not supported on web (cc @adamhari).

[coolben54]

Thank you !
That works !