From da02d7f54393ec97d85da93c43c23ad0863ec672 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Wed, 14 Jun 2023 10:42:46 +0200 Subject: [PATCH] :adhesive_bandage: Ensure elements that share rows can always all be seen --- README.md | 6 ++--- components/MoveListItem.tsx | 14 +++++++----- components/TypeTacticsInfoList.tsx | 2 +- package.json | 1 + redux/constants.ts | 2 +- screens/moves/MoveDetailScreen.tsx | 3 ++- screens/moves/MoveFormScreen.tsx | 36 ++++++++++++++++-------------- screens/moves/MoveListScreen.tsx | 5 +++++ yarn.lock | 15 ++++++++++++- 9 files changed, 54 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 409a754..9934fea 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,9 @@ A React Native app for education purposes. Refer to [instructions here](https://react-native-courses.clubinfo-clermont.fr/docs/notation). + [Sketches](#sketches) - - [Trainers](#trainers) - - [Pokemongs](#pokemongs) - - [Moves](#moves) + - [Trainers](#trainers) + - [Pokemongs](#pokemongs) + - [Moves](#moves) + [Using the app](#using-the-app) ## Sketches diff --git a/components/MoveListItem.tsx b/components/MoveListItem.tsx index 845e3af..e30e050 100644 --- a/components/MoveListItem.tsx +++ b/components/MoveListItem.tsx @@ -1,17 +1,19 @@ // components/MoveListItem.test.ts -import { Move } from "../entities/Move"; -import React from "react"; -import { StyleSheet, Text, TouchableOpacity } from "react-native"; +import { Move } from "../entities/Move"; +import React from "react"; +import { StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native"; type MoveListItemProps = { move: Move; onPress: () => void; + style?: ViewStyle; }; -const MoveListItem: React.FC = ({ move, onPress }) => ( - - {move.name}, {move.type.name}: {move.power} +const MoveListItem: React.FC = ({ move, onPress, style }) => ( + + {move.name}, {move.type.name}: {move.power} ); diff --git a/components/TypeTacticsInfoList.tsx b/components/TypeTacticsInfoList.tsx index e9c8d3b..d95b1e0 100644 --- a/components/TypeTacticsInfoList.tsx +++ b/components/TypeTacticsInfoList.tsx @@ -10,7 +10,7 @@ type TypeListProps = { const TypeTacticsInfoList = ({ isWeakness, types }: TypeListProps) => { if (!types || types.length === 0) { - types = ['Nothing']; + types = ['NOTHING']; } return ( diff --git a/package.json b/package.json index fe9d40d..71c55b9 100644 --- a/package.json +++ b/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", diff --git a/redux/constants.ts b/redux/constants.ts index f4ff996..ca67dca 100644 --- a/redux/constants.ts +++ b/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'; diff --git a/screens/moves/MoveDetailScreen.tsx b/screens/moves/MoveDetailScreen.tsx index bb43015..0a85552 100644 --- a/screens/moves/MoveDetailScreen.tsx +++ b/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, }, }); diff --git a/screens/moves/MoveFormScreen.tsx b/screens/moves/MoveFormScreen.tsx index f052d4b..e2c963f 100644 --- a/screens/moves/MoveFormScreen.tsx +++ b/screens/moves/MoveFormScreen.tsx @@ -1,20 +1,21 @@ // screens/moves/MoveFormScreen.tsx -import React, { useState } from 'react'; -import { Button, StyleSheet, Text, TextInput, View } from 'react-native'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { RootStackParamList } from "../../navigation/navigationTypes"; -import { useDispatch } from 'react-redux'; -import { createMove, updateMove } from '../../redux/actions/moveActions'; -import { AppDispatch } from "../../redux/store"; -import { Move } from "../../entities/Move"; -import { RouteProp } from "@react-navigation/native"; -import { MOVE_FORM } from "../../navigation/constants"; -import { Picker } from "@react-native-community/picker"; -import { ItemValue } from "@react-native-community/picker/typings/Picker"; -import { MoveCategoryName } from "../../entities/MoveCategoryName"; -import { TypeName } from "../../entities/TypeName"; -import MultiSelect from "react-native-multiple-select"; +import React, { useState } from 'react'; +import { Button, StyleSheet, Text, TextInput } from 'react-native'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { RootStackParamList } from "../../navigation/navigationTypes"; +import { useDispatch } from 'react-redux'; +import { createMove, updateMove } from '../../redux/actions/moveActions'; +import { AppDispatch } from "../../redux/store"; +import { Move } from "../../entities/Move"; +import { RouteProp } from "@react-navigation/native"; +import { MOVE_FORM } from "../../navigation/constants"; +import { Picker } from "@react-native-community/picker"; +import { ItemValue } from "@react-native-community/picker/typings/Picker"; +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; type MoveFormScreenRouteProp = RouteProp; @@ -67,7 +68,7 @@ const MoveFormScreen = ({ navigation, route }: Props) => { }; return ( - + Name: { displayKey="name" />