added tailwind

app/Hello_World.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from 'react-native';
+
+// const styles = StyleSheet.create({
+//   container: {
+//     alignItems: 'center',
+//   },
+//   text: {
+//     fontSize: 40
+//   }
+// })
+
+type HelloWorldProps = {
+  text: string;
+  aNumber: number;
+}
+
+const HelloWorld = (props: HelloWorldProps) => {
+  return (
+    <View className='flex-1 items-center justify-center'>
+      <Text>{props.text} : {props.aNumber}</Text>
+    </View>
+  )
+}
+
+const Counter = () => {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <View>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title={`You tabbed me ${count} times`}/>
+    </View>
+  )
+}
+
+const ManyHelloes = () => {
+  return (
+    <View>
+      <HelloWorld text="first number" aNumber={1}/>
+      <HelloWorld text="second number" aNumber={2}/>
+      <HelloWorld text="third number" aNumber={3}/>
+      <Counter/>
+    </View>
+  )
+}
+
+export default ManyHelloes;

app/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "expo-router";
+import "../global.css";
 
 export default function RootLayout() {
   return <Stack />;

app/index.tsx

@@ -1,15 +1,8 @@
-import { Text, View } from "react-native";
+import React from "react";
+import ManyHelloes from "./Hello_World";
 
 export default function Index() {
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
+    <ManyHelloes/>
   );
 }