nativeX

React Native / Expo UI component library with NativeWind design tokens.

This repository is both:

• a Storybook/Expo playground for developing components
• a publishable npm package that exposes src/ components and theme tokens

Install

npm install nativex
npx expo install react-native-svg react-native-safe-area-context expo-linking
npm install nativewind [email protected]

The unscoped name nativex is already taken on the public npm registry (an unrelated Cordova plugin). Publish under a scoped name if needed:

npm install @YOUR_NPM_USERNAME/nativex

Consumer setup

NativeWind must see this package's source, and Metro must transform SVG icons.

babel.config.js

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/nativex/src/**/*.{js,jsx,ts,tsx}',
  ],
  presets: [
    require('nativewind/preset'),
    require('nativex/nativewind-preset'),
  ],
};

If you published a scoped package, replace nativex with @YOUR_NPM_USERNAME/nativex in both the content glob and the preset require.

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

config.transformer = {
  ...config.transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
};

config.resolver = {
  ...config.resolver,
  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
  sourceExts: [...config.resolver.sourceExts, 'svg'],
};

module.exports = withNativeWind(config, { input: './global.css' });

Install react-native-svg-transformer in the consuming app, import ./global.css once at the app root, and include:

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

Usage

import { Button, ButtonVariant, InputField, colors } from 'nativex';

<Button label="Save" variant={ButtonVariant.Primary} onPress={() => {}} />

Local Storybook

npm install
npm run storybook