Empty state for no games

src/components/Buttons/NewGameButton.tsx

@@ -16,7 +16,7 @@ interface Props {
 const NewGameButton: React.FunctionComponent<Props> = ({ navigation }) => {
     const dispatch = useAppDispatch();
 
-    const gameList = useAppSelector(state => selectAllGames(state));
+    const gameList = useAppSelector(selectAllGames);
 
     const playerNumberOptions = [...Array.from(Array(12).keys(), n => n + 1)];
 
@@ -28,9 +28,11 @@ const NewGameButton: React.FunctionComponent<Props> = ({ navigation }) => {
     });
 
     const addGameHandler = async (playerCount: number) => {
+        console.log('games', gameList);
+
         dispatch(
             asyncCreateGame({
-                gameCount: gameList.length + 1,
+                gameCount: gameList.length,
                 playerCount: playerCount
             })
         ).then(() => {

src/components/PlayerTiles/AdditionTile/Helpers.ts

@@ -1,4 +1,4 @@
-import { ZoomIn, ZoomOut , Layout, Easing , withTiming } from 'react-native-reanimated';
+import { Easing, LinearTransition, ZoomIn, ZoomOut, withTiming } from 'react-native-reanimated';
 
 /**
  * The duration of the animation in milliseconds.
@@ -18,7 +18,7 @@ export const exitingAnimation = ZoomOut.duration(animationDuration);
 /**
  * The easing and duration of the layout animation.
  */
-export const layoutAnimation = Layout.easing(Easing.ease).duration(animationDuration);
+export const layoutAnimation = LinearTransition.easing(Easing.ease).duration(animationDuration);
 
 export const singleLineScoreSizeMultiplier = 1.2;
 

src/screens/ListScreen.tsx

@@ -4,11 +4,11 @@ import { ParamListBase } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { BlurView } from 'expo-blur';
 import { StyleSheet, Text, View } from 'react-native';
-import Animated, { Layout, Easing } from 'react-native-reanimated';
+import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { asyncCreateGame, selectAllGames } from '../../redux/GamesSlice';
-import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { selectAllGames } from '../../redux/GamesSlice';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { setOnboardedVersion } from '../../redux/SettingsSlice';
 import GameListItem from '../components/GameListItem';
 
@@ -20,24 +20,21 @@ const ListScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const gameList = useAppSelector(state => selectAllGames(state));
     const dispatch = useAppDispatch();
 
-    // If no games, create one and navigate to it
     useEffect(() => {
         dispatch(setOnboardedVersion());
-
-        if (gameList.length == 0) {
-            dispatch(asyncCreateGame({ gameCount: gameList.length + 1, playerCount: 2 })).then(() => {
-                setTimeout(() => {
-                    navigation.navigate("Game");
-                }, 500);
-            });
-        }
     }, [gameList.length]);
 
     return (
         <SafeAreaView edges={['bottom', 'left', 'right']} style={{ backgroundColor: 'white', flex: 1 }}>
             <Animated.FlatList
                 ListFooterComponent={<View style={{ paddingBottom: 25 }}></View>}
-                itemLayoutAnimation={Layout.easing(Easing.ease)}
+                itemLayoutAnimation={LinearTransition.easing(Easing.ease)}
+                ListEmptyComponent={
+                    <>
+                        <Text style={{ textAlign: 'center', padding: 30, paddingBottom: 10, fontSize: 16, fontWeight: 'bold' }}>No Games</Text>
+                        <Text style={{ textAlign: 'center', padding: 10 }}>Tap the + button above to create a new game.</Text>
+                    </>
+                }
                 style={styles.list}
                 data={gameList}
                 renderItem={({ item, index }) =>
@@ -50,6 +47,7 @@ const ListScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                 position: 'absolute', bottom: 0, left: 0, right: 0, height: 60,
                 justifyContent: 'flex-start', alignItems: 'center',
                 borderTopWidth: 1, borderColor: '#ccc',
+                display: gameList.length > 0 ? undefined : 'none',
             }}>
                 <Text style={{ paddingTop: 10, color: '#555', fontSize: 12 }}>Long press for more options.</Text>
             </BlurView>