When your application needs to request information such as a name or password from the user, a text input field is the way to go. To assist the user in resetting the text field if the information they entered is incorrect, you can configure your app to show a clear button in the text input field.
The You.i React Native components
TextInputRef have a clear button available, but to match Facebook’s React Native implementation, its default configuration is to be hidden.
Our C++ classes
CYIPasswordTextEditView show the clear button by default (when typing in a text entry field that has text entered) but the text field doesn’t automatically adjust based on visibility of the clear button.
These are easy changes to make that improve the user’s experience with your app.
When configured as shown below, a text input field’s clear button:
This step applies to You.i React Native only. If you’re working on a C++ application, skip to the next step.
By default, the clear button for You.i React Native
TextInputRef components isn’t visible.
This matches the behavior offered by Facebook React Native.
However, like with Facebook React Native, it’s simple to configure with this behavior with the clearButtonMode prop.
For the full list of modes for the clearButtonMode prop, see
TextInputRef (the list there applies to both
If you’re using
TextInput, you’re done! The clear button will appear on your configured
TextInput in the mode you’ve selected.
However, if you’re using our After Effects Workflow, and therefore
TextInputRef, there are a few more tweaks to make to get the full benefits of the clear button.
Keep following the instructions below.
You.i Engine React Native
TextInputRef components are backed by a Password Text Edit composition.
Similarly, if you’re building a C++ application, you’ll use a Password Text Edit or a Text Edit composition for text input fields.
The default Text Edit and Password Text Edit compositions include a
Clear layer; the tweaks below allow the text entry area to grow and shrink based on visibility of the Clear button.
For simplicity, we’ll use a Text Edit composition in the steps below, but the instructions are the same for Password Text Edit.
Start by opening your screen composition in After Effects. Select the desired Text Edit composition and open the You.i Properties panel.
If the panel isn’t already visible, open it via Window > You.i Properties.jsx.
Under Layout, make sure Row Layout is selected, as shown below. This layout controls the direction in which all layoutable child nodes of the Password Text Edit are laid out. Using Row Layout causes the clear button to be positioned on the same row as the EntryField layer that we’ll add in the next steps.
Notice that the default Spacing value for Row Layout is
This setting controls the space between all layoutable children.
We recommend setting Spacing to
0, unless you determine that you’d like to set a different value after completing this procedure.
Go through each child node of your Text Edit composition and ensure they are all non-layoutable, except for the
To do this, select the node in the Timeline panel. Then from the You.i Properties panel, under Layout, uncheck the “Allow the layout to affect this layer” box.
Repeat for each child node, except the
Create a new layer for determining the span of the visible text — that is, where the text visibly starts and ends. We’ll configure this layer to expand to the full width of the parent Text Edit component, so that when the Clear node is resized or is hidden, this layer expands to fill the space where the Clear node was.
Name the layer
EntryField, and set its You.i Properties:
10. Important note: These margin settings in After Effects apply left and right padding to the TextInputRef in React Native.
The width setting is what gives us the elasticity of the
EntryField layer, causing it to expand to fill the width of its parent Text Edit composition (minus the parent’s Spacing setting and minus the
EntryField’s Margin settings).
The presence of other layoutable layers in the same row limit its expansion.
So when the
Clear layer is visible, the
EntryField layer shrinks to fill the width of the parent minus the width of the
And when the
Clear layer is hidden, the
EntryField layer expands to the full width of the parent.
In the Timeline panel, configure the layer orders so that the
EntryField layer is :
Clear are layoutable, the presence of one affects the position of the other.
In a Row Layout, the layoutable layer that comes first in the stack appears to the left of the next layoutable layer in the stack.
If the first layoutable layer is hidden, the next layoutable layer will move to take its position.
If you wanted your application to show the clear button to the left of the text field (instead of the right), you could reverse the order of the
At this point, your Text Edit composition and its layer properties should look something like this (the
EntryField layer is a green solid):
EntryFieldlayer’s opacity is
0, so its appearance (such as the solid color displayed here) has no effect.
EntryFieldlayer (shown as a green box in the image) don’t matter if you’ve set its width to fill its parent and you’ve assigned the parent Text Edit composition a Row Layout, as described above.