Reference
Components
ZEROCODE generates React Native components that follow best practices and modern design patterns. Explore the component library below.
Categories
Layout
Container, Flex, Grid, and spacing components.
ViewScrollViewSafeAreaViewFlatList
Navigation
Stack, Tab, and Drawer navigation patterns.
Stack NavigatorTab NavigatorDrawerHeader
Forms
Input fields, buttons, and form controls.
TextInputButtonCheckboxSwitch
Data Display
Cards, lists, tables, and data visualization.
CardAvatarBadgeProgress
Popular Components
Button
Interactive button with variants
Card
Content container with styling
TextInput
Text input with validation
Modal
Overlay dialog component
Toast
Notification messages
Avatar
User profile images
Example Usage
Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary';
}
export function Button({ title, onPress, variant = 'primary' }: ButtonProps) {
return (
<TouchableOpacity
style={[styles.button, variant === 'secondary' && styles.secondary]}
onPress={onPress}
>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
button: {
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 8,
backgroundColor: '#6366f1',
},
secondary: {
backgroundColor: '#27272a',
},
text: {
fontSize: 16,
fontWeight: '600',
color: '#ffffff',
},
});Component Best Practices
- •Keep components small and focused on a single responsibility
- •Use TypeScript interfaces for type-safe props
- •Follow the React Native StyleSheet pattern for styles
- •Make components reusable with sensible default props