https://github.com/steedos/steedos-solito
steedos mobile app: 🧍♂️ React Native + Next.js, unified.
https://github.com/steedos/steedos-solito
Last synced: 8 months ago
JSON representation
steedos mobile app: 🧍♂️ React Native + Next.js, unified.
- Host: GitHub
- URL: https://github.com/steedos/steedos-solito
- Owner: steedos
- License: mit
- Created: 2022-10-10T08:01:39.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-10T08:30:19.000Z (about 3 years ago)
- Last Synced: 2025-01-12T14:28:42.107Z (10 months ago)
- Language: TypeScript
- Size: 1.29 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Solito + NativeWind Example Monorepo 🕴
```sh
npx create-solito-app@latest my-solito-app -t with-tailwind
```
And just like that, you now have an Expo + Next.js app that is styled with Tailwind CSS.
## ⚡️ Instantly clone & deploy
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnandorojo%2Fsolito%2Ftree%2Fmaster%2Fexample-monorepos%2Fwith-tailwind&root-directory=apps/next&envDescription=Set%20this%20environment%20variable%20to%201%20for%20Turborepo%20to%20cache%20your%20node_modules.&envLink=https%3A%2F%2Ftwitter.com%2Fjaredpalmer%2Fstatus%2F1488954563533189124&project-name=solito-app&repo-name=solito-app&demo-title=Solito%20App%20%E2%9A%A1%EF%B8%8F&demo-description=React%20Native%20%2B%20Next.js%20starter%20with%20Solito.%20Made%20by%20Fernando%20Rojo.&demo-url=https%3A%2F%2Fsolito.dev%2Fstarter&demo-image=https%3A%2F%2Fsolito.dev%2Fimg%2Fog.png)
## 🔦 About
This monorepo is a starter for an Expo + Next.js app using [NativeWind](https://nativewind.dev) for its styling & [Solito](https://solito.dev) for navigation.
## 👓 How NativeWind works with Solito
### Fast on every platform
NativeWind lets you use Tailwind while reducing runtime work on every platform.
### iOS and Android
Most approaches to using Tailwind in React Native do something like this at runtime:
```ts
const styles = props.className
.split(' ')
.map((className) => makeStyle(className))
return
```
This means that every component ends up parsing strings to construct predictable style objects.
NativeWind takes a new approach by doing this work upfront with a Babel plugin.
NativeWind turns `className` strings into cached `StyleSheet.create` objects at build time, avoiding the [slow string parsing problem](https://twitter.com/terrysahaidak/status/1470735820915150850?s=20&t=w9VUPwiTFxBkRBHWTtDz1g) of libraries like `styled-components/native`.
Keep in mind that the Babel plugin will get used on iOS/Android only; on Web, we don't need the plugin since we are using `className`.
### Web
On Web, NativeWind uses Next.js' `PostCSS` feature to output CSS StyleSheets.
Which means that **on Web, you're using CSS class names.**
Yes, that's right. We aren't parsing className strings into objects for React Native Web to use. Instead, we're actually forwarding CSS classnames to the DOM. That means you can get responsive styles, dark mode support, & pseudo-selectors _with server-side rendering support_.
This is finally possible with the release of React Native Web 0.18.
As a result, using NativeWind with React Native doesn't have significant overhead compared to plain old Tailwind CSS in a regular React app.
If you're planning on making a website with Tailwind, why not use Solito with NativeWind?
You might accidentally make a great native app when you thought you were just making a website.
### Bringing it together
Components are written using the `styled()` higher-order component.
In your app's design system, you can start by building your own UI primitives:
```tsx
// packages/app/design/typography
import { Text } from 'react-native'
import { styled } from 'nativewind'
export const P = styled(Text, 'text-base text-black my-4')
```
Notice that you can set base styles using the second argument of `styled`.
You can then use the `className` prop, just like regular Tailwind CSS:
```tsx
Solito + NativeWind
```
Take a look at the [`packages/app/design`](https://github.com/nandorojo/solito/tree/master/example-monorepos/with-tailwind/packages/app/design) folder to see how components are created with ease.
> If you're reading the NativeWind docs, you might find that you can use `className` directly without using `styled`. Since this requires the Babel plugin for all platforms, it won't work with Solito. Be sure to always wrap your components with `styled`.
## 📦 Included packages
- `solito` for cross-platform navigation
- `moti` for animations
- `nativewind` for theming/design (you can bring your own, too)
- Expo SDK 46
- Next.js 12.3
- React Navigation 6
## 🗂 Folder layout
- `apps` entry points for each app
- `expo`
- `next`
- `packages` shared packages across apps
- `app` you'll be importing most files from `app/`
- `features` (don't use a `screens` folder. organize by feature.)
- `provider` (all the providers that wrap the app, and some no-ops for Web.)
- `navigation` Next.js has a `pages/` folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.
- `design` your app's design system. organize this as you please.
- `typography` (components for all the different text styles)
- `layout` (components for layouts)
You can add other folders inside of `packages/` if you know what you're doing and have a good reason to.
## 🏁 Start the app
- Install dependencies: `yarn`
- Next.js local dev: `yarn web`
- Runs `yarn next`
- Expo local dev: `yarn native`
- Runs `expo start`
## 🆕 Add new dependencies
### Pure JS dependencies
If you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:
```sh
cd packages/app
yarn add date-fns
cd ../..
yarn
```
### Native dependencies
If you're installing a library with any native code, you must install it in `apps/expo`:
```sh
cd apps/expo
yarn add react-native-reanimated
cd ../..
yarn
```
You can also install the native library inside of `packages/app` if you want to get autoimport for that package inside of the `app` folder. However, you need to be careful and install the _exact_ same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use `lerna-update-wizard` to help with this (you don't need to use Lerna to use that lib).
## 🎙 About the creator
### Fernando Rojo
Follow Fernando Rojo, creator of `solito`, on Twitter: [@FernandoTheRojo](https://twitter.com/fernandotherojo)
### Mark Lawlor
Follow Mark Lawlor, creator of `NativeWind`, on Twitter: [@mark\_\_lawlor](https://twitter.com/mark__lawlor)
## 🧐 Why use Expo + Next.js?
See my talk about this topic at Next.js Conf 2021:
