React-native-ui-kitten: 🌐React Native Web support

[elie222]

Issue type

I'm submitting a

• [x] feature request

Issue description

I started playing around with this library with Expo React Native Web. I see it semi works, but there are pieces that don't. For example, in this screenshot the top navigation works, but the bottom doesn't:

I assume this issue is due to default flex values on web/mobile.

Are there any plans to support Web? Would be happy to contribute too.

[artyorsh]

Hi @elie222, thanks for your interest

We had no plans to support react-native-web within this release, but I know this is a trending feature of RN now, so we're going to support this in future releases.

Can you please provide more user experience of using this on web? We would appreciate any feedback 👍

[elie222]

So I played around with it a bit more in the last hour.

I found some other pieces also don't work as expected. For example Input:

I tried to get the Kittens demo app working with the recently released Expo Web, but the file paths (import xyz from '@src/xyz') weren't playing nicely with Expo Web. But I imagine there would be a lot of problems to resolve even if I did get it to compile for web as can be seen from the screenshots.

[artyorsh]

import xyz from '@src/xyz'

Unfortunately, we have implemented this incorrectly. This needs to be configured with babel-plugin-module-resolver using aliases inside babel.config.js. I can explain the steps of how to get this working if needed

Btw, looks not so ugly for the components that were never tested on the web 😄

[elie222]

It's not terrible. The top nav actually works very nicely.
And the tab bar at the bottom does animate the line. The only issue is names lined up vertically rather horizontally. That may be a default flex direction issue.

[artyorsh]

That may be a default flex direction issue

Yes, looks like this. Because BottomNavigation component uses row flexDirection

Btw if you're going to continue using UI Kitten in your purposes, we're always welcome any feedback to simplify future react-native-web integration.

Thanks for your reply

[artyorsh]

So after some workarounds, we're able now to launch a playground module on a web. For anybody interested in - here is a sample branch which should become the start point of integrating UI Kitten with react-native-web.

To launch it, you can simply clone this repo and run npm i && npm run start:prod and then follow CLI instructions (or simply press w to open a browser 😄)

Demo

[artyorsh]

Did some basic bug fixes which make web components look the same as on mobile. Changes

Problem:

StyleSheet.create is not working properly on react-native-web:

• Reported in https://github.com/necolas/react-native-web/issues/1377.
• Demo project

However, for now we've got a working example for all of implemented components with some of workarounds I explained in a demo project.

Known issues:

• TabView crashes because of PanGestureResponder which is not currently supported on a web
• TabView scrolling not working (unsupported configuration on a web?)
• Input is not looking well because of a default box styles

[artyorsh]

Update

• Reduced creating custom styles with an object. Refactored back to StyleSheet as suggested in answer
• Fixed TabView scrolling

Issues:

• ButtonGroup looks not well in outline
• Input still need to remove a box

Changes

Tab View Demo

[rdewolff]

The links with the demo are not working, do you have them by any chances?