question about styled-components about swiftui-react-native

[andrew-levy]

Hey @sallar! Thanks for pointing this out. It was honestly a pretty arbitrary choice since I was starting to learn styled components at the time of starting this library, but now I'm definitely regretting it (bundle size is too big for my liking). I wanted a way to dynamically style components based on props, and I don't think thats possible with the StyleSheet.create() api. What alternatives do you suggest? I would definitely be interested in removing it. Looks like there are only 16 instances of styled components, so shouldn't take too too long to fix.

If you have an interest (or anyone else) in contributing to this project please feel free! I think my main goal is to recreate SwiftUI views in JS, while trying to follow the SwiftUI syntax/terminology as closely as possible (of course there will be some tradeoffs).

Full disclosure, this is my first RN package I've created, so I'm sure there is much to improve upon!

[andrew-levy]

I already started converting the styled components to normal RN styles, so I will keep u posted on when this is done

[sallar]

@andrew-levy I can help! Leave this part to me. I'll send a PR soon 🎉

[sallar]

Thanks for the reply @andrew-levy 😊
Yes you can use normal RN styles for dynamic styles too and combine StyleSheet and inline styles like so:

<View style={[styles.box, { paddingBottom: 10 }]} />

There are some utilities like StyleSheet.flatten that you can use when this gets too complex.

[sallar]

I can contribute some styling options too soon when I get some free time. 😊

[andrew-levy]

@sallar Great, I'll get on that. Thanks for the input! Will let you know what I get done.

[andrew-levy]

@sallar I was able to convert the components and removed styled-components as a dependency for the project. Thanks again for bringing it up, I think its better off now that it has been removed.

See the commit: 175685c

[sallar]

Thanks @andrew-levy! this looks wonderful now.
I have one other concern to share:

The Navigation stuff that you have implemented here are great, however not all projects use react-navigation project. Quite many of RN projects use react-native-navigation instead.

So "installing" the react-navigation packages in those projects and importing them automatically by installing this package, might not produce the desired result or might break things.

If I may suggest doing this instead:

• Remove exports and references to Navigation* stuff from index.ts, so they wont get imported automatically
• Move the navigation components and views to a "sub-package" like so: swiftui-react-native/react-navigation
• In the future it would be possible to add more "sub-packages" eg. swiftui-react-native/react-native-navigation

I think this makes it more complicated, but this way the package will be useful to more people! Let me know if I can help with this...

Thank you and have a nice day.

[andrew-levy]

Yeah this is a concern I have as well, I am planning on fixing this soon @sallar . I need to do some research on how exactly to create a sub-package first. Would each sub-package have its own npm package associated with it?

This is what I am thinking:

1. Create packages/ under the root folder
2. Create sub-package swiftui-react-native/react-navigation (Do I need to create a new ts/node project here?)
3. Move navigation components to this package, and export them in their own index.ts file. Remove references in parent package.
4. Publish new package separately to npm? A little fuzzy on this step. Desired use case would be able to do either of these based on what the user needs:
   import { Text } from 'swiftui-react-native';
import { NavigationLink } from 'swiftui-react-native/react-navigation';

Thanks

[sallar]

Awesome!

You dont need to create separate npm packages. a "simple" way would be enough.

This is the final structure that you need to make for it to work:

dist/
  index.js <- this does NOT export navigation stuff, but exports everything else
  navigation/
    index.js <- this exports navigation stuff

however this would be a bit different than what you want:

import { Navigation } form 'swiftui-react-native/dist/navigation'

which is wrong.

So you need a tool to create a temporary directory, paste everything in "root" of that directory and publish that, and delete it. so that temporary directory would look like this:

/
  index.js <- this does NOT export navigation stuff, but exports everything else
  navigation/
    index.js <- this exports navigation stuff
  // ... other files
  package.json <- automatically copied from the main package

[sallar]

@andrew-levy this answer shows the solution:
https://stackoverflow.com/a/64961385/172805

notice the pkgRoot thingie there. so if everything is in dist, it publishes that as root. it achieves what we want.

[andrew-levy]

@sallar okay thanks for this. I'll try my best to do this on my own, but may ask for help along the way if that's okay. Not sure if you have much free time on your hands to work on this, but if you wanna create a branch and take a stab let me know!