TextRef

Similar to the Facebook React Native Text component and the JSX equivalent to aCYITextSceneNode pointer from C++. Unlike Facebook React Native’s Text, TextRef requires you to set your text as a prop.

Usage Examples

Example Usage 1: Text vs TextRef

<Text>Sample Text</Text>
<Composition source="Assets_Text">
   <TextRef name="RefText" text="Sample Text" />
</Composition>

TextRef also has limited support for styling. These styles override the information coming from After Effects.

Example Usage 2: Styling a TextRef from JSX

<TextRef name="RefText" text="My ref text" style={{
   color: 'red',
   textAlign: 'center',
}}/>

Example Usage 3: Using a TextRef

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

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

        {/* Will match the same TextRef above */}
        <TextRef name="Info" text="No Need to select the parent ViewRef if the name is non-ambiguous"/>
      </Composition>
    );
  }
}

Props

• name: string

• text: string

• style: style

• ellipsizeMode: enum(‘head’, ‘middle’, ‘tail’, or ‘clip’)

• numberOfLines: number

• visible: boolean

• onCompositionDidLoad: function

• testID: string

• tracking: number

• kerning: number

• adjustsFontSizeToFit: boolean

• minimumFontScale: number

• accessible: bool

• accessibilityHint: string

• accessibilityLabel: string

Methods

• isTruncated: Object

Reference

Prop: name

After Effects layer name

Prop: text

Text to display within this TextRef component.

Prop: style

• color: color

• fontFamily: string

  Note

  You can also use the font registry to specify the font family.

• lineHeight: number

• textAlign: enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)

  Note

  You can also use the font registry to specify the font family.

• textDecorationLine: enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)

  Note

  The line-through text effect is not supported. The value line-through outputs same as none; underline line-through outputs same as underline.

• fontSize: number

  Note

  When fontSize is unset, the font size set in After Effects is applied. When fontSize is set to a value less than or equal to zero, the default size of 14 is used.

Prop: ellipsizeMode

Similar to ellipsizeMode prop of Facebook React Native Text component.

Prop: numberOfLines

Similar to numberOfLines prop of Facebook React Native Text component.

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.

Prop: onCompositionDidLoad

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

Prop: testID

Similar to testID prop of Facebook React Native Text component.

Prop: tracking

Controls the tracking value. A positive tracking value increases the amount of space between letters, while negative value decreases the amount of space. The prop’s unit is iir

Prop: kerning

Controls the kerning value. A positive kerning value increases the amount of space between letters, while a negative value decreases the amount of space.

Prop: adjustsFontSizeToFit

Similar to adjustsFontSizeToFit prop of Facebook React Native Text component.

Prop: minimumFontScale

Similar to minimumFontScale prop of Facebook React Native Text component.

Prop: accessible

When true, this property indicates that the view is an accessibility element. The default is false.

Similar to React Native’s accessible property.

Prop: accessibilityHint

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

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.

Similar to React Native’s accessibilityLabel property.

Method: isTruncated

Returns whether the text was truncated because it didn’t fit into the given space.

<TextRef ref={descriptionRef} />

...

descriptionRef.current.isTruncated((truncated) => {
  console.log("Was the text truncated? " + truncated);
});