fill the whole screen with buttons

src/App.tsx

@@ -16,19 +16,18 @@ import DeckButton from './components/DeckButton';
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
+  const buttons = [];
+
+  for (let i = 0; i < 21; i++) {
+    let text = 'btn' + i;
+    buttons.push(<DeckButton text={text} key={i} />);
+  }
+
   return (
     <>
       <StatusBar hidden={true} />
       <SafeAreaView>
-        <Deck>
+        <Deck>{buttons}</Deck>
-          <DeckButton text="Btn1" />
-          <DeckButton text="Btn2" />
-          <DeckButton text="Btn3" />
-          <DeckButton text="Btn4" />
-          <DeckButton text="Btn5" />
-          <DeckButton text="Btn6" />
-          <DeckButton text="Btn7" />
-        </Deck>
       </SafeAreaView>
     </>
   );

src/components/DeckButton.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
 
 interface Props {
   text: string;
@@ -25,7 +31,7 @@ const style = StyleSheet.create({
   view: {
     backgroundColor: '#ff4000',
     flexBasis: (1 / 3) * 100 + '%',
-    height: 80,
+    height: Dimensions.get('window').height / 7,
     borderColor: '#94f713',
     borderWidth: 1,
     flex: 1,
@@ -35,7 +41,6 @@ const style = StyleSheet.create({
     height: '100%',
   },
   text: {
-    //backgroundColor: '#ffbf00',
     textAlign: 'center',
   },
 });