Add `nativewind` example

[marklawlor]

Adds an example with nativewind

• Tries to keep as close as possible as the main example -NativeWind doesn't have default components (and @expo/html-elements doesn't work with RNW 0.18) so a new packages/components was created with examples on how to create custom components.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @nandorojo on Vercel.

@nandorojo first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
with-custom-fonts	✅ Ready (Inspect)	Visit Preview	Sep 5, 2022 at 11:54PM (UTC)

2 Ignored Deployments

| Name | Status | Preview | Updated | | :--- | :----- | :------ | :------ | | **solito** | ⬜️ Ignored ([Inspect](https://vercel.com/fernandorojo/solito/Ge6NkxvDFX7h8tgRL2uFN8gNPeSD)) | | Sep 5, 2022 at 11:54PM (UTC) | | **solito-app** | ⬜️ Ignored ([Inspect](https://vercel.com/fernandorojo/solito-app/9uAkdd2s5xMoeST6hhNovc6J4G4K)) | | Sep 5, 2022 at 11:54PM (UTC) |

[marklawlor]

Looks good. I'm indifferent about the folder structure, both ways seem equally correct.

Changes to the readme look good :+1:

I update the dep range of tailwindcss-react-native to latest, as it seems that's how much create-*-app examples work.

[nandorojo]

sweet. the latest pattern technically gets broken by the yarn lock file (which is fine).

ideally it would install the latest at the time someone runs the create script. however, this would require removing the lock file from the example app, and in my experience that causes many errors with react and such. next’s examples don’t have a lock file, but maybe it’s more complex with a monorepo

[marklawlor]

@nandorojo Hold off on merging this for a little bit. I've going to release a new version with a simpler API to create the custom components.

[nandorojo]

sounds good, let me know

[marklawlor]

@nandorojo This is good to review again. typography.tsx and layout.tsx have been rewritten to use defaultProps instead of using wrapper components, reducing the overall render tree.

[nandorojo]

Interesting. I'm a bit up and down on the syntax there, since baseClassName doesn't very clearly map onto style anywhere. I'm more used to the typical react style that feels less magical, where you'd wrap the component itself.

const Center = styled(props => <Text {...props} className={`text-center ${props.className || ''}`} />)

[nandorojo]

How are we looking to get this merged? Anything left to do? I'd like to upgrade to sdk 45 on the blank example too.

[marklawlor]

This should be ready to merge, and you give it another look and let me know if things have changed.

[nandorojo]

I wonder if it’s because the resolution is in the wrong place, as my review of that PR suggested?

[0xBigBoss]

I wonder if it’s because the resolution is in the wrong place, as my review of that PR suggested?

I tried both, having the resolution in the packages/app and in the root. I left it in the root per your suggestion. But, it wasn't until I blew away my cache, cleared the node_modules, and removed the lockfile in this PR, then everything started working correctly.

screenshots

[0xBigBoss]

I wonder if it’s because the resolution is in the wrong place, as my review of that PR suggested?

For what it is worth, this is the repo I'm basing my new project off of. I actually didn't need to include the resolution after all, just add it as a dependency. https://github.com/0xBigBoss/solito-with-nativewind/blob/master/packages/app/package.json#L11

It has expo 46 and next 12.2.5 using solito and nativewind. Thanks a bunch everyone! Both PRs were very helpful.

[juanchaur]

@0xBigBoss what are the big differences between your repo and this PR?

[nandorojo]

I upgraded this to Next.js 12.3 + Expo SDK 46 successfully, and merged it via #140.

npx create-solito-app -t with-tailwind

I'll be doing a full announcement soon.

Amazing work @marklawlor!