ImageRef
Similar to the Facebook React Native Image component, but refers directly to a CYIImageView C++ pointer.
Similar to Facebook React Native’s Image, a network URL can be specified using the URI key in the source property.
Unlike Facebook React Native’s Image, rather than using the required syntax to get local images, you must use the res protocol with a path local to the assets folder.
For example, to refer to images in the Assets folder, use the following:
<ImageRef name="MyImageLayer" source={{uri: "res://drawable/default/MyImage.png"}} />
.
Remember the following points when you use ImageRef:
- The props in this topic are a subset of the props that the Facebook React Native Image component supports.
- These props only work with You.i React Native and the After Effects workflow.
- Payload for each callback/prop is empty, unless specified otherwise.
- The properties set in After Effects for ImageRef are the default values for its props.
Example Usage
import React, { Component } from 'react';
import { Composition, ImageRef } from '@youi/react-native-youi';
export default class ImageRefComponent extends Component {
render() {
return (
<Composition source="RefComponents">
<ImageRef
name="Image-2x3"
source={{ uri: 'https://via.placeholder.com/720x405/fa8072?text=ImageRef' }}
onLoad={() => doSomething() } /* The uri defined in the source prop loaded and is now displaying. */
onCompositionDidLoad={(ref) => this.refToImage = ref } /* The parent Composition loaded and the ImageRef is now attached. */
/>
<Composition>
);
}
}
Props
-
resizeMode: enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)
-
onTimelinesLoaded: object (deprecated)
Reference
Prop: name
After Effects layer name
| Type | Required |
|---|---|
| String | Yes |
Prop: style
Similar to style prop of Facebook React Native image component.
-
resizeMode: Object.keys(ImageResizeMode)
Prop: onLoad
Similar to onLoad prop of Facebook React Native image component.
Prop: onCompositionDidLoad
Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.
Prop: onLoadEnd
Similar to onLoadEnd prop of Facebook React Native image component.
Prop: onLoadStart
Similar to onLoadStart prop of Facebook React Native image component.
Prop: resizeMode
Similar to resizeMode prop of Facebook React Native image component.
The following combinations in After Effects will result in the respective resizeMode value:
| After Effects Properties | React Native Prop | REPEAT_MODE | SCALE_MODE | resizeMode |
|---|---|---|---|---|
| REPEAT_NONE | SCALE_ACTUAL_SIZE | center | ||
| REPEAT_NONE | SCALE_FILL | cover | ||
| REPEAT_NONE | SCALE_STRETCH | stretch | ||
| REPEAT_NONE | SCALE_FIT | contain | ||
| REPEAT_TILE | SCALE_ACTUAL_SIZE | repeat | ||
| Not Specified | Not Specified | cover (as default) |
Prop: source
Similar to the source prop of Facebook React Native’s image component.
Source URI arrays containing multiple values are unsupported. When a source URI array with multiple values is provided, the first URI of the first entry is used.
A placeholder image is displayed in two situations:
- while the image is loading
- if the image source is null
The tintColor, if defined, is also applied to the placeholder image.
Prop: onError
Similar to onError prop of Facebook React Native image component.
Prop: focusable
Determines whether the component should be focusable or not.
Default is true.
| Type | Required |
|---|---|
| bool | No |
Prop: visible
Determines whether the component should be visible or not.
Default is true.
Note the following:
- Component visibility is different from component opacity.
- Components that are not visible are not focusable.
| Type | Required |
|---|---|
| bool | No |
Prop: onTimelinesLoaded
Deprecated Invoked when all the timelines of the Composition or Ref component are loaded. Provides an object of names (strings) to Ref components.
| Type | Required |
|---|---|
| object | No |
Prop: testID
Similar to testID prop of Facebook React Native image component.
Prop: tintColor
Similar to tintColor of Facebook React Native image style props.
Prop: accessible
When true, this property indicates that the view is an accessibility element.
The default is false.
| Type | Required |
|---|---|
| bool | No |
Similar to React Native’s accessible property.
Prop: accessibilityLabel
The screen reader reads this string when a user selects the associated element. Setting a value for this prop allows users to know what element they’ve selected.
| Type | Required |
|---|---|
| string | No |
Similar to React Native’s accessibilityLabel property.