Hey HN! We&#x27;re Zach and Dan, and today we&#x27;re excited to introduce NativeWindUI, a UI library that helps you build beautiful apps for all native platforms through the power of Tailwind CSS and React Native. With this familiar set of tools, you can now easily deliver a great experience that feels native to each platform.As developers, we&#x27;ve always been frustrated by the trade-offs between development speed and native user experience. We&#x27;ve seen countless apps that feel &quot;off&quot; because they prioritized cross-platform consistency over platform-specific design patterns. It has become painfully clear to us that simply having access to native tooling does not guarantee a native feeling experience.Dan, the author of Create Expo Stack [1] and a maintainer of NativeWind (Tailwind for React Native) [2], has been a vocal advocate for the importance of native feel in apps. He gave a talk on this topic at Chain React 2024, highlighting how crucial it is for user engagement and retention [3]. Zach, the author of React Native Reusables (shadcn for React Native) [4] and React Native Primitives (headless components for React Native, based on RadixUI) [5], has spent years working on accessible and customizable UI tools that target every platform.We believe that good design is not just about aesthetics; it&#x27;s about trust. In the digital world, design is often the first point of contact between you and a prospective user. Poor design can make your app seem unstable or untrustworthy, while good design indicates attention to detail and care for the user experience.NativeWindUI aims to solve these problems. It&#x27;s built on top of NativeWind, allowing you to use Tailwind CSS classes in React Native, but with a crucial difference: it respects platform-specific design patterns. Here&#x27;s a simple example:```
import { View } from &#x27;react-native&#x27;;import { DatePicker } from &#x27;~&#x2F;components&#x2F;nativewindui&#x2F;DatePicker&#x27;;function DatePickerExample() {
 const [date, setDate] = React.useState(new Date());<pre><code> return (
 &lt;View className=&quot;items-center&quot;&gt;
 &lt;DatePicker
 value={date}
 mode=&quot;datetime&quot;
 onChange={(ev) =&gt; {
 setDate(new Date(ev.nativeEvent.timestamp));
 }}
 &#x2F;&gt;
 &lt;&#x2F;View&gt;
 );</code></pre>
}
```This code will render a date picker that looks and feels native on both iOS and Android, while still allowing you to customize it using familiar Tailwind classes. This same code renders differently on different platforms. See for yourself: <a href="https:&#x2F;&#x2F;nativewindui.com&#x2F;component&#x2F;date-picker" rel="nofollow">https:&#x2F;&#x2F;nativewindui.com&#x2F;component&#x2F;date-picker</a>Key features of NativeWindUI include:
- Platform-specific user flows and components that adhere to iOS and Android design guidelines
- 30+ copy-pastable components and 8 user flows&#x2F;templates, no need to import from a library, the code is yours
- A powerful CLI to help you easily install component code and any native dependencies
- Smooth animations and transitions
- Easy theming and dark mode support through `tailwind.config.js`We&#x27;ve been working on this since the beginning of the year, refining it over numerous versions, and now we’re making it available for you to use. We believe NativeWindUI can significantly speed up React Native development without compromising on the native feel that users expect and deserve.You can start exploring NativeWindUI today through our demo app:`npx create-expo-stack@latest --nativewindui`Check out our documentation at <a href="https:&#x2F;&#x2F;nativewindui.com" rel="nofollow">https:&#x2F;&#x2F;nativewindui.com</a> and the GitHub repository for our free components at <a href="https:&#x2F;&#x2F;github.com&#x2F;roninoss&#x2F;nativewindui">https:&#x2F;&#x2F;github.com&#x2F;roninoss&#x2F;nativewindui</a>We&#x27;re excited to hear your feedback and we&#x27;d love to see what you build with NativeWindUI!PS: Which components or templates would you like to see us build next?References
[1] <a href="https:&#x2F;&#x2F;rn.new" rel="nofollow">https:&#x2F;&#x2F;rn.new</a>
[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;nativewind&#x2F;nativewind">https:&#x2F;&#x2F;github.com&#x2F;nativewind&#x2F;nativewind</a>
[3] <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=3UEQhdaWwus" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=3UEQhdaWwus</a>
[4] <a href="https:&#x2F;&#x2F;github.com&#x2F;mrzachnugent&#x2F;react-native-reusables">https:&#x2F;&#x2F;github.com&#x2F;mrzachnugent&#x2F;react-native-reusables</a>
[5] <a href="https:&#x2F;&#x2F;github.com&#x2F;roninoss&#x2F;rn-primitives">https:&#x2F;&#x2F;github.com&#x2F;roninoss&#x2F;rn-primitives</a>

Show HN: NativeWindUI – Native Feeling TailwindUI for React Native

React Native: New Architecture is here

React Native, and "The Native Feel"

Shopify App Is Fully Migrated to React Native

Flutter vs React Native: Performance Benchmarks

React Native: The New Architecture Is Here

React Native 0.76 – New Architecture by Default, React Native DevTools, and More

For over two years now I have been developing mobile applications as side projects, and one pain point I have always had is finding a good standard for my projects that could be replicated across almost all of them and that would give me the ability to launch them quickly so I could test different project ideas. With this in mind, I developed a product that solves this problem.The project is called LaunchYourApp, It is a boilerplate in react native, with a complete authentication system including social authentication like apple and google, it also contains several ready-made components to facilitate development in react native, in addition I also added AI, so it contains a ready-made chat in the boilerplate integrated with open ai and also a chat for generating images using Dall-E!I know there are a lot of developers and very good technical people here, so I would really like to hear your feedback! :)

Show HN: LaunchYourApp – A React Native Boilerplate with AI

Wanted: Resources on React Three Fiber on React Native

Reverse Engineering and Instrumenting React Native Apps

Early thoughts on React Native/Expo decision

How to build and deploy your React Native application using GitHub Actions

Hyperview: Server-driven mobile apps with React Native

Hey HN,A problem i always have when building mobile applications is with &quot;box shadows&quot;, that&#x27;s why i build a free tool that generates shadows for both platforms, iOS and Android!You can also see a preview of the shadow before copying the code :)I Would love to hear your feedback and what you think can be improved!

Show HN: I Built a Free React Native Shadow Generator

Migrating the Shopify mobile app to React Native

React Native Godot

Choosing between Flutter and React Native in 2024

Heresy: Inspect and Instrument React Native Applications at Runtime

Gluestack-UI v2: React and React Native Components and Patterns (NativeWind)

Pre-Built iOS Binaries: React Native Dev Start Time from Minutes to Seconds

# This is a Expo Framework

Expo is a framework and a platform for universal React Applications. 
It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy,
and quickly iterate on iOS, Android, and web Apps from the same JavaScript/TypeScript codebase.

# Requirements

- Node.js LTS release or greater
- Git
- Watchman for macOS users

# Recommended Tools

- VSCode Editor
- Yarn
- Windows users: PowerShell or Bash via WS

# Installing Expo CLI

```bash
 # install the command line tools
 npm install --global expo-cli
```

## Getting Started 

Create a new app:
At this point we should have Expo CLI installed on our development machine and the Expo Go App on an iOS or Android physical device or emulator.
If not, go back to the Installation guide before proceeding.

# Initializing the project

```bash
# Create a project named my-app.
# Select the "blank" templata when promped
expo init my-app

# Navigate to the project directory
cd my-app
```

First, run the development server:

```bash
expo start
# or
npm start
```

... More content comming soon ...

Create Expo App ReactNative

ReactNative News

News From: hn.algolia.com