@carlosmedina06/ui-native

Introduction

Welcome to UI Native, the best way to build beautiful applications on iOS and Android with React Native and NativeWind.

What is UI Native?

UI Native is an open-source UI component library designed to simplify the creation of modern and stylish mobile applications on iOS and Android. It leverages the power of React Native and NativeWind to provide a smooth and highly customizable development experience.

Why choose UI Native?

• Fast and efficient: Uses Tailwind CSS style optimization to enhance performance.
• Adaptive design: Flexible and customizable components that fit any design.
• Easy to use: Simple and clear syntax, ideal for developers of all levels.
• Compatible with Expo: Fully compatible with Expo for seamless integration.
• Active support: We are committed to improving and maintaining UI Native over time.

🚀 Getting Started

Follow these steps to get started with UI Native in your React Native project with Expo.

1️⃣ Create a New Project with Expo

Before you begin, make sure you have Node.js (version 18 or higher) installed. Then, create a new Expo project by running:

npx create-expo-app my-app
cd my-app

This will set up a new Expo project ready to use.

2️⃣ Install NativeWind and Tailwind CSS

Follow the installation steps for NativeWind according to its official documentation:

As a quick guide, here are the steps to follow:

npm install nativewind tailwindcss@^3.4.17 react-native-reanimated@3.16.2 react-native-safe-area-context

3️⃣ Install UI Native

Install UI Native in your project with the following command:

npm install @carlosmedina06/ui-native

4️⃣ Configure Tailwind CSS and NativeWind

npx tailwindcss init

This will create a tailwind.config.js file in the root of your project. Make sure it has the following configuration, and if not, add it:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Add the paths of your React Native files
    "./App.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
    // Required for UI Native to work with Tailwind CSS for now
    './node_modules/@carlosmedina06/ui-native/**/*.{js,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a global.css file in the root of your project and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

5️⃣ Configure Babel

Open babel.config.js and add the NativeWind plugin:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

6️⃣ Run the Application

Now you can run your application with Expo:

npx expo start

This will open the Expo Developer Tools, allowing you to test your app on a simulator or a real device.

---

Congratulations! 🎉 You now have UI Native running in your project. You can start using its components to build amazing interfaces. 🚀