You may need to collect inputs from your users - this could be for user settings, filters or simply to log in. These inputs might only change what the user sees, or you may want to save the data to Firebase Firestore or your own custom API. Whatever the case, the process will be similar.
This guide will cover creating a login page, but the same steps can be applied to collecting any kind of information.
Local state is a component that holds data temporarily. Every input must be tied to a state item.
Add a Local State component to the root container.
Add data Items for "username" and "password."
Add the Keyfor each field.
Since this is a login screen, you do not need to provide an Initialvalue, but you can use the Initialto provide a default, if necessary.
Add two Text Input components, and any other components needed to style your login page.
Set the Label and Placeholder text, as desired.
Set the correct Content Type to ensure the user is presented with the appropriate keyboard and autocomplete options.
Next, you need to link the Text Input to the Local State so that when the user enters information, the local state is updated.
From the Data Value drop-down, select the corresponding local state option.
Now, add the login Buttonand perform the login Action:
Add a Button component within the Local State component.
Scroll down to go to the Button's "On Click - Action Creator".
For this example, we are using Firebase Authentication's Sign Up action, but the same process applies if you're using your own API, via the Send API Request action.
Bind the inputs of the action to the local state.
Add a follow-up action to Close Screen or navigate to a new one ( Open Screen), depending on your app's flow.
Now you've created a login screen. This same process can be used for collecting any input from your users.