KeyboardAvoidingView in React Native - Mini App: Build & Ship

Build: Login Screen

A simple login screen that moves input fields up when the keyboard appears, so they are not hidden.

Target UI

-------------------------
|       Login Screen     |
|                       |
|  Email: [__________]  |
|  Password: [_______]  |
|                       |
|       [Login Button]   |
-------------------------

Use KeyboardAvoidingView to prevent keyboard from covering inputs

Include two TextInput fields: Email and Password

Add a Login button below inputs

KeyboardAvoidingView should adjust behavior based on platform (padding for iOS, height for Android)

Screen content should be centered vertically

Starter Code

React Native

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

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <View style={styles.inner}>
        {/* TODO: Add TextInput fields and Button here */}
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    flex: 1,
    justifyContent: 'center',
    padding: 24
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <View style={styles.inner}>
        <TextInput
          placeholder="Email"
          keyboardType="email-address"
          style={styles.input}
          autoCapitalize="none"
        />
        <TextInput
          placeholder="Password"
          secureTextEntry
          style={styles.input}
        />
        <Button title="Login" onPress={() => {}} />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    flex: 1,
    justifyContent: 'center',
    padding: 24
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 10,
    borderRadius: 4
  }
});

This login screen uses KeyboardAvoidingView to move the content up when the keyboard appears, so the input fields are not hidden. The behavior prop changes based on the platform: padding for iOS and height for Android, which are the recommended settings.

The inputs have placeholders and appropriate keyboard types. The password input hides the text for privacy. The button is placed below the inputs. The content is centered vertically with padding for nice spacing.

Final Result

Completed Screen

-------------------------
|       Login Screen     |
|                       |
|  Email: [__________]  |
|  Password: [_______]  |
|                       |
|       [Login Button]   |
-------------------------

When user taps an input, keyboard appears and the inputs move up so they remain visible

User can type email and password

Login button is tappable (no action implemented)

Stretch Goal

Add a TouchableWithoutFeedback to dismiss the keyboard when tapping outside inputs

💡 Hint

Wrap KeyboardAvoidingView with TouchableWithoutFeedback and call Keyboard.dismiss() on press