Older versions (leaves this page)
React Native RN C++ C++

ViewRef

ViewRef is similar to the Facebook React Native View component and the CYISceneNode pointer from C++. It doesn’t have a particular type, so can be used to reference any layer from After Effects. Its primary use is for disambiguating the search path when trying to find a more useful node.

Example usage

import { ViewRef } from '@youi/react-native-youi';
...
<ViewRef
   name={this.props.container}
   key={this.props.container}
/>

import React, { Component } from 'react';
import { Composition, ViewRef } from '@youi/react-native-youi';

export default class ViewRefComponent extends Component {
  render() {
 return (
   <Composition source="RefComponents">
  {/* ViewRefs are useful to target a specific child component */}
  <ViewRef name="View">
  <ViewRef name="Text"/>
  </ViewRef>

  {/* Will match the same Text field above */}
  <ViewRef name="Text"/>

  {/* Valid, any Ref is a ViewRef but props won't work */}
  <ViewRef name="Btn-Small" text="Won't Show"/>
   </Composition>
 );
  }
}

Props

Style Props

Reference

Prop: name

After Effects layer name

Type Required
String Yes

Prop: key

A special string attribute required when creating lists of elements. For details, see Lists and Keys.

Type Required
element identifier 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: focusable

Determines whether the component should be focusable or not. Default is true.

Type Required
bool No

Prop: onAccessibilityAction

This function handles action requests such as a magicTap, escape, or activate.

Similar to React Native’s onAccessibilityAction property.

Prop: onAccessibilityEscape

This is the method callback for the escape (a two finger “Z” shaped gesture) accessibilityAction. This is supported on iOS only.

Similar to React Native’s onAccessibilityEscape property.

Prop: onAccessibilityTap

This is the method callback for the activate (a double tap) accessibilityAction. This method is supported on Android, iOS, and tvOS.

Similar to React Native’s onAccessibilityTap property.

Prop: onCompositionDidLoad

Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.

Prop: onMagicTap

This function is the callback method for the magicTap (a double tap with two fingers) gesture. This method is supported only on iOS.

Similar to React Native’s onMagicTap property.

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 View component.

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: accessibilityActions

Allows assistive technology to programmatically invoke the actions of a component.

Components must define a list of supported actions and implement an onAccessibilityAction function to handle action requests.

Name Type Required
name string Yes
label string No

The following table lists the actions supported for the accessibilityActions prop, as well as the method callback and platform support for each action.

Action Method Callback Platform Support
activate onAccessibilityTap Android, iOS, tvOS
decrement onAccessibilityAction Android, iOS
escape onAccessibilityEscape iOS
increment onAccessibilityAction Android, iOS
magicTap onMagicTap iOS

For more information, see Accessibility and React Native’s accessibilityActions.

Prop: accessibilityHint

A string that is read to help users understand what will happen when they perform an action on an accessibility element.

Type Required
string No

This prop is similar to React Native’s accessibilityHint 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.

Prop: accessibilityRole

Communicates the purpose of a component to the user, such as “button”, “checkbox”, “image”, or “link”.

Type Required
array No

Similar to React Native’s accessibilityRole property.

Prop: accessibilityStates

Describes the current state of a component to the user, such as “checked” or “expanded”.

Type Required
object No

Similar to React Native’s accessibilityState property.

Prop: backgroundColor

Similar to backgroundColor prop of Facebook React Native View component.

If you set backgroundColor in the After Effects properties panel for a decorated container, it will be the default value for the backgroundColor prop.

Prop: borderRadius

Similar to borderRadius prop of Facebook React Native View component.

If you set the top-left border radius in the After Effects properties panel for a decorated container, it will be the default value for the borderRadius prop.