🩹 Ensure elements that share rows can always all be seen

components/MoveListItem.tsx

@@ -2,16 +2,18 @@
 
 import { Move }                                          from "../entities/Move";
 import React                                             from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
 
 type MoveListItemProps = {
     move: Move;
     onPress: () => void;
+    style?: ViewStyle;
 };
 
-const MoveListItem: React.FC<MoveListItemProps> = ({ move, onPress }) => (
-    <TouchableOpacity style={styles.listItem} onPress={onPress}>
-        <Text style={styles.listItemText}>{move.name}, {move.type.name}: {move.power}</Text>
+const MoveListItem: React.FC<MoveListItemProps> = ({ move, onPress, style }) => (
+    <TouchableOpacity style={[styles.listItem, style]} onPress={onPress}>
+        <Text style={styles.listItemText} numberOfLines={1}
+              ellipsizeMode="tail">{move.name}, {move.type.name}: {move.power}</Text>
     </TouchableOpacity>
 );
 

components/TypeTacticsInfoList.tsx

@@ -10,7 +10,7 @@ type TypeListProps = {
 
 const TypeTacticsInfoList = ({ isWeakness, types }: TypeListProps) => {
     if (!types || types.length === 0) {
-        types = ['Nothing'];
+        types = ['NOTHING'];
     }
 
     return (

package.json

@@ -49,6 +49,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-multiple-select": "^0.5.12",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",

redux/constants.ts

@@ -1,6 +1,6 @@
 // redux/constants.ts
 
-export const GET_MOVES = 'FETCH_MOVES';
+export const GET_MOVES = 'GET_MOVES';
 export const CREATE_MOVE = 'CREATE_MOVE';
 export const UPDATE_MOVE = 'UPDATE_MOVE';
 export const DELETE_MOVE = 'DELETE_MOVE';

screens/moves/MoveDetailScreen.tsx

@@ -66,7 +66,8 @@ const styles = StyleSheet.create({
     },
     typeListsContainer: {
         flexDirection: 'row',
-        justifyContent: 'space-evenly',
+        flexWrap: 'wrap',
+        justifyContent: 'space-around',
         marginTop: 10,
     },
 });

screens/moves/MoveFormScreen.tsx

@@ -1,7 +1,7 @@
 // screens/moves/MoveFormScreen.tsx
 
 import React, { useState }                     from 'react';
-import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Button, StyleSheet, Text, TextInput } from 'react-native';
 import { StackNavigationProp }                 from '@react-navigation/stack';
 import { RootStackParamList }                  from "../../navigation/navigationTypes";
 import { useDispatch }                         from 'react-redux';
@@ -15,6 +15,7 @@ import { ItemValue }                                 from "@react-native-communi
 import { MoveCategoryName }                    from "../../entities/MoveCategoryName";
 import { TypeName }                            from "../../entities/TypeName";
 import MultiSelect                             from "react-native-multiple-select";
+import { KeyboardAwareScrollView }             from "react-native-keyboard-aware-scroll-view";
 
 type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
 type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
@@ -67,7 +68,7 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
     };
 
     return (
-        <View style={styles.container}>
+        <KeyboardAwareScrollView style={styles.container}>
             <Text style={styles.label}>Name: </Text>
             <TextInput
                 value={move.name}
@@ -135,7 +136,8 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                 displayKey="name"
             />
             <Button title="Save" onPress={handleSave}/>
-        </View>
+
+        </KeyboardAwareScrollView>
     );
 };
 

screens/moves/MoveListScreen.tsx

@@ -46,6 +46,7 @@ const MoveListScreen = ({ navigation }: Props) => {
                 <View style={styles.listItemContainer}>
                     <MoveListItem
                         move={item}
+                        style={styles.moveListItem}
                         onPress={() => navigation.navigate(MOVE_DETAIL, { move: item })}
                     />
                     <Button title="X"
@@ -71,6 +72,10 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
     },
+    moveListItem: {
+        flex: 1,
+        marginRight: 10
+    }
 });
 
 export default MoveListScreen;

yarn.lock

@@ -8301,7 +8301,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.7.2:
+prop-types@*, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8477,6 +8477,19 @@ react-native-gradle-plugin@^0.71.18:
   resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.18.tgz"
   integrity sha512-7F6bD7B8Xsn3JllxcwHhFcsl9aHIig47+3eN4IHFNqfLhZr++3ElDrcqfMzugM+niWbaMi7bJ0kAkAL8eCpdWg==
 
+react-native-iphone-x-helper@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
+react-native-keyboard-aware-scroll-view@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
+  integrity sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-iphone-x-helper "^1.0.3"
+
 react-native-multiple-select@^0.5.12:
   version "0.5.12"
   resolved "https://registry.yarnpkg.com/react-native-multiple-select/-/react-native-multiple-select-0.5.12.tgz#be9204f49bc1bb734c40422a89acc173959bcd70"