React-native-uikit-colors NPM

React Native UIKit Colors

A cross-platform color system for React Native and React Native Web that provides iOS-style semantic colors with dark mode support. Seamlessly integrates with NativeWind/TailwindCSS.

Features

🎨 iOS-style semantic colors that automatically adapt to light/dark mode
🌐 Cross-platform support (iOS, Android, Web)
🔄 Dynamic color updates when system theme changes
🎯 TypeScript support
🌊 NativeWind/TailwindCSS integration

Installation

npm install react-native-uikit-colors
# or
yarn add react-native-uikit-colors

Setup

1. Configure TailwindCSS

Update your tailwind.config.js:

import { withUIKit } from 'react-native-uikit-colors/tailwind'

export default withUIKit({
  // your existing tailwind config
})

2. For Expo Web Support (Optional)

If you're using React Native Web, add the CSS injection hook to your components:

'use dom'

import { useCSSInjection } from 'react-native-uikit-colors/web'

function App() {
  useCSSInjection()
  return <YourApp />
}

3. Inject TailwindCSS Colors

const RootProviders = ({ children }: { children: ReactNode }) => {
  useColorScheme() // Observe color scheme changes
  const currentThemeColors = getCurrentColors()!

  return <View style={[styles.flex, currentThemeColors]}>{children}</View>
}

// Your App Entry Component

export const App = () => {
  return <RootProviders>
    <YourApp />
  </RootProviders>
}

Usage

1. Using with NativeWind/TailwindCSS

Use semantic color classes directly in your components:

function MyComponent() {
  return (
    <View className="bg-system-background">
      <Text className="text-secondary-label text-sm">Hello World</Text>
    </View>
  )
}

2. Using with React Native's StyleSheet

Use the useColor hook to get dynamic colors:

import { useColor } from 'react-native-uikit-colors'

function MyComponent() {
  const systemFill = useColor('systemFill')
  const secondarySystemBackground = useColor('secondarySystemBackground')

  // Works with Reanimated
  const colorStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        pressed.value,
        [0, 1],
        [secondarySystemBackground, systemFill],
      ),
    }
  })

  return <Animated.View style={colorStyle} />
}