[React Native SafeAreaView, KeyboardAvoidingView, ScrollView] The best way to handle safe areas and keyboard in a scroll view #react-native #SafeAreaView #ScrollView #KeyboardAvoidingView

Screen.tsx

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  KeyboardAvoidingView,
  ScrollView,
  Platform,
} from 'react-native';

export default function Screen() {
  return (
    <SafeAreaView style={[styles.sav]}>
      <KeyboardAvoidingView
        style={[styles.keyboard]}
        behavior={Platform.select({android: 'height', default: 'padding'})}>
        <ScrollView
          style={[styles.scroll]}
          keyboardDismissMode="interactive"
          keyboardShouldPersistTaps="handled">

        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sav: {
    flex: 1,
  },
  scroll: {
    overflow: 'visible',
  },
  keyboard: {
    flex: 1,
  },
});