Discuss treeshaking approach here.

[intergalacticspacehighway]

Is your feature request related to a problem? Please describe.

Currently, treeshaking doesn't work on components since we import from "native-base" and things are imported and exported via index, bundlers ship the entire nativebase build.

Describe the solution you'd like

Create a babel plugin which can change the imports from
import {Box} from "native-base"
to
import Box from "native-base/lib/module/components/primitives/Box"

Describe alternatives you've considered

None, if there's any other way for a better treeshaking support, please add it here.

[darrylyoung]

The suggested solution sounds great, @intergalacticspacehighway.

Have there been any further internal discussions around this? I'm using Native Base solely for the Toast component as other packages doing similar are very outdated and I need something quickly for a project.

Since updating from 2.15.2 to 3.1.0 yesterday, though, I noticed my Compressed File Size of my iOS app in TestFlight has increased from 17.9 MB to 18.2 MB. The Native Base change was the only difference in the code between builds. It's not a massive increase, sure, but seeing as I'm using the same component it's a little frustrating that the bundle has bloated a little more so any kind of tree shaking would be greatly appreciated.

I guess I could analyse the bundle to see exactly what's going on but I did notice with 3.x that I needed to add styled-components and styled-system as dependencies in my project so maybe that's the cause?

Anyway, thanks for creating this issue. I'll keep an eye on it. Have a nice day.

[darrylyoung]

For context, I just analysed the bundle and this is what I saw for Native Base. I know you're aware of this but I wanted to add to my previous message. 6.5% of my bundle, when React Native is only ~12%, is quite a lot.

[RWOverdijk]

I just realised my issue (#4097) is a duplicate of this one, kinda.

Anyway, I woud split the components into their own directories like material-ui does:

import Box from '@mui/material/Box';
import List from '@mui/material/List';

This could be kept backwards compatible by keeping the index file as well.

Do note that this is not enough. Internally nativebase also uses imports from index files. Those will need to be either rewritten or otherwise resolved. If the bundled code gets used (which is currently the case in a default expo project for example) babel won't be able to solve it for us, meaning we solve nothing and only add confusion.

[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.

[RWOverdijk]

Maybe not stale 😄. Any progess on this?

[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.

[darrylyoung]

Has there been any progress or further discussion? If not, maybe we should leave this open.

[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.

[jontewks]

Bump

[michaelangeloio]

Bump

[byteab]

Button.android.tsx
Button.ios.tsx
and then at the build time according to the platform, you can remove each one of them from the bundle.
this can help with the size of the bundle