search

rnc-archive / react-native-drawer-layout

A platform-agnostic drawer layout for react-native
256 stars 63 forks source link

Support for `react-native-web`? #48

Open piranna opened 7 years ago

piranna commented 7 years ago

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? :-)

DanielMSchmidt commented 7 years ago

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

piranna commented 7 years ago

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? :-)

zachariahtimothy commented 4 years ago

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} `