Image

The Image component is a versatile image display utility that supports both standard images and background images.

Import

Phaselis exports one main component for Image.

import { Image } from "phaselis";

• Image: Main Component import for Image

Usage

Basic Image

import { Image } from "phaselis";

const Example = () => {
  return (
    <Image
      source={{
        uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
      }}
      height={200}
      width={200}
    />
  );
};

export default Example;

Basic Image with Local Image

import { Image } from "phaselis";

const Example = () => {
  return (
    <Image
      source={{ uri: path_to_image }}
      height={200}
      width={200}
    />
  );
};

export default Example;

Background Image

import { Image } from "phaselis";
import { Text } from "react-native";

const Example = () => {
  return (
    <Image
      source={{
        uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
      }}
      background
    >
      <Text
        style={{
          color: "#11295a",
        }}
      >
        Phaselis
      </Text>
    </Image>
  );
};

export default Example;

Props

tip

Props interface extends ImagePropsBase and ImageBackgroundProps so you can pass any prop that a Image or ImageBackground component accepts from React Native.

The properties that can be passed to the Image component include styling, context, and additional parameters for image management.

background

boolean

If true, the image will be displayed as a background image. Otherwise, a standard image is rendered.

<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  height={200}
  width={200}
  background
/>

style

Name	Type	Description
container	ViewStyle	Style for the outer container view.
element	ViewStyle	Style for the image element itself.

Custom styles for the Image component.

// Object with named styles
<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  height={200}
  width={200}
  style={{
    container: { margin: 10 },
    element: { width: 200, height: 200, borderRadius: 100 }
  }}
/>

// Direct element styling
<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  style={{ width: 300, height: 200, borderRadius: 10 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  containerStyle={{ shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 5 }}
/>

variation

string

Determines the visual style variation of the image. Defaults to "default".

<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  variation="rounded"
/>

contextValue

any

Additional context value that can be passed to the image component.

<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  contextValue={{ id: "profile-image" }}
/>

children

ReactNode

React nodes to be rendered inside the background image, if background is true.

import { Button, Form, InputGroup, Textfield } from "phaselis";

<Image
  source={{
    uri: "https://www.protoyazilim.com/phaselis/img/phaselis.png",
  }}
  height={200}
  width={200}
  style={{
    container: { margin: 100 },
  }}
>
  <Form>
    <InputGroup label="User Name">
      <Textfield name="username" rightIcon="User" />
    </InputGroup>
    <Button text="Submit" />
    <Button text="Reset" type="reset" />
  </Form>
</Image>