@evlop/native-components

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