KeyboardAvoidingView in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import KeyboardAvoidingView from React Native.

React Native

import { View, TextInput, [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AKeyboardManager

BKeyboardListener

CKeyboardHandler

DKeyboardAvoidingView

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent component like KeyboardListener.

Confusing KeyboardAvoidingView with KeyboardManager.

The KeyboardAvoidingView component is imported from 'react-native' to help adjust the UI when the keyboard appears.

2fill in blank

medium

Complete the code to wrap the TextInput with KeyboardAvoidingView.

React Native

return (
  <[1] behavior="padding" style={{ flex: 1 }}>
    <TextInput placeholder="Type here" />
  </[1]>
);

Drag options to blanks, or click blank then click option'

AKeyboardAvoidingView

BView

CScrollView

DSafeAreaView

Attempts:

3 left

💡 Hint

Common Mistakes

Using View which does not adjust for keyboard.

Using ScrollView without keyboard props.

The KeyboardAvoidingView wraps the input to move it above the keyboard when it appears.

3fill in blank

hard

Fix the error in the KeyboardAvoidingView behavior prop to use the correct value for iOS.

React Native

<KeyboardAvoidingView behavior=[1] style={{ flex: 1 }}>
  <TextInput placeholder="Enter text" />
</KeyboardAvoidingView>

Drag options to blanks, or click blank then click option'

A"padding"

B"height"

C"position"

D"scroll"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' which is valid but less common on iOS.

Using invalid values like 'scroll'.

On iOS, the recommended behavior prop value is "padding" to move content above the keyboard.

4fill in blank

hard

Fill both blanks to set KeyboardAvoidingView to adjust only on iOS and use the correct keyboardVerticalOffset.

React Native

const isIOS = Platform.OS === 'ios';

return (
  <KeyboardAvoidingView behavior=[1] keyboardVerticalOffset=[2] style={{ flex: 1 }}>
    <TextInput placeholder="Input" />
  </KeyboardAvoidingView>
);

Drag options to blanks, or click blank then click option'

A"padding"

B64

C"height"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for keyboardVerticalOffset causing overlap.

Using 'height' behavior on iOS without testing.

On iOS, behavior is set to "padding" and keyboardVerticalOffset is often set to 64 to offset the keyboard height properly.

5fill in blank

hard

Fill all three blanks to create a KeyboardAvoidingView that only adjusts on iOS, uses a vertical offset, and contains a TextInput with a placeholder.

React Native

import React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior=[1] keyboardVerticalOffset=[2] style={{ flex: 1 }}>
      <TextInput placeholder=[3] style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} />
    </KeyboardAvoidingView>
  );
}

Drag options to blanks, or click blank then click option'

A"padding"

BPlatform.OS === 'ios' ? 80 : 0

C"Enter your name"

D"height"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using Platform.OS to conditionally set offset.

Leaving placeholder empty or missing.

This code sets behavior to "padding" for iOS, uses a conditional vertical offset, and adds a placeholder text to the input.