Screen

Get dynamic width and height of a device screen:

const { width, height } = useWindowDimensions();

It's a good strategy to make the top most container always span the entire width and height based on the dynamic value:

<ThemedView style={
  {              
    height: height * 0.65,
    width: width,
  }
}>
  {...}
</>

Also used for responsiveness in conjunction with Platform:

import {Platform} from 'react-native';

{Platform.OS !== 'web' ? ... : ...}

Theme

Detecting light or dark mode of device:

import { useColorScheme } from 'react-native';

const colorScheme = useColorScheme();

Scrollable Screen

<ScrollView style={styles.page} contentContainerStyle={{ flexGrow: 1 }}>
  <View style={styles.paragraph}>
    {/* content */}
  </View>
</ScrollView>

view

View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.

View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

import { Text, View, StyleSheet } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>About screen</Text>
    </View>
  );
}