react-native-drawer-layout icon indicating copy to clipboard operation
react-native-drawer-layout copied to clipboard

Support for `react-native-web`?

Open piranna opened this issue 6 years ago • 3 comments

I've inspected the code and seems all the APIs and components that react-native-drawer-layout uses are already implemented in react-native-web. Do you know if effectively this project support it? I hasn't seen any reference that confirm that... If so, could it be possible to indicate it in the README.md file? :-)

piranna avatar Nov 09 '17 10:11 piranna

I have never tried and would love a PR to the README if you checked it out 👍

DanielMSchmidt avatar Nov 09 '17 12:11 DanielMSchmidt

So... it works! :-D

pantallazo-2017-11-09 18-55-25

I didn't need to do anything, just import the module and use the example code of DrawerLayout :-) I needed to figure out how to open the drawer by dragging on the left of the screen (it needs to be done only on the superior region where the text boxes are, not all the left border), but after that it was a surprise see it working :-D

I'm using React 16, that's the reason of the error that's being shown, because now it's a bit picky with the propTypes:

Warning: React does not recognize the `accessibilityViewIsModal` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilityviewismodal` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by View)
    in View (at createAnimatedComponent.js:76)
    in AnimatedComponent (at DrawerLayout.js:193)
    in div (created by View)
    in View (at DrawerLayout.js:177)
    in DrawerLayout (at App.js:19)
    in App (at index.js:5)

Not sure if I should do the pull-request adding the comment on the readme file, or if you would like to take a look on fixing this warning first... Another interesting thing would be to add an index.android.js file importing the native component, so when using this module it will use it transparently to the user, as how regular browser polyfills works, how do you see it? :-)

piranna avatar Nov 09 '17 18:11 piranna

Since this issue is still open I just wanted to chime in and say I am using this library on 2 production enterprise web applications (via react-native-web) and it works well. Looks something like the following <DrawerLayout ref={drawerRef} useNativeAnimations={Platform.OS !== 'web'} drawerPosition="left" drawerWidth={250} renderNavigationView={() => <AppDrawer {...drawerProps} />} keyboardDismissMode="on-drag" > <MainElement style={{ display: 'flex', flexDirection: 'column', backgroundColor: '#f8fafc', }} > <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', paddingHorizontal: 20, }} > {children} </ScrollView> </MainElement> </DrawerLayout>

zachariahtimothy avatar Mar 24 '20 13:03 zachariahtimothy