React Native screen scaffold

Ingredients

• •react-native with TypeScript
• •react-native-safe-area-context
• •KeyboardAvoidingView + ScrollView

Scaffold

import React from 'react';
import {
  View,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

interface ScreenProps {
  loading?: boolean;
  children: React.ReactNode;
}

export default function Screen({ loading, children }: ScreenProps) {
  return (
    <SafeAreaView className="flex-1 bg-black">
      <KeyboardAvoidingView
        className="flex-1"
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <ScrollView
          className="flex-1 px-4"
          contentContainerStyle={{ flexGrow: 1 }}
          keyboardShouldPersistTaps="handled"
        >
          {loading ? (
            <View className="flex-1 items-center justify-center">
              <ActivityIndicator size="large" color="#8B5CF6" />
            </View>
          ) : (
            children
          )}
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}