Image

Image displays images and textures. Maps to UI Toolkit's Image element.

Import

import { Image } from "onejs-react"

Basic Usage

<Image src="images/logo.png" style={{ width: 100, height: 100 }} />

Props

Prop	Type	Default	Description
`src`	`string`		Path to the image asset
`scaleMode`	`"stretch-to-fill"`, `"scale-and-crop"`, `"scale-to-fit"`	`"scale-to-fit"`	How the image scales
`style`	`ViewStyle`		Inline styles
`className`	`string`		USS class name(s)

Scale Modes

// Scale to fit (maintain aspect ratio, show entire image)
<Image src="images/photo.png" scaleMode="scale-to-fit" />

// Scale and crop (maintain aspect ratio, fill container)
<Image src="images/photo.png" scaleMode="scale-and-crop" />

// Stretch to fill (ignore aspect ratio)
<Image src="images/photo.png" scaleMode="stretch-to-fill" />

Loading Images with Asset System

For proper asset loading in both Editor and builds:

import { useState, useEffect } from "react"
import { loadImage } from "onejs-unity/assets"

function Avatar({ userId }) {
    const [texture, setTexture] = useState(null)

    useEffect(() => {
        const tex = loadImage(`avatars/${userId}.png`)
        setTexture(tex)
    }, [userId])

    return (
        <View style={{
            width: 64,
            height: 64,
            borderRadius: 32,
            overflow: "hidden",
            backgroundImage: texture,
        }}>
            {!texture && <Label text="..." />}
        </View>
    )
}

Background Images

You can also use images as backgrounds via the style prop:

import { loadImage } from "onejs-unity/assets"

function Card() {
    const [bg, setBg] = useState(null)

    useEffect(() => {
        setBg(loadImage("images/card-bg.png"))
    }, [])

    return (
        <View style={{
            backgroundImage: bg,
            width: 300,
            height: 200,
            padding: 20,
        }}>
            <Label text="Card Content" style={{ color: "#fff" }} />
        </View>
    )
}

Image Gallery

function ImageGallery({ images }) {
    return (
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
            {images.map((src, i) => (
                <Image
                    key={i}
                    src={src}
                    style={{
                        width: 150,
                        height: 150,
                        marginRight: 10,
                        marginBottom: 10,
                        borderRadius: 8,
                    }}
                    scaleMode="scale-and-crop"
                />
            ))}
        </View>
    )
}

Placeholder Pattern

function ImageWithPlaceholder({ src, width, height }) {
    const [loaded, setLoaded] = useState(false)
    const [texture, setTexture] = useState(null)

    useEffect(() => {
        const tex = loadImage(src)
        setTexture(tex)
        setLoaded(true)
    }, [src])

    return (
        <View style={{ width, height, backgroundColor: "#333" }}>
            {loaded ? (
                <View style={{ backgroundImage: texture, width: "100%", height: "100%" }} />
            ) : (
                <View style={{
                    width: "100%",
                    height: "100%",
                    justifyContent: "center",
                    alignItems: "center",
                }}>
                    <Label text="Loading..." style={{ color: "#666" }} />
                </View>
            )}
        </View>
    )
}

GPU Compute Textures

Images can display RenderTextures from GPU compute:

import { compute } from "onejs-unity"

function ComputeVisualization() {
    const [renderTexture, setRenderTexture] = useState(null)

    useEffect(() => {
        const rt = compute.renderTexture({ width: 256, height: 256 })
        setRenderTexture(rt)

        // Run compute shader that writes to rt
        // ...

        return () => rt.dispose()
    }, [])

    return (
        <View style={{
            backgroundImage: renderTexture,
            width: 256,
            height: 256,
        }} />
    )
}