Clearing Text in a Text Input Field

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 TextInput and TextInputRef have a clear button available, but to match Facebook’s React Native implementation, its default configuration is to be hidden. Our C++ classes CYITextEditView, 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:

• dynamically adjusts the maximum width of visible text to account for when the button is visible / hidden
• maintains a 1:1 aspect ratio (You.i React Native only)

Enable the clearButtonMode Prop

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 TextInput and 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.

<TextInput clearButtonMode='while-editing'/>

For the full list of modes for the clearButtonMode prop, see TextInputRef (the list there applies to both TextInput and TextInputRef).

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.

Configure Behavior in After Effects

You.i 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.

Configure the Row Layout

Start by opening your screen composition in After Effects. Select the desired Text Edit composition and open the You.i Properties panel.

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 10. 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.

Set Child Node Properties

Go through each child node of your Text Edit composition and ensure they are all non-layoutable, except for the Clear node.

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 Clear node.

Create a Layer For Visible Text

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:

• Under Layout, keep the box checked for the “Allow the layout to affect this layer” box.
• Under Width, add a check to the “Sizes the width of this layer to fill its parent” box.
• Under Margin, add a margin for the left and right of the layer, such as 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 Clear layer. And when the Clear layer is hidden, the EntryField layer expands to the full width of the parent.

Order the Layers

In the Timeline panel, configure the layer orders so that the EntryField layer is :

• after the Text layer, and
• before the Clear layer.

Since both EntryField and 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 EntryField and Clear layers.

At this point, your Text Edit composition and its layer properties should look something like this (the EntryField layer is a green solid):

Notes

• The EntryField layer’s opacity is 0, so its appearance (such as the solid color displayed here) has no effect.
• The position and sizing of the EntryField layer (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.