A Text Input component displays a text area to the user and allows them to edit it, with an optional button allowing clearing of the text.
The Text Input component maps directly to the TextInputRef equivalent in React Native JSX.
This view displays editable text as well as a blinking caret (a vertical line which indicates the current editing position).
The view can receive focus but must be activated in order to receive input.
A text input is activated by selecting it once it has focus.
The clear button, however, cannot be interacted with using focus navigation.
See also Text Design.
Requirements
| Class |
CYITextEditView |
| Component Type |
input |
| Component Sub-Type |
regular |
| Example Layer Comment |
class:CYITextEditView; componentType:input; componentSubtype:regular; |
Required Layers
| Layer |
Description |
Text |
Layer name for the text field. It must be a text layer which uses point type and left justification. |
InputProperties |
Solid color to mark the end of the text edit field and to set the color of the input text. The parent field of InputProperties needs to be set to the Text layer in After Effects. |
Optional Timeline Markers
| Marker |
Description |
FocusIn |
The animation played when a text input receives focus. |
FocusOut |
The animation played when a text input loses focus. If not defined, the reverse of FocusIn is used. |
Blink |
An optional timeline that’s looped while the text input is active. If not provided, the caret blinks on and off using a timer. The visibility track must not be used to animate the blink, as the caret is shown and hidden in normal operation of the view. |
Optional Layers
| Layer |
Description |
Caret |
Layer name for the caret. If no Caret layer exists, a default black, rectangular caret is created. Change the color of the caret using the caret-color comment or the SetCaretColor function. The caret’s anchor point is positioned at the baseline of the text. Note that this layer must not be layer-parented to another layer. |
Clear |
Layer name for the button that clears the text field. Layer must be a CYIPushButtonView. This button is made non-focusable at initialization time, even if it contains focus timelines. |
Properties
| Property |
Description |
Input Values |
Clipping |
Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. |
Default On Off
|
Input Type |
Sets the keyboard type. Default: Text
|
Text Telephone Number Number E-mail URI
|
Text Color |
Sets the color of the text in the text edit field. The RGB and RGBA values must be prefixed by the # symbol. Example: #FF000099 or #FF0000. |
A string value, for example, #RRGGBBAA or #RRGGBB
|
Default Text |
Sets the default “hint” text displayed in the text edit field. Removed when the user begins typing. |
A string value |
Is Password |
Enables masking of the input and disables keyboard suggestions for the input field where applicable. Default: Disabled
|
Enabled Disabled
|