UNPKG

expo-ui-kit-test

Version:

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

83 lines (67 loc) 1.64 kB
# Expo UI Kit Test Cross-platform UI kit for Expo/React Native with responsive breakpoints and components. ## Installation ```bash npm install expo-ui-kit-test ``` ## Usage ### useBreakpoints Hook ```tsx 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 ```tsx import { Button } from 'expo-ui-kit-test'; export default function MyScreen() { return ( <Button title="Click me" onPress={() => console.log('Pressed!')} variant="primary" /> ); } ``` ### Blur Component ```tsx 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> ); } ```