add scroll views

src/screens/home/game/game01/GameLevel04.js

@@ -8,6 +8,7 @@ import {
   Alert,
   Button,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -260,6 +261,9 @@ const CandyCrushGameLevel04 = ({navigation}) => {
   }
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_7}
         style={styles.backgroundImage}
@@ -275,7 +279,6 @@ const CandyCrushGameLevel04 = ({navigation}) => {
               alignItems: 'center',
               borderRadius: 14,
               width: 50,
-            marginTop: 10,
             }}
             onPress={toggleMute}>
             <Text
@@ -329,7 +332,7 @@ const CandyCrushGameLevel04 = ({navigation}) => {
             style={{
               backgroundColor: '#702963',
               height: 50,
-            marginBottom: 120,
+              marginBottom: 60,
               justifyContent: 'center',
               alignItems: 'center',
               // marginHorizontal: 25,
@@ -351,6 +354,7 @@ const CandyCrushGameLevel04 = ({navigation}) => {
           </TouchableOpacity>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -389,6 +393,12 @@ const styles = StyleSheet.create({
   candyText: {
     fontSize: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default CandyCrushGameLevel04;

src/screens/home/game/game01/GameLevel3.js

@@ -7,6 +7,7 @@ import {
   Alert,
   Button,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -215,6 +216,9 @@ const CandyCrushGameLevel03 = ({navigation}) => {
     return true; // Matches were found and cleared
   }
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_8}
         style={styles.backgroundImage}
@@ -286,6 +290,7 @@ const CandyCrushGameLevel03 = ({navigation}) => {
           </TouchableOpacity>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -323,6 +328,12 @@ const styles = StyleSheet.create({
   candyText: {
     fontSize: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default CandyCrushGameLevel03;

src/screens/home/game/game01/GameLevel5.js

@@ -7,6 +7,7 @@ import {
   Image,
   StyleSheet,
   Alert,
+  ScrollView,
   ImageBackground,
 } from 'react-native';
 import {IMGS, COLORS, ROUTES} from '../../../../constants';
@@ -119,6 +120,9 @@ const GameLevel5 = ({navigation}) => {
   };
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_9}
         style={styles.backgroundImage}
@@ -199,6 +203,7 @@ const GameLevel5 = ({navigation}) => {
           </View>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -308,6 +313,12 @@ const styles = StyleSheet.create({
     height: 100,
     borderRadius: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default GameLevel5;

src/screens/home/game/game01/GameLevel6.js

@@ -8,6 +8,7 @@ import {
   StyleSheet,
   Alert,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -148,6 +149,9 @@ const GameLevel6 = () => {
   };
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_15}
         style={styles.backgroundImage}
@@ -252,6 +256,7 @@ const GameLevel6 = () => {
           </View>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -359,6 +364,12 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     elevation: 5,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default GameLevel6;