Quick Start
Build your first glass-native UI in under 5 minutes.
Your first glass component
After installing Reactnatively, create a simple glass card:
screens/HomeScreen.tsx
1import { View, Text } from 'react-native';2import { GlassView } from 'reactnatively';34export function HomeScreen() {5 return (6 <View style={{ flex: 1, backgroundColor: '#060610' }}>7 {/* Frosted glass card */}8 <GlassView9 elevation={2}10 variant="surface"11 borderRadius={20}12 style={{13 margin: 20,14 padding: 20,15 }}16 >17 <Text style={{ color: 'white', fontSize: 18 }}>18 Liquid Glass 🪟19 </Text>20 <Text style={{ color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>21 Adaptive blur, native depth.22 </Text>23 </GlassView>24 </View>25 );26}Adding motion
Use usePressAnimation to add spring-physics press feedback:
components/GlassButton.tsx
1import { Pressable } from 'react-native';2import Animated from 'react-native-reanimated';3import { GlassView, usePressAnimation, SPRING_LIQUID } from 'reactnatively';45export function GlassButton({ onPress, children }) {6 const { animatedStyle, handlers } = usePressAnimation({7 scaleDown: 0.95,8 config: SPRING_LIQUID,9 });1011 return (12 <Pressable onPress={onPress} {...handlers}>13 <Animated.View style={animatedStyle}>14 <GlassView elevation={2} borderRadius={14} style={{ padding: 16 }}>15 {children}16 </GlassView>17 </Animated.View>18 </Pressable>19 );20}Using the theme
Access design tokens via the useTheme hook:
tsx
import { useTheme, useIsDark } from 'reactnatively';
function Component() {
const { colors, spacing, glass } = useTheme();
const isDark = useIsDark();
return (
<View
style={{
backgroundColor: isDark
? colors.background
: colors.backgroundLight,
padding: spacing[4],
}}
/>
);
}