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.

📢 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

npm install native-stylex

or

yarn add native-stylex

🛠 Usage

Import useNativeStyleX and apply styles using predefined class names:

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:

// 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:

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:

<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

<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.