Native Components

A collection of React Native components with styled-system integration for building beautiful, consistent UI. These components are designed for use with AI-powered code generation tools.

Installation

npm install @evlop/native-components

Quick Start

import { Box, Flexbox, Text, Icon, Button, Actionable, Image, ImageBackground, Swiper, triggerHapticFeedback } from 'types-for-ai';

Components & Use Cases

📦 Box

A styled View component with support for layout, spacing, borders, colors, and positioning.

// Basic container
<Box padding={16} backgroundColor="white" borderRadius={8}>
  <Text>Content</Text>
</Box>

// Card with shadow effect
<Box 
  margin={16}
  padding={20}
  backgroundColor="white"
  borderRadius={12}
  borderWidth={1}
  borderColor="gray-200"
>
  <Text>Card Content</Text>
</Box>

// Absolute positioned overlay
<Box position="absolute" top={0} left={0} right={0} bottom={0} opacity={0.5} backgroundColor="black" />

Props: All React Native ViewProps + flexbox, border, layout, color, background, space, opacity, position

🧩 Flexbox

A flexbox container with default flexDirection: 'row' and gap support.

// Horizontal row with items
<Flexbox flexDirection="row" justifyContent="space-between" alignItems="center" gap={12}>
  <Icon icon="home" />
  <Text>Home</Text>
</Flexbox>

// Vertical stack
<Flexbox flexDirection="column" gap={8} padding={16}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Flexbox>

// Grid-like layout
<Flexbox flexWrap="wrap" gap={16} rowGap={8} columnGap={12}>
  {items.map(item => <Box key={item.id} width="48%">{item.name}</Box>)}
</Flexbox>

Props: All Box props + gap, rowGap, columnGap

✏️ Text

A styled text component with typography support, theme variants, and template rendering.

// Basic text
<Text color="gray-900" fontSize={16}>Hello World</Text>

// Styled heading
<Text fontWeight="Bold" fontSize={24} color="primary">
  Welcome Back!
</Text>

// Using theme variants
<Text variant="heading">Heading Text</Text>
<Text variant="body">Body text content</Text>

// Font scaling (relative to base font size)
<Text fontScale={1.5}>Larger Text</Text>

// Dynamic template content (supports handlebars)
<Text content="Hello, {{user.name}}!" />

Props: color, fontSize, fontWeight, fontScale, textAlign, variant, content + standard TextProps

🎨 Icon

Display icons from various icon libraries with RTL support.

// Basic icon
<Icon icon="home" size={24} color="primary" />

// Different sizes
<Icon icon="settings" size={32} color="gray-600" />

// With press handler
<Icon icon="close" onPress={() => navigation.goBack()} />

// RTL flip support (for directional icons like arrows)
<Icon icon="arrow-right" flipOnRTL />

// Supported icon libraries:
// - material-icons
// - material-community-icons
// - font-awesome-6
// - ionicons
// - simple-line-icons
// - evilicons
// - octicons
// - svg (custom SVG URLs)

Props: icon, size, color, flipOnRTL, onPress

🔘 Button

A styled button with multiple variants, sizes, loading states, and icon support.

// Filled button (default)
<Button label="Get Started" color="primary" action={myAction} />

// Outlined button
<Button label="Learn More" variant="outlined" color="secondary" />

// Ghost button (no background)
<Button label="Cancel" variant="ghost" color="gray-600" />

// Dim outlined (subtle border)
<Button label="Optional" variant="dim-outlined" color="primary" />

// Dim filled outlined (subtle background + border)
<Button label="Soft CTA" variant="dim-filled-outlined" color="primary" />

// With icon
<Button label="Add Item" icon="plus" iconPosition="left" color="primary" />
<Button label="Next" icon="arrow-right" iconPosition="right" />

// Different sizes
<Button label="Small" size="sm" />
<Button label="Medium" size="md" />
<Button label="Large" size="lg" />
<Button label="Extra Large" size="xl" />
<Button label="2X Large" size="2xl" />

// Loading state
<Button label="Submitting..." loading={true} />

// Disabled state
<Button label="Unavailable" disabled={true} />

Variants: filled, outlined, dim-outlined, dim-filled-outlined, ghost
Sizes: sm, md, lg, xl, 2xl
Props: label, variant, size, color, textColor, icon, iconPosition, loading, disabled, action

👆 Actionable

A pressable wrapper with press effects and haptic feedback support.

// Basic actionable area
<Actionable action={navigateAction}>
  <Text>Tap me</Text>
</Actionable>

// With scale press effect
<Actionable action={myAction} pressEffect="scale">
  <Box padding={16}><Text>Press to scale</Text></Box>
</Actionable>

// With opacity press effect
<Actionable pressEffect="opacity" action={myAction}>
  <Image src="card-image.jpg" />
</Actionable>

// With haptic feedback
<Actionable action={myAction} hapticFeedback="impactMedium">
  <Text>Haptic button</Text>
</Actionable>

// Combined effects
<Actionable 
  action={addToCartAction}
  pressEffect="bounce"
  hapticFeedback="impactLight"
>
  <Box backgroundColor="primary" padding={12} borderRadius={8}>
    <Text color="white">Add to Cart</Text>
  </Box>
</Actionable>

Press Effects:

• none - No visual effect
• opacity - Fades on press
• scale - Shrinks slightly on press
• scale-opacity - Combines scale and opacity
• bounce - Bouncy spring effect
• tilt-left / tilt-right - Tilts on press
• pulse - Pulsing animation
• jelly - Elastic jelly effect
• rubberBand - Rubber band stretch effect
• glow - Glowing highlight effect
• press-in - 3D press-in effect
• swing - Swinging rotation

