wwwwwwwwwwwwwwwwwww

Image

React Native Web Image + Tamagui style props.

 
import { Image } from '@tamagui/webnative-image'



export function WebNativeImageDemo() {

  return <Image src="https://picsum.photos/200/300" width={200} height={300} />

}

Features

  • Web compatible.

  • Supports SSR.

  • Works on native and web.

  • No react-native-web depedency

  • Super light

Installation

Image is already installed in tamagui, or you can install it independently:

 
yarn @tamagui/webnative-image

Usage

 
export default () => (

  <Image
    src='https://...'
    width={300}
    height={400}
  />

)

API Reference

Image

Tamagui props + Web img props  + React Native Image props .

All web img  props are supported on web, and all native Image  props are supported on native. on native we are still using web img APIs, but not all web img props are supported. like decoding

Some common props

Props

  • src (required)

    string

    The image URL.

  • alt

    string

    mandatory and incredibly useful for accessibility

  • objectFit

    CSS.ObjectFit

    sets how the content of image is resized to fit its container. it's alternative to resizeMode prop

  • unstyled

    boolean

    When true will remove all default styles

  • onLoad

    function

    Callback when image is loaded

  • onError

    function

    Callback when image fails to load

    • Previous

    Card

    Next

    Image

    Edit this page on GitHub.