Merge pull request #559 from rightoneducation/drew-hart-android-crashes

[Mobile] - Android crashes and card scrolling
rightoneducation · Mar 10, 2023 · 8759fb9 · 8759fb9
2 parents 28fc4cf + 192519a
commit 8759fb9
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 35 deletions.
diff --git a/mobile/android/app/build.gradle b/mobile/android/app/build.gradle
@@ -138,7 +138,7 @@ android {
         applicationId "com.rightonnew"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 6
+        versionCode 8
         versionName "0.1"
         multiDexEnabled true
         ndk {

diff --git a/mobile/android/app/src/main/res/values/styles.xml b/mobile/android/app/src/main/res/values/styles.xml
@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@android:color/transparent</item>
     </style>
 
 </resources>
diff --git a/mobile/src/Student/components/RoundTextIcon/index.js b/mobile/src/Student/components/RoundTextIcon/index.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { StyleSheet, View, TextInput, Image, Pressable } from "react-native"
+import { StyleSheet, View, Text, Image, Pressable } from "react-native"
 import { scale, verticalScale } from "react-native-size-matters"
 import { fontFamilies, fonts } from "../../../utils/theme"
 
@@ -27,15 +27,9 @@ const RoundTextIcon = ({
                 style={[styles.container, { height, borderColor, backgroundColor, marginHorizontal }, { ...style }]}
                 pointerEvents={readonly ? "none" : "auto"}
             >
-                <TextInput
-                    editable={!readonly}
-                    style={styles.input}
-                    onSubmitEditing={(event) =>
-                        onTextChanged(data, event.nativeEvent.text)
-                    }
-                >
+                <Text style={styles.input}>
                     {text}
-                </TextInput>
+                </Text>
                 {(showIcon === undefined ? false : showIcon) ? (
                     <Image source={icon} style={styles.icon} />
                 ) : null}

diff --git a/mobile/src/Student/screens/Game/Components/AnswerOptions.js b/mobile/src/Student/screens/Game/Components/AnswerOptions.js
@@ -37,7 +37,7 @@ const AnswerOptions = ({
                                     ? require("../img/Picked.png")
                                     : require("../img/gray_circle.png")
                             }
-                            text={`${indexToLetter(index)} ${item.text}`}
+                            text={`${indexToLetter(index)}. ${item.text}`}
                             height={45}
                             backgroundColor={"white"}
                             borderColor={

diff --git a/mobile/src/Student/screens/Game/Leaderboard/index.js b/mobile/src/Student/screens/Game/Leaderboard/index.js
@@ -21,11 +21,13 @@ const Leaderboard = ({
     const sortedTeamsByScore = gameSession.teams.sort((a, b) => b.score - a.score)
 
     const teamName = team.name ? team.name : "Team Name"
-    const findTeamNum = (index) => {
-        if (index === 0)
+    const findTeamNum = (name, index) => {
+        if (name === teamName)
             return teamAvatar.id
-        else
+        else if (index <= 4)
             return index+1
+        else 
+            return null
     }
 
     return (
@@ -56,7 +58,7 @@ const Leaderboard = ({
                     renderItem={({ item, index }) => (
                         <TeamItem
                             teamName={item.name}
-                            teamNo={findTeamNum(index)}
+                            teamNo={findTeamNum(item.name, index)}
                             score={item.score}
                         />
                     )}

diff --git a/mobile/src/Student/screens/Game/PhaseOneBasicGamePlay/index.js b/mobile/src/Student/screens/Game/PhaseOneBasicGamePlay/index.js
@@ -5,6 +5,7 @@ import {
     SafeAreaView,
     StyleSheet,
     Text,
+    ScrollView,
     View
 } from "react-native"
 import LinearGradient from "react-native-linear-gradient"
@@ -102,8 +103,13 @@ const PhaseOneBasicGamePlay = ({
     let cards = [
         <View key={"questions"}>
             <Text style={styles.cardHeadingText}>Question</Text>
-            <Card headerTitle="Question" key={"question"}>
-                <ScrollableQuestion question={question} />
+            <Card headerTitle="Question" key={"question"} extraStyle={styles.hintsViewCard}>
+              <ScrollView
+                style={{alignContent: 'center', marginBottom: verticalScale(50)}}
+                showsVerticalScrollIndicator={false}
+              >
+                <Question question={question} />
+              </ScrollView>
             </Card>
         </View>,
         <View key={"answers"}>
@@ -158,17 +164,19 @@ const PhaseOneBasicGamePlay = ({
                 <Text style={styles.hintsViewCorrectAnswer}>{indexToLetter(selectedAnswerIndex)}. {correctAnswerText}</Text>
                 {(availableHints && availableHints.length > 0) ? (
                     <Card extraStyle={styles.hintsViewCard}>
-                        <Question question={question} style={styles.hintsViewQuestion} />
-                        <RoundTextIcon
-                            icon={require("../img/checkmark_checked.png")}
-                            text={`${indexToLetter(selectedAnswerIndex)}   ${correctAnswerText}`}
-                            height={45}
-                            marginHorizontal={scale(15)}
-                            borderColor={"#EBFFDA"}
-                            backgroundColor={"#EBFFDA"}
-                            showIcon
-                            readonly />
-                        <HintsView hints={availableHints} />
+                        <View style={{ marginBottom: verticalScale(50)}}>
+                          <Question question={question} style={styles.hintsViewQuestion} />
+                          <RoundTextIcon
+                              icon={require("../img/checkmark_checked.png")}
+                              text={`${indexToLetter(selectedAnswerIndex)}   ${correctAnswerText}`}
+                              height={45}
+                              marginHorizontal={scale(15)}
+                              borderColor={"#EBFFDA"}
+                              backgroundColor={"#EBFFDA"}
+                              showIcon
+                              readonly />
+                          <HintsView hints={availableHints} />
+                        </View>
                     </Card>
                 ) : null}
             </View>
@@ -336,9 +344,8 @@ const styles = StyleSheet.create({
         marginBottom: verticalScale(50)
     },
     hintsViewCard: {
-        marginTop: -verticalScale(40),
         paddingVertical: 0,
-        maxHeight: verticalScale(500)
+        maxHeight: verticalScale(500),
     },
     hintsViewQuestion: {
         paddingVertical: verticalScale(30)

diff --git a/mobile/src/Student/screens/Game/PhaseTwoBasicGamePlay/index.js b/mobile/src/Student/screens/Game/PhaseTwoBasicGamePlay/index.js
@@ -26,6 +26,7 @@ import ScrollableQuestion from "../Components/ScrollableQuestion"
 import AnswerOptionsPhaseTwo from "./AnswerOptionsPhaseTwo"
 import HintsView from "../Components/HintsView"
 import RoundTextIcon from "../../../components/RoundTextIcon"
+import Question from "../Components/Question"
 
 //finds the letter matching the index
 const indexToLetter = (index) => {
@@ -152,8 +153,13 @@ const PhaseTwoBasicGamePlay = ({
     const questionScreen =
         <>
             <Text style={styles.cardHeadingText}>Question</Text>
-            <Card>
-                <ScrollableQuestion question={question} />
+            <Card extraStyle={styles.hintsViewCard}>
+              <ScrollView
+                  style={{alignContent: 'center', marginBottom: verticalScale(50)}}
+                  showsVerticalScrollIndicator={false}
+              >
+                <Question question={question} />
+              </ScrollView>
             </Card>
         </>
 
@@ -204,7 +210,12 @@ const PhaseTwoBasicGamePlay = ({
             <Card
                 key={correctAnswer.id}
             >
-                <ScrollableQuestion question={question} />
+                <ScrollView
+                  style={{alignContent: 'center', marginBottom: verticalScale(50)}}
+                  showsVerticalScrollIndicator={false}
+                >
+                  <Question question={question} />
+                </ScrollView>
                 <RoundTextIcon
                     icon={require("../img/checkmark_checked.png")}
                     text={`${indexToLetter(selectedAnswerIndex)}    ${correctAnswerText}`}
@@ -260,12 +271,16 @@ const PhaseTwoBasicGamePlay = ({
                 {gameSession?.currentState ===
                     GameSessionState.CHOOSE_TRICKIEST_ANSWER ? (
                     <HorizontalPageView initialPage={0}>
-                        <ScrollView showsVerticalScrollIndicator={false}>
+                     <>
+                        <View>
                             {questionScreen}
-                        </ScrollView>
+                        </View>
+                      </>
+                      <>
                         <ScrollView>
                             {submitAnswerScreen}
                         </ScrollView>
+                      </>  
                     </HorizontalPageView>) : null}
                 {gameSession?.currentState ===
                     GameSessionState.PHASE_2_DISCUSS ? (
@@ -388,6 +403,10 @@ const styles = StyleSheet.create({
         width: "100%",
         marginBottom: verticalScale(18),
     },
+    hintsViewCard: {
+      paddingVertical: 0,
+      maxHeight: verticalScale(500)
+    },
     reasonsText: {
         marginVertical: verticalScale(10),
         marginHorizontal: scale(15),