Haptic Types: impactLight, impactMedium, impactHeavy, rigid, soft, notificationSuccess, notificationWarning, notificationError

🖼️ Image

A styled image component with preset sizes and template URL support.

// Basic image
<Image src="https://example.com/image.jpg" />

// Using preset sizes
<Image src="product.jpg" size="md" />
<Image src="avatar.jpg" size="xs" />
<Image src="banner.jpg" size="fluid" />

// Custom dimensions
<Image src="photo.jpg" width={200} height={150} />

// With aspect ratio
<Image src="video-thumb.jpg" aspectRatio={16/9} />

// Resize modes
<Image src="cover.jpg" resizeMode="cover" />
<Image src="contain.jpg" resizeMode="contain" />

// With placeholder fallback
<Image src="{{product.image}}" placeholder="default-product.jpg" />

// Dynamic URL with template
<Image src="{{baseUrl}}/images/{{product.id}}.jpg" />

Preset Sizes: 3xs (15px), 2xs (35px), xs (50px), sm (75px), md (150px), lg (275px), xl (300px), 2xl (400px), 3xl (480px), fluid (100%)

Props: src, placeholder, size, width, height, aspectRatio, resizeMode

🖼️ ImageBackground

An image that can contain child elements, perfect for hero sections and cards.

// Hero section
<ImageBackground 
  src="hero-bg.jpg" 
  height={300}
  justifyContent="center"
  alignItems="center"
>
  <Text color="white" fontSize={32} fontWeight="Bold">
    Welcome
  </Text>
</ImageBackground>

// Card with background
<ImageBackground 
  src="{{product.coverImage}}"
  aspectRatio={16/9}
  borderRadius={12}
  overflow="hidden"
>
  <Box position="absolute" bottom={0} left={0} right={0} padding={16} backgroundColor="rgba(0,0,0,0.5)">
    <Text color="white">Product Name</Text>
  </Box>
</ImageBackground>

// With template URL and placeholder
<ImageBackground 
  src="{{user.coverPhoto}}"
  placeholder="default-cover.jpg"
  height={200}
>
  {children}
</ImageBackground>

Props: src, placeholder, all Box layout/styling props

🎠 Swiper

A horizontal carousel/slider with multiple pagination styles and autoplay support.

// Basic swiper
<Swiper
  data={slides}
  renderItem={({ item }) => (
    <Image src={item.image} width="100%" aspectRatio={16/9} />
  )}
/>

// With autoplay
<Swiper
  data={banners}
  autoplay
  autoplayInterval={3000}
  renderItem={({ item }) => <BannerCard banner={item} />}
/>

// Different pagination styles
<Swiper data={items} paginationType="dot" />
<Swiper data={items} paginationType="dash" />
<Swiper data={items} paginationType="line" />
<Swiper data={items} paginationType="number" />

// Custom item width
<Swiper
  data={cards}
  itemWidth={280}
  renderItem={({ item }) => <ProductCard product={item} />}
/>

// With index change callback
<Swiper
  data={onboardingScreens}
  onIndexChange={(index) => setCurrentStep(index)}
  renderItem={({ item }) => <OnboardingSlide {...item} />}
/>

// Using ref for programmatic control
const swiperRef = useRef();
<Swiper ref={swiperRef} data={items} />
<Button label="Next" action={() => swiperRef.current.scrollToIndex(2)} />

Pagination Types: dash, dot, line, number
Props: data, renderItem, autoplay, autoplayInterval, paginationType, paginationStyle, itemWidth, onIndexChange

📳 triggerHapticFeedback

A utility function to trigger haptic feedback on supported devices.

import { triggerHapticFeedback } from 'types-for-ai';

// On button press
const handlePress = () => {
  triggerHapticFeedback('impactMedium');
  // ... do something
};

// Success notification
const onSuccess = () => {
  triggerHapticFeedback('notificationSuccess');
};

// Error feedback
const onError = () => {
  triggerHapticFeedback('notificationError');
};

// Light tap feedback
triggerHapticFeedback('impactLight');

// Heavy impact
triggerHapticFeedback('impactHeavy');

Haptic Types:

• impactLight - Light tap
• impactMedium - Medium tap
• impactHeavy - Heavy tap
• rigid - Rigid impact
• soft - Soft impact
• notificationSuccess - Success notification pattern
• notificationWarning - Warning notification pattern
• notificationError - Error notification pattern

Styled System Props Reference

All components support styled-system props:

| Category | Props | |----------|-------| | Space | margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, m, mt, mr, mb, ml, p, pt, pr, pb, pl | | Layout | width, height, minWidth, maxWidth, minHeight, maxHeight, overflow | | Flexbox | flex, flexDirection, flexWrap, justifyContent, alignItems, alignSelf | | Border | border, borderWidth, borderColor, borderRadius, borderTop, borderRight, borderBottom, borderLeft | | Color | color, backgroundColor, bg, opacity | | Position | position, top, right, bottom, left, zIndex | | Typography | fontSize, fontWeight, textAlign, lineHeight, fontFamily |

Theme Integration

Components automatically use theme values from your styled-components ThemeProvider:

const theme = {
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    'gray-100': '#f3f4f6',
    'gray-900': '#111827',
  },
  space: [0, 4, 8, 16, 24, 32, 48, 64],
  fontWeights: {
    Regular: '400',
    Medium: '500',
    Bold: '700',
  },
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

License

MIT