first implementation of deck buttons

src/App.tsx

@@ -9,110 +9,29 @@
  */
 
 import React from 'react';
-import {
+import {SafeAreaView, StatusBar} from 'react-native';
-  SafeAreaView,
+import Deck from './components/Deck';
-  StyleSheet,
+import DeckButton from './components/DeckButton';
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
 
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
   return (
     <>
-      <StatusBar barStyle="dark-content" />
+      <StatusBar hidden={true} />
       <SafeAreaView>
-        <ScrollView
+        <Deck>
-          contentInsetAdjustmentBehavior="automatic"
+          <DeckButton text="Btn1" />
-          style={styles.scrollView}>
+          <DeckButton text="Btn2" />
-          <Header />
+          <DeckButton text="Btn3" />
-          {global.HermesInternal == null ? null : (
+          <DeckButton text="Btn4" />
-            <View style={styles.engine}>
+          <DeckButton text="Btn5" />
-              <Text style={styles.footer}>Engine: Hermes</Text>
+          <DeckButton text="Btn6" />
-            </View>
+          <DeckButton text="Btn7" />
-          )}
+        </Deck>
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
       </SafeAreaView>
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
 export default App;

src/components/Deck.tsx

@@ -0,0 +1,18 @@
+import React, {PropsWithChildren} from 'react';
+import {StyleSheet, View} from 'react-native';
+
+export default function Deck(props: PropsWithChildren<{}>) {
+  return (
+    <>
+      <View style={style.view}>{props.children}</View>
+    </>
+  );
+}
+
+const style = StyleSheet.create({
+  view: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});

src/components/DeckButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+interface Props {
+  text: string;
+}
+
+export default function DeckButton(props: Props) {
+  return (
+    <>
+      <View style={style.view}>
+        <Text style={style.text}>{props.text}</Text>
+      </View>
+    </>
+  );
+}
+
+const style = StyleSheet.create({
+  view: {
+    backgroundColor: '#ff4000',
+    flexBasis: '25%',
+    height: 80,
+  },
+  text: {
+    backgroundColor: '#ffbf00',
+    textAlign: 'center',
+  },
+});