Image

Image from React Native works with createComponent like any other component. Define layout and style at module scope, pass source as a prop at usage time.

Basic usage

import { Image } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Avatar = createComponent(Image, {
  width: 64,
  height: 64,
  borderRadius: 32,
});

// source is a required Image prop — pass it at usage time like any other prop
<Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />

With color mode

import { Image } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Thumbnail = createComponent(Image, {
  width: 128,
  height: 128,
  borderRadius: 8,
  _light: { opacity: 1 },
  _dark:  { opacity: 0.85 },
});

<Thumbnail source={require('./assets/photo.png')} resizeMode="cover" />

Platform-specific sizing

import { Image } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const HeroImage = createComponent(Image, {
  width: '100%',
  _ios:     { height: 240 },
  _android: { height: 200 },
  _web:     { height: 320 },
});

<HeroImage source={{ uri: 'https://example.com/hero.jpg' }} resizeMode="cover" />