How to pass text input to another screen in Framer X

It’s easier than you might think.

What we’re building. Images are from Unsplash.

Before we start

I’m using the “Input” component by Benjamin den Boer for my input fields. I tried linking to the component but the link seems to be broken. However, you can find it in the Store, seek and you shall find.

If you want, you can download my example file here.

Alright, so you have your login screen where you fill in a username and password. Then you have a “home” page where you want to display a greeting followed by the username you logged in with. How would you pass that text input from one screen to another? Enter Code Overrides:

Create a Code Override

1. Select the “Username” input field
2. Click “Code” in the Inspector panel
3. Click File >“New file…” to open up App.tsx in VSCode

The Code section in Framer X

Setting the data

We need to store the input from our “Username” input in order to display it later when the user log in. To do so we first need to setup the following property in our App.tsx.

• Read more about Code Overrides and the Data object

Note: You can change “data” to whatever you want, but since that’s the default name when you open App.tsx I’ll just go with that.

Change and store the input

Now we need a way to listen to what the user types in and set that input to the text parameter we specified in the Data object. To do that, we create an override called “TextInput” where we call the onValueChange function.

What this does is that it checks if the value changes (what we type in the input field). And when it changes, it sets data.text to that input.

Display the input

Almost done. Now we need to create another override called “TextOutput” that we’ll later attach to the text we want to change. What this does is changing the current text value (“Username” in my example” to the input we got from our “TextInput” override.

Attach the overrides

In order for our overrides to actually do something we need to attach them to our components.

1. Select the “Username” input field
2. click on “Code” in the Inspector panel and on “Override”, select “TextInput”.
3. Then do the same thing with the “Username” text on the home screen, but select “TextOutput” instead.

Applying the override to the input field

And lastly we need to connect the login screen with the home screen. Select the login button and create a link (tap L on your keyboard) to the home screen.

Example

Example of passing the input value to another screen.

Learn more about Code Overrides:

How to create a simple prototype with Code Overrides in Framer X.

Code Overrides