Платформенные различия

import { Platform } from 'react-native';

Platform.OS;           // 'ios' | 'android' | 'web'
Platform.Version;      // номер версии ОС
Platform.isPad;        // iPad (iOS)
Platform.isTV;         // Apple TV или Android TV

const styles = StyleSheet.create({
    header: {
        paddingTop: Platform.OS === 'ios' ? 50 : 30,
    },
});

const styles = StyleSheet.create({
    shadow: Platform.select({
        ios: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 4,
        },
        android: {
            elevation: 4,
        },
        default: {},
    }),
});

function Component() {
    if (Platform.OS === 'ios') {
        return <IOSComponent />;
    }
    return <AndroidComponent />;
}

components/
├── Button.ios.tsx
├── Button.android.tsx
└── Button.tsx         # fallback для других платформ

import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={{ flex: 1 }}>
    {/* контент */}
</SafeAreaView>

import { BackHandler } from 'react-native';
import { useEffect } from 'react';

useEffect(() => {
    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
        if (hasUnsavedChanges) {
            Alert.alert('Выйти?', 'Изменения не сохранятся', [
                { text: 'Отмена', style: 'cancel' },
                { text: 'Выйти', onPress: () => navigation.goBack() },
            ]);
            return true; // обработано
        }
        return false; // стандартное поведение
    });

    return () => sub.remove();
}, [hasUnsavedChanges]);

npm install react-native-safe-area-context

import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView edges={['top', 'bottom']}>
    {/* контент */}
</SafeAreaView>

import { StatusBar } from 'expo-status-bar';

<StatusBar style="auto" />
<StatusBar style="light" />
<StatusBar style="dark" />
<StatusBar hidden />