Rangle.io: React Native Workshop
gitbook
gitbook
  • Introduction
  • Setup
    • Hello World
    • Debugging
  • Core Concepts
    • Components
    • Styles
    • Flexbox
    • APIs
  • Navigation
    • Navigation Experimental
    • Creating Some Helpers
    • The Navigator Component
  • ListView (Pokédex)
    • List View
    • List View: Render Row
    • Text Input
    • Keyboard Spacer
  • Selectors (Filtering)
  • Animation
    • LayoutAnimation
    • Animated
      • Animated.Value
      • Timing, Spring & Decay
      • Animated Components
      • More Animated
    • Resources
    • Exercise
  • ScrollView (Pokemon Details)
  • MapView
  • Testing
  • Gesture Responder System
    • PanResponder
Powered by GitBook
On this page

Was this helpful?

  1. ListView (Pokédex)

Text Input

PreviousList View: Render RowNextKeyboard Spacer

Last updated 6 years ago

Was this helpful?

This one's easy.

Add a new custom SearchBar component to your Pokedex container. To complete it, you'll need to use a native , which works similarly to the web input you should be familiar with, tracking a value and responding to onChangeText events:

<TextInput style={ styles.input }
        value={ query }
        onChangeText={ text => onChange(text) } />

Also note the use of onChangeText which provides the text value as opposed to onChange which provides an event.

TextInput