Skip to content
This repository has been archived by the owner on Oct 14, 2020. It is now read-only.

Support for react-native-web? #48

Open
piranna opened this issue Nov 9, 2017 · 3 comments
Open

Support for react-native-web? #48

piranna opened this issue Nov 9, 2017 · 3 comments

Comments

@piranna
Copy link

piranna commented Nov 9, 2017

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
Copy link
Collaborator

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

@piranna
Copy link
Author

piranna commented Nov 9, 2017

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
Copy link

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>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants