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)

Keyboard Spacer

PreviousText InputNextSelectors (Filtering)

Last updated 6 years ago

Was this helpful?

The virtual keyboards used on iOS devices pose unique layout challenges as they require you to push content around and reshape your layouts as the keyboard is activated or deactivated.

For this, we'll use Andrew Hurst's excellent . We'll need to start by importing the Platform utility from React Native.

// ... src/containers/pokedex.js

import {
  StyleSheet,
  View,
  ListView,
  Platform,
} from 'react-native';

const Spacer = Platform.OS === 'ios' ? <KeyBoardSpacer /> : null;

/* Add our new Spacer just below our SearchBar Component */
<SearchBar onChange={ filter } value={ query } />
{Spacer}
react-native-keyboard-spacer