Web support

[marioaks]

Hey!

I just started using this, and so far it's great! Seems like the best bottom drawer out there

Feature Request

I'm currently trying to use this library with an Expo / React Native Web app. In order to get it working, I used patch-package to add a Touchables.web.js file and a ContentWrapper.web.js file that are exact replicas of their respective ios files. I was wondering if it would be possible to add these two files so patching isn't necessary to support web?

Thanks!

[gorhom]

hi @marioaks , if you get it working for web ... well done !!

please submit a pr and i'll merge it asap 😇

[nandorojo]

Hey there, just wondering if you think this will get merged? Thanks for the awesome work on this library, & @marioaks for identifying this issue.

[gorhom]

@nandorojo unfortunately i tested this pr, but it is not working properly and i was planning to pick it up but i didn't had the time for it. https://github.com/gorhom/react-native-bottom-sheet/pull/14

[nandorojo]

Sounds good, thanks for the heads up!

[nandorojo]

Just wondering, is there somewhere you think I should look if I want to try to get this to work on web? Files to change that need work, etc.

[gorhom]

hi @nandorojo, to be honest i am not an expert in react-native-web. however, you could pick @marioaks pr and i'll try my best to help out :)

[Angelk90]

@marioaks : Are there any news?

[marioaks]

The PR I submitted was a barebone patch for react-native-web but was never fully functioning. I should have submitted the PR as a draft since I still needed some guidance on how to proceed with the styling of the drawer on web.

In other words, this PR was never in a mergeable state, but since I never received any sort of feedback on it, I wasn't able to move forward.

[Angelk90]

@marioaks : I think you should ask @gorhom.

[marioaks]

Hopefully the PR is useful for anyone who tries to get this working for RNW, but I no longer have the time to work on this. Sorry @Angelk90

[planecore]

Any updates on this? @gorhom

[zhigang1992]

@planecore this actually now works out of the box (almost) see #357 for more detail

[nandorojo]

How do you guys handle the UX on a large screen? I wonder if it should become a modal instead of a sheet on a large desktop. Or, do you just set a max width?

[gorhom]

thanks @zhigang1992 ❤️ , i will look at later today!

How do you guys handle the UX on a large screen? I wonder if it should become a modal instead of a sheet on a large desktop. Or, do you just set a max width?

@nandorojo good idea, this is something @thupi also suggested but for tablets https://github.com/gorhom/react-native-bottom-sheet/discussions/234

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[axeldelafosse]

Here is an example working with Expo and Next.js: https://github.com/axeldelafosse/bottom-sheet-example. I'll send a PR soon so we don't need to use this patch

[ajturpei]

Any news on this? We are using this great bottom sheet but it causes gray hair with React-native-web even when you don't use it for RN web but you import this package in a file that RN web is using.

[nandorojo]

use the patch from this comment in the meantime https://github.com/gorhom/react-native-bottom-sheet/issues/11#issuecomment-893502341

[gorhom]

@ajturpei @nandorojo @axeldelafosse , i have applied the patch to enable the current library to run on web on 4.0.0-alpha.27 👍

[JJK801]

Hi @gorhom,

i can't get it working on web, i get an error

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at useDerivedValue (Hooks.js:432)
    at BottomSheet (BottomSheet.js:97)

Did i miss something to make it works ?

[nandorojo]

Try following these instructions, but replace moti with the bottom sheet:

https://moti.fyi/web

[nandorojo]

@gorhom : Could you create an example on snack.expo.io to try out web support?

Expo Snack uses a version of react-native-web that's incompatible with Reanimated 2. So unfortunately, it won't work well on a snack.

I tried to get reanimated 2 working on CodeSandbox, but I can't seem to figure out how. If someone could do that, it would be great.

[JJK801]

Thanks @nandorojo 👍

For memory:

webpack.config.json

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync(
        {
            ...env,
            babel: { dangerouslyAddModulePathsToTranspile: ['@gorhom'] },
        },
        argv
    );

    return config;
};

[nandorojo]

@gorhom I recommend adding that to the docs (and link to Axel’s monorepo for adding Next.js support).

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[ngochnvn]

Hi @gorhom,

Is it possible to merge the web fix into v2? I upgraded to v4 and it seems to compile for web. However, I am not able to test on expo managed due because v4 uses reanimated2, so I have to downgrade to v2.

Thank you very much

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[LinusU]

I don't think that this is stale, but it seems like this is already working. Could we get this added to the readme?

[webdiller]

I found only 2 libs 'bottom-sheet' for web. It's 'react-modal-sheet' and 'react-spring-bottom-sheet'.