Consistent with react-native rendering

[cpunion]

Do you want to request a feature or report a bug?

Request Feature: Make some rendering consistent with react-native.

What is the current behavior?

See https://github.com/GeekyAnts/NativeBase-KitchenSink/issues/81, I created a repo to try to make NativeBase-KitchenSink working on react-native-web (Try not to modify code), it works not bad and has some problems that seems difference with on react-native:

1. Some style problems, e.g. Button's border, it rendered as 3 pixels width, but in Chrome DevTool I didn't see that style. Also reproduce this in a small example, it just render a NativeBase's Button in a View.

2. Some API it's not supported, I can patch in my environment. e.g. Dimensions, Platform.getInitialURL etc.

So just need fix some style problem. I don't know it should be fixed in react-native-web's or NativeBase's.

If the current behavior is a bug, please provide the steps to reproduce and if a minimal demo of the problem via Glitch or similar (template: https://glitch.com/edit/#!/react-native-web-playground).

See the link above.

What is the expected behavior?

Consistent with react-native.

Environment (include versions). Did this work in previous versions?

• OS: macOS 10.13
• Device: MBP 2012 late
• Browser: Chrome 62.0.3202.75
• React Native for Web (version):0.1.12
• React (version):16.0.0

[necolas]

Please can you make some isolated test cases and specify which APIs. I'll reopen when there is that actionable info. Thanks

[cpunion]

https://glitch.com/edit/#!/sable-suit

Made a smallest test to reproduce without NativeBase, just show a View with borderWidth: null, it displays a 3-pixel width black border. In NativeBase it also used borderWidth: null.

Code:

      <View style={{width: 300, height: 100, borderWidth: null}} />

Render result:

In Chrome DevTool it has 3-pixel width border:

Doesn't see the style about 3px border:

[cpunion]

I will see the other problems and try to make smallest test case.

[necolas]

Thanks. The border issue should be fixed in 0.1.13

[cpunion]

After upgraded to react-native-web@0.1.3 and patched Dimension, I checked more issues and record here to avoid a new post.

• [ ] Wrong right alignment in ListItem Can't reproduce in a simple case.
• [ ] ActionSheet We can implement a Modal, and then implement the ActionSheetIOS.
• [ ] Layout & Border width is different in Card/Card Showcase. It's 3-pixel width border too, but can't reproduce in a simple case. https://github.com/necolas/react-native-web/issues/700
• [ ] Layout different in Deck Swiper/Advanced Deck Swiper.
• [ ] Layout different in Form & Inputs/Stacked Label.
• [ ] Style different in List/List Header.
• [ ] Style different in List/List Icon: Seems it's problem about unimplemented Modal too, more cases in Picker.
• [ ] Layout different in SearchBar.
• [ ] Layout different in Tabs/Scrollable Tabs.
• [x] Drawer layout defferent Solved by patching Dimension

And other cases are perfect, I think it's good consistency with react-native. :thumbsup::thumbsup::thumbsup:

So Modal is important to make some components work. And I will try to check and simplify other cases.

Some snapshots: (The picture with a big black border is capture on iOS Simulator, it run in react-native)

[murtraja]

That red bordered box is still present when we have <Root/> component from NativeBase. @cpunion, did you find any workarounds for this since no matter howsoever I style it, it still is visible :)

[tonypee]

Is there an update on the red box issue? Im seeing it also

[jmatsushita]

Also seeing this with ActionSheet on native-base@2.13.8 with react-native-web@0.11.7 CC https://github.com/GeekyAnts/NativeBase-KitchenSink/issues/81

[jmatsushita]

Oh, is it that Modal isn't implemented yet? https://github.com/necolas/react-native-web/issues/1020 ?