Expo UI Kit Test

Cross-platform UI kit for Expo/React Native with responsive breakpoints and components.

Installation

npm install expo-ui-kit-test

Usage

useBreakpoints Hook

import { useBreakpoints } from 'expo-ui-kit-test';

export default function MyComponent() {
  const breakpoints = useBreakpoints();

  return (
    <View style={{
      padding: breakpoints.isMd ? 20 : 10,
      flexDirection: breakpoints.isLg ? 'row' : 'column'
    }}>
      <Text>Responsive layout!</Text>
    </View>
  );
}

Button Component

import { Button } from 'expo-ui-kit-test';

export default function MyScreen() {
  return (
    <Button
      title="Click me"
      onPress={() => console.log('Pressed!')}
      variant="primary"
    />
  );
}

Blur Component

import { Blur } from 'expo-ui-kit-test';

export default function MyScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Image 
        source={{ uri: 'your-background-image.jpg' }} 
        style={StyleSheet.absoluteFill} 
      />

      <Blur
        intensity={70}
        tint="light"
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          padding: 20,
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
        }}
      >
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
          Content over blur effect
        </Text>
        <Text>This content appears on top of the blur background</Text>
      </Blur>
    </View>
  );
}