Simple Layout Practice Exercise

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Button } from 'react-native';

import HomeScreen from './screens/HomeScreen';
import ListScreen from './screens/ListScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home" screenOptions={{ headerStyle: { color: 'rebeccapurple', backgroundColor: 'white' } }}>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={({ navigation, route }) => ({
              headerRight: () => <Button onPress={() => navigation.navigate('List')} title="List" color="cornflowerblue" />,
            })}
          />
          <Stack.Screen name="List" component={ListScreen} />
          <Stack.Screen name="Details" component={DetailScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

//https://gist.github.com/prof3ssorSt3v3/467ee4dca34eb6538174bfe217bb5bfa

DetailScreen.js

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, Text, StyleSheet } from 'react-native';

export default ({ route, navigation }) => {
  const insets = useSafeAreaInsets();
  const { uid, username, email } = route.params;

  return (
    <View style={[s.container, { paddingTop: insets.top }]}>
      <Text style={s.txt}>Details Screen</Text>
      <Text style={s.nm}>{username}</Text>
      <Text style={s.em}>{email}</Text>
    </View>
  );
};

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'hsl(340, 40%, 50%)',
    color: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
  },
  nm: {
    fontSize: 30,
  },
  em: {
    fontSize: 15,
  },
});

HomeScreen.js

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, Text, StyleSheet } from 'react-native';

export default ({ route, navigation }) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[s.container, { paddingTop: insets.top }]}>
      <Text style={s.txt}>Home Screen</Text>
    </View>
  );
};

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'hsl(340, 40%, 50%)',
    color: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 30,
  },
});

ListScreen.js

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, Text, StyleSheet, FlatList, Pressable } from 'react-native';

const info = [
  { id: 302, uid: 'd3455355-39fa-457a-839e-92241d30922c', username: 'mandie.hintz', email: '[email protected]' },
  { id: 2747, uid: '0f293c11-de1a-44b8-8208-c33e124dcb27', username: 'stanley.frami', email: '[email protected]' },
  { id: 4168, uid: '50268bb7-5a01-4e14-9e8d-c9741ae030f3', username: 'rochelle.ziemann', email: '[email protected]' },
  { id: 9374, uid: 'a05412d9-cb96-445f-9bc0-f1c4ff98b7ba', username: 'sean.hackett', email: '[email protected]' },
  { id: 5857, uid: '5b5a7502-b99b-4d4c-b16a-110738c10105', username: 'glady.gutkowski', email: '[email protected]' },
  { id: 7090, uid: '356fffea-b33d-4c77-85c3-f8ff614cd025', username: 'johana.predovic', email: '[email protected]' },
  { id: 7890, uid: 'a2420b87-01cb-4130-84e2-e59d2adfba99', username: 'ike.mosciski', email: '[email protected]' },
  { id: 1512, uid: 'f2528099-90f3-4e74-90da-675c9fd8d0a4', username: 'margrett.stamm', email: '[email protected]' },
  { id: 499, uid: 'a49a87b1-aab9-4a19-859a-eba3be61a5cb', username: 'ute.west', email: '[email protected]' },
  { id: 8874, uid: '31846cc7-d101-4690-bf69-2b67d0713778', username: 'sharee.schuppe', email: '[email protected]' },
];

const ListItem = ({ user, nav }) => {
  return (
    <View key={s.uid} style={s.listitem}>
      <Text style={s.nm}>{user.username}</Text>
      <Text style={s.em}>{user.email}</Text>
      <Pressable
        onPress={() => {
          nav('Details', { uid: user.uid, username: user.username, email: user.email });
        }}
      >
        <Text style={s.btn}>See Details</Text>
      </Pressable>
    </View>
  );
};
const Empty = () => {
  return (
    <View style={s.listitem}>
      <Text style={s.nm}>Nothing to see here.</Text>
    </View>
  );
};

export default ({ route, navigation }) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[s.container, { paddingTop: insets.top }]}>
      <FlatList style={s.list} data={info} renderItem={({ item }) => <ListItem user={item} nav={navigation.navigate} />} ListEmptyComponent={<Empty />} />
    </View>
  );
};

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'hsl(340, 40%, 50%)',
    color: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 30,
  },
  nm: {
    fontSize: 30,
    color: '#eee',
  },
  em: {
    fontSize: 15,
    color: '#ccc',
  },
  btn: {
    color: 'gold',
    fontSize: 20,
  },
  listitem: {
    borderBottomWidth: 2,
    borderBottomColor: '#999',
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  list: {
    width: '100%',
  },
});