ButtonRef

Similar to the Facebook React Native Button component, but refers directly to a CYIPushButtonView After Effects object.

Example usage

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

export default class ButtonRefComponent extends Component {
  constructor() {
    super();
    this.state = { presses: 0 };
  }

  onPress = () => {
    this.setState({ presses: this.state.presses + 1 });
  }

  render() {
    return (
      <Composition source="RefComponents">
        <ButtonRef name="Btn-Small" title="Push Me" onPress={this.onPress}/>

        <TextRef name="Info" text={`Button pressed ${this.state.presses} times.`}/>
      </Composition>
    );
  }
}

Props

• title: string

• disabled: bool

• visible: bool

• focusable: bool

• onPress: function

• onCompositionDidLoad: function

• onTimelinesLoaded: object (deprecated)

• testID: string

• accessible: bool

• accessibilityLabel: string

Reference

Prop: name

After Effects layer name

Prop: title

Similar to title prop of Facebook React Native button component. On Cloud Solution, both static and dynamic behavior attributes for this component property are supported.

Text to display inside the button

Prop: disabled

Similar to disabled prop of Facebook React Native button component. Default is false. On Cloud Solution, support for dynamic behavior attribute is not currently available.

If true, disable all interactions for this 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: focusable

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

Prop: onPress

Similar to onPress prop of Facebook React Native button component.

Prop: onCompositionDidLoad

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

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.

Prop: testID

Similar to testID prop of Facebook React Native button 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: 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.