native-stylex/README.md

NativeStyleX is a utility-first CSS framework for React Native. It enables fast and responsive styling using predefined utility classes without writing custom styles.

# NativeStyleX

NativeStyleX is a utility-first CSS framework for React Native. It enables fast and responsive styling using predefined utility classes without writing custom styles.

**Support Team 🤵**
If you face any issues or need support, join our Telegram group and drop you issues or feedbacks: [NativeStyleX Support](https://telegram.me/nativestylex).

**📢 Our official documentation website is coming soon! Stay tuned! 🚀**

**New Classes Added Dimension Width & Height OR Elevation (Shadow)**


## 🚀 Features

- 📌 Utility-first styling for React Native
- 🎨 Predefined styles for colors, spacing, typography, flexbox, and more
- 🔥 Supports dynamic class generation
- ⚡ IntelliSense support for auto-suggestions

## 📦 Installation

```sh
npm install native-stylex
```

or

```sh
yarn add native-stylex
```

## 🛠 Usage

Import `useNativeStyleX` and apply styles using predefined class names:

```tsx
import { useNativeStyleX} from 'native-stylex';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={useNativeStyleX(['p-3', 'bg-primary', 'h-20'])}> // now you can use native instead of `useNativeStyleX`
      <Text style={useNativeStyleX(['text-white', 'font-sm'])}>Hello, NativeStyleX!</Text>
    </View>
  );
};

export default App;
```


## 📌 Usages Custom Classes Inside Existing Style
Use custom classes inside existing style, use the following format:

```tsx

// 1st inside `Curly braces {}`
<Text style={{backgroundColor:'#ff0000', ...useNativeStyleX(['text-white', 'font-sm'])}}>Hello, NativeStyleX!</Text>

// 2nd inside `Square Brackets []` with you existing style `bgTheme`
<Text style={[bgTheme, useNativeStyleX(['bg-[#089dca]', 'rounded-md', 'p-3'])]}>Hello, NativeStyleX!</Text>

```

## 📌 Dynamic Custom Classes
For dynamic font sizes, colors, width any other styles, use the following format:

```tsx
useNativeStyleX(['font-[20]', 'bg-[#ff0000]', 'w-[50%]']);
```


## 📢 Native StyleX IntelliSense Extension

`NativeStyleX` provides IntelliSense support for better developer experience:

Auto-suggestions for all predefined classes e.g. text-* and bg-* classes

Error highlighting for incorrect class formats

Ensure you have the `NativeStyleX IntelliSense extension` installed in your `VS Code` for enhanced auto-completion and validation.

### ⚠️ **Warning:**  
For custom classes, **do not use "px" inside the array `[]`**. If you need to apply a percentage value, use `%`. For pixel values, enter the number directly.  

✅ **Correct:**  
- `font-[20]` (Pixels)  
- `w-[50%]` (Percentage)  

❌ **Incorrect:**  
- `font-[20px]` (❌ Don't use "px" inside brackets)  
- `w-[50]` (❌ Missing `%` for percentage values)


# Font Family Usage in NativeStyleX

## Using Dynamic (Custom) Font Families
To use a custom font family, you can apply it dynamically using the `font-[family-name]` syntax:

```tsx
<Text style={useNativeStyleX(['font-[Poppins]'])}>This is Poppins font</Text>
```

### ⚠️ Important Notes
- Ensure the custom font is properly linked in your React Native project.
- The font name should match exactly as defined in your assets or system.
- If the font is missing, the default system font will be used.

## Example with Multiple Styles
```tsx
<Text style={useNativeStyleX(['font-[Lobster]', 'text-lg', 'text-primary'])}>
  Custom Font Example
</Text>
```


## 🎨 Example Of Classes

### ✅ Text Colors
```
text-primary, text-secondary, text-white, text-black, text-red-500, text-green-500, ...
```

### ✅ Background Colors
```
bg-primary, bg-secondary, bg-white, bg-black, bg-red-500, bg-green-500, ...
```

### ✅ Font Sizes 
```
'font-vs', 'font-sm', 'font-md', 'font-lg', 'font-xl', 'font-2xl', 'font-3xl', 'font-4xl', 'font-5xl', 'font-6xl', font-[20px], ...
```

### ✅ Font Weight
```
'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-heavy'
```

### ✅ Text Alignment
```
'text-left', 'text-center', 'text-right', 'text-justify'
```

### ✅ Text Decoration
```
'text-underline', 'text-line-through', 'text-underline-line-through'
```

### ✅ Spacing (Padding & Margin)
```
p-0, p-1, p-2, p-3, p-4, p-5, p-6, p-8, p-10, ...
m-0, m-1, m-2, m-3, m-4, m-5, m-6, m-8, m-10, ...
pl-0, pr-0, pt-0, pb-0, ml-0, mr-0, mt-0, mb-0, ...
```

### ✅ Width & Height
```
w-full, w-auto, w-screen, w-0, w-1, w-2, w-4, w-6, w-8, ...
h-full, h-auto, h-screen, h-0, h-1, h-2, h-4, h-6, h-8, ...
min-w-full, min-w-screen, max-w-full, max-w-screen, ...
min-h-full, min-h-screen, max-h-full, max-h-screen, ...
```

### ✅ Dimension Width & Height (window, screen)
```
w-1/1, w-1/2, w-1/3, w-1/3
h-1/1, h-1/2, h-1/3, h-1/3
```


### ✅ Elevation (Shadow)
```
elevation-2, elevation-4, elevation-6, elevation-8
```


### ✅ Flexbox & Alignment
```
d-flex, flex-1, flex-row, flex-col, justify-start, justify-center, justify-end, align-start, align-center, align-end, ...
```

### ✅ Borders
```
border, border-0, border-2, border-4, border-8, border-solid, border-dashed, border-none, ...
```

### ✅ Border Colors
```
border-primary, border-secondary, border-red-500, border-green-500, border-blue-500, ...
```

### ✅ Positions
```
relative, absolute, fixed, top-0, bottom-0, left-0, right-0, ...
```



**🛠 Developed by 🚀**
NativeStyleX is developed and maintained by FutureDevTech. Visit our official website: [FutureDevTech](https://futureapps.in).

<!-- ## 📢 Contribution
Feel free to contribute by adding new styles or improving the package! -->

<!-- ## 📜 License
ISC License -->