Image
Image component.
import { Image } from '@redshank/native';
Examples
Default
Default image element.
Resize Mode
Object Fit mode.
APIs
Image
Api props extends from Image
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element warpper base | Ripple or View |
| ImageComponent | Component | React Component | Change the element of the image base | RNImage |
| children | ReactNode | ReactNode | Accessory as a child for the component | - |
| childrenContainerStyle | StyleProp<ViewStyle> | object | Style object for wrapper children element | - |
| containerStyle | StyleProp<ViewStyle> | object | Style object for container element | - |
| height | number | Number | Height of the image | - |
| placeholderContent | ReactNode | React Element | Placeholder of the image when not find a source prop | - |
| placeholderStyle | StyleProp<ViewStyle> | object | Style object for container element | - |
| source | ImageSourcePropType | absoluteImport string | URI of the picture, can be an import or string | - |
| transition | boolean | true false | Activate animation effect fadeIn | false |
| transitionDuration | number | Number | Transition duration effect | 360ms |
| width | number | Number | Width of the image | - |
| Other Props | any | Other props | Interactive props for element | - |
Base Properties
type BaseProperties = {
onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
onPress?: ((event: GestureResponderEvent) => void) | undefined;
onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
};
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.