Not so good at all !!

[joy-mollick]

I thought it first very easy and nice one . But I found it not enough good and did not have good documentation also. I mean to say you have to learn it by wasting so much time over this. You had better use stylesheet from react-native. That is easy. It is good for nothing package, sometimes even press and other functions will not work . It is better to leave this package.

[georgii-ivanov]

Can you elaborate on exactly all the painful things for you?

[georgii-ivanov]

In my opinion, it's not bad at all. It's fresh, universal. Well, maybe it's not as well optimized as we would like to see... But better than v2.

Lack of documentation - yes. Also removed AppBar, Drawer, DatePicker - yes. Very slow development... I wish they will speed up and spend more time in the development of this framework and optimization.

[trajano]

@joy-mollick do you have any other suggestions? I tried a few and this was the most sane one at the moment bugs and all. At least to get me over the hurdle of getting an app out before I strip most of the components out.

I already planned from the get go that the only way to ensure that there's reduced vendor lock in is to wrap almost every single component with your own and manage the use

e.g.

export { Box } from 'native-base';

or something crazy like this which adds i18n to the text component without getting the developers to useLocalization themselves.

import { Text as NBText, ITextProps as NBTextProps} from `native-base`;

export TextProps = NBTextProps | (Omit<NBTextProps, 'children'> & { t: string }) // add localization
export function Text({t, props}: TextProps) : JSX.Element {
   const { i18n } = useLocalization();
   if (t) {
     return <NBText {...props}>{i18n(t)}</NBText>
   } else {
    return <NBText {...props} />
   }
}

Some things to note...

• Don't use the spacings and sizes. Honestly too complicated. Most devs already think in pixels so us px everywhere.
• If you have complex Text requirements, don't use Text from NB until they fix the nested styles bug. Use the standard react-native text or create your own. (which I did). Also it's best to create your own Text components since you can prestyle them. The one thing you would want to take from native base is the color mode. So you can do light and dark mode. Aside from that keep your theme customizations simple.
• Use Box and utility props. It's more natural to do it rather than styles
• Define your color palette before using Native Base. Quite important to do this otherwise the colors will get quite confusing later.
• Native base has so-so theming support (I say so-so because the typings for it is quite bad (so much so I created my own). They simply exported a const as the type. But compared to others, and combined with a few features of native-base

component themeing utility props ** responsive layout (of which the logic seemed flawed so I made my own custom for this as well)

I would still use react-navigation for navigation elements. No way would I use the appbar, tab bar or button bar here. Primarily because I want the app to look closer to the OS rather than it's own UI.

I would use Formik to manage my forms and use the as much of the native inputs since it's more well controlled.

The way I think about native base is it helps bring some concepts that would make sense for any project, Just take the parts you want, wrap it up and maybe re-implement or install something that does not work well but the idea is sound for your app project.

[georgii-ivanov]

"I would still use react-navigation for navigation elements. No way would I use the appbar, tab bar or button bar here. Primarily because I want the app to look closer to the OS rather than it's own UI."

Well that is maybe.. but in that case you would be able to reuse the same header element for web. As well as its responsiveness. My case is next.js + expo. And I have to use custom AppBar as it should be in the app layout.

Formik is too heavy.. there's also react-hook-from IMO is much much better in terms of performance and compatibility with custom UI frameworks.

And your notes are too opinionated. I like spacing/sizes (and base 4px size) it's easy to get used to it...

I think the only problem the way how it's actively maintained.

[trajano]

And your notes are too opinionated. I like spacing/sizes (and base 4px size) it's easy to get used to it...

This is mostly an opinion issue. Which technically shouldn't be here, it should really be in a forum.

[kenchoong]

It is not responsive in Web.

In docs, if it stated when wanna to make the width responsive we can do like this:

<Box width={["100%", "100%", "80%", "60%"]}> 
  ... anything here 
</Box>

This will make in Mobile web or app the width will take 100%, then in big screen AKA PC screen, browser it will take 60%.

But when go to the website, the screen look like this:

This clearly not 60% of the big screen. But it is right in mobile screen.

Same thing go to this:

 <Flex
      direction={["column", "column", "row", "row"]}

Same issue, when first load the webpage in PC browser, the Flex is appeared as column(it should be row).

This look like, no matter what breakpoint you set, when the web first load, it all followed the "mobile layout", it ignores whatever the "real screen size", it just follow mobile.

Then when I do like this in Google Developer tools AKA F12 in keyboard:

1. Change the screen size to mobile
2. then change back to browser (In Google chrome)

Then, the breakpoint is "take effect" aka direction and width as stated above.

But this is pointless, cause the "real user" will never go to F12 to change the screen size then switch back, so this is useless.

To prove what I face is right, then I also "hard coded" the direction and width for the Box and Flex above like this:

 <Flex
      direction="row"> 
      ... anything here 
  </Flex>

  <Box width="60%"> 
    ... anything here 
   </Box>

It worked as expected in PC browser. But this also not useful, because if I open the mobile web, then the Box is only taking 60% of the screen, so this also not what I want, you get what I mean.

I tried my best to explain what I facing right now. In mobile, everything ok, but when I use it in web, the responsiveness is just ".....", dont know what to say.

Please, if someone can help for this, please let me know, I need to solve my project.

[intergalacticspacehighway]

@kenchoong are you rendering this page on server side? What framework are you using for running it on the browser? Is it in NextJS, CRA, expo or something else?

[kenchoong]

@kenchoong are you rendering this page on server side? What framework are you using for running it on the browser? Is it in NextJS, CRA, expo or something else?

Yes, I have use Next js, the data is from getServerSideProps, is it cause by this??

FYI, I have use Nextjs, expo all together in 1 repo

[hemadriDasari1990]

I’m having same problem. The library is quite big and surely a great library but it’s not quite matured yet. Breakpoints doesn’t work in web. Document doesn’t have enough examples and the components doesn’t support additional props like material UI. Their examples(kitchen synk) are very poorly written and uses external libraries to create a layout and the code isn’t clean. Small things aren’t working and wasting lot of time but yet no resolution. This is my experience so far. Library is good but it’s a bad headache on head.

[kenchoong]

@hemadriDasari1990 https://github.com/GeekyAnts/NativeBase/issues/3997#issuecomment-954605433 here is the solution

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.