TextInputRef

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

Example usage

import { TextInputRef } from '@youi/react-native-youi';
...
<TextInputRef
   name="StandardInput"
   secureTextEntry={false}
   onChangeText={(t) => {console.log("OnChangeText called.")}}
   onChange={() => console.log("OnChange called.")}
   onFocus={() => console.log("onFocus called.")}
   onEndEditing={() => console.log("onEndEditing called.")}
   onSubmitEditing={() => console.log("onSubmitEditing called.")}
   defaultValue={'Default Value'}
/>
import React, { Component } from 'react';
import { Composition, TextInputRef, TextRef } from '@youi/react-native-youi';

export default class TextInputRefComponent extends Component {
  textInputRef = React.createRef();

  state = { infoText: 'Enter Text in the TextInput' };

  onChangeText = text => {
    this.setState({ infoText: text });
  }

  componentDidMount()  {
    this.textInputRef.current.activate();
  }

  render() {
    return (
      <Composition source="RefComponents">
        <TextInputRef
          name="TextInput"
          secureTextEntry={false}
          onChangeText={this.onChangeText}
          ref={this.textInputRef}
        />

        <TextRef name="Info" text={this.state.infoText} />
      </Composition>
    );
  }
}

Props

Methods


Reference

Prop: autoCorrect

Similar to autoCorrect prop of the Facebook React Native TextInput component.

Supported only for Android Touch and iOS. Note that device settings for autocorrect may override the autoCorrect prop setting.


Prop: name

After Effects layer name

Type Required
String Yes

Prop: placeholderTextColor

Similar to placeholderTextColor prop of Facebook React Native TextInput component.


Prop: backgroundColor

Adds a background color to the component.


Prop: caretHidden

Similar to caretHidden prop of Facebook React Native TextInput component.


Prop: clearButtonMode

Similar to clearButtonMode prop of Facebook React Native TextInput component.

Here’s the full list of modes for the clearButtonMode prop:

  • never - The clear button never appears. This is the default setting, so if this prop isn’t defined or is given a null value, the clear button will never appear.
  • while-editing - The clear button appears only when there’s text in the text input and the component is currently activated.
  • unless-editing - The clear button appears when there’s text in the text input and the component is not currently activated.
  • always - The clear button appears when there’s text in the text input.

If you use the clear button in TextInputRef, we recommend that you format the backing Password Text Edit composition as shown in Text Input Clear Button.


Prop: clearTextOnFocus

Similar to clearTextOnFocus prop of Facebook React Native TextInput component.


Prop: defaultValue

Similar to defaultValue prop of Facebook React Native TextInput component.


Prop: editable

Similar to editable prop of Facebook React Native TextInput component.


Prop: inputAccessoryViewID

The InputAccessoryViewID should match with the InputAccessoryView’s nativeID. When matched, the image in the InputAccessoryView component will be displayed above the onscreen input keyboard.


Prop: keyboardType

Similar to keyboardType prop of Facebook React Native TextInput component.


Prop: onActivate

Invoked when the TextInputRef is activated.


Prop: onChange

Similar to onChange prop of Facebook React Native TextInput component.

It is called with {text: currentTextDescription}. onKeyPress must be called before onChange.


Prop: onChangeText

Similar to onChangeText prop of Facebook React Native TextInput component.


Prop: onDeactivate

Invoked when the TextInputRef is deactivated.


Prop: onEndEditing

Similar to onEndEditing prop of Facebook React Native TextInput component.


Prop: onCompositionDidLoad

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


Prop: onFocus

Similar to onFocus prop of Facebook React Native TextInput component.


Prop: onBlur

Similar to onBlur prop of Facebook React Native TextInput component.


Prop: onKeyPress

Similar to onKeyPress prop of Facebook React Native TextInput component.

This is called with {key : keyValue}.


Prop: onSubmitEditing

Similar to onSubmitEditing prop of Facebook React Native TextInput component.


Prop: placeholder

Similar to placeholder prop of Facebook React Native TextInput component.


Prop: returnKeyType

Similar to returnKeyType prop of Facebook React Native TextInput component.


Prop: secureTextEntry

Similar to secureTextEntry prop of Facebook React Native TextInput component.

Note As with the Facebook React Native component TextInput, secureTextEntry defaults to false.


Prop: maxLength

Similar to maxLength prop of Facebook React Native TextInput component.


Prop: style

Type Required
style No
  • color: color

  • fontFamily: string

    Name of .ttf file in youi/AE/asset; for example, yi_Arial-Bold.ttf. Note You can also use the font registry to specify the font family.

  • fontSize: number


Prop: value

Similar to value prop of Facebook React Native TextInput 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.
Type Required
bool No

Prop: focusable

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

Type Required
bool No

Prop: testID

A unique identifier for this element to be used in UI automation testing scripts.

Type Required
string No

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.


Method: clear()

Similar to clear() method of Facebook React Native TextInput component.


Method: activate()

activate()

Applies focus to the text input and activates the keyboard.


Method: deactivate()

deactivate()

Removes focus from the text input and hides the keyboard.