Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Accept User Input with React Native TextInput

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    In this lesson, we’ll accept user input for the first time with a text box. We’ll operate the text input as a controlled component, and store the text value in our component state. We’ll use that text input to perform a live search on the elements in the list.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Import TextInput from React native. which is a text box that we can use to accept the user search query. Just below the header and above the list, put in a TextInput tag.

    When we reload, we can see a bit of extra space there, but we can't actually see the input box. If you select just the right location, you can see a cursor blink, which shows that the TextInput box is actually there.

    Let's add some styles to it to make it much more clear. We can call the styles input and put them in the app's style sheet. We'll add some separation with the bottom margin, create some padding, and put some larger text padding on the left and right side with padding horizontal.

    The text inside a TextInput component can also be styled like a normal text component. We can set the font size and the color of the text on the TextInput directly. Then we can add a border and background like any other React native view.

    Note that styling borders in React native is a bit different than on the web. We have to specify a border width and a border color separately. Now if we reload that, it looks quite a bit better, though it's a still bit unclear that it's a search box.

    We can add some placeholder text with a prop called placeholder, which makes it more clear that it's a search box. Now that we have a TextInput styled, let's do some live filtering as the user types into the TextInput.

    TextInput components accept a prop called onChangeText. Let's set that. This is different than on the web where inputs accept an onChange prop. The nice thing about onChangeText is that it passes the current text directly instead of as an event.

    We'll use the return text to set a bit of state called search. We should make sure search exists when the component loads. Also, we'll make the TextInput a controlled component by setting the value to the current value of search.

    Now we can use that search to actually filter the restaurants in the web view by adding a filter statement to the map, which will only show restaurants if the search is blank, or if the lowercase of the restaurant contain the lowercase of the search query.

    When we reload, we can add type into the search box and properly filter the list in real time.