Fabri maiden

App.js

@@ -1,21 +1,32 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import Constants from 'expo-constants'
+
+
+import Input from './components/Input'
+import Spacer from './components/Spacer'
+import ScreenContainer from './components/ScreenContainer'
+
+
+const StatusBarHeight = Constants.StatusBarHeight;
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    // <View style={styles.container}>
+      <ScreenContainer>
+      <StatusBar backgroundColor="trasparent" />
+      <Input />
+      <Spacer size={4} />
+      <Input />
+      </ScreenContainer>
+    // </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
 });

components/Print.js

@@ -0,0 +1,3 @@
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';

components/ScreenContainer.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+
+const ScreenContainer = ({children, style, ...props}) => {
+  return (
+    <View style = {[styles.container, style]} {...props} >{children} </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex:1,
+    paddingTop: sizes.StatusBarHeight
+  }
+})
+
+
+export default ScreenContainer

components/Spacer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native';
+
+
+const Spacer = ({
+  size = 0,
+  horizontal,
+  ...props
+}) => {
+  return (
+    <View style={{
+      width : size * sizes.unitSize,
+      height : size * sizes.unitSize
+    }} {...props} />
+  )
+}
+
+
+export default Spacer

components/input.js

@@ -0,0 +1,38 @@
+import React, {useState} from 'react'
+import {Text ,View,TextInput, StyleSheet,} from 'react-native'
+
+
+const Input = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style = {styles.container}>
+      <Text style= {styles.label}> Label </Text>
+      <TextInput
+        style={styles.input}
+        value= {text}
+        onChangeText={value => setText(value)}
+       />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 20
+  },
+  input: {
+    height: 40,
+    borderBottomWidth: 2,
+    borderBottomColor: 'black'
+  },
+  label: {
+    position: 'absolute',
+    top: 0,
+    color: 'red',
+    fontSize: 20,
+    lineHeight: 20
+  }
+})
+
+
+export default Input

config/sizes.js

@@ -0,0 +1,7 @@
+import Constants from 'expo-constants'
+
+export default {
+  StatusBarHeight: Constants.StatusBarHeight,
+  containerSpace: 20,
+  unitSize: 4
+}