Exercise 4.4 done and deemed ready

App.js

@@ -12,7 +12,7 @@ import { Card } from 'react-native-paper';
 
 const Stack = createStackNavigator();
 
-class noteScrn extends React.Component {
+export default class App extends React.Component {
   state = {
     inpText: "",
     lONotes: ["Note 1","Note 2","Note 3","Note 4","Note 5","Note 6","Note 7","Note 8","Note 9","Note 10","Note 11","Note 12","Note 13","Note 14","Note 15","Note 16","Note 17","Note 18","Note 19","Note 20","Note 21"]
@@ -24,7 +24,8 @@ class noteScrn extends React.Component {
   render() {
     return (
       <View style={styles.mainContainer}>
-        <ScrollView>
+        <View style={styles.titleSliver}></View>
+        <ScrollView style={{ flex: 1 }}>
           {this.state.lONotes.map(note => <Text>{note}</Text>)}
         </ScrollView>
         <View style={styles.bottomPos}>
@@ -39,6 +40,7 @@ class noteScrn extends React.Component {
             this.state.lONotes.push(this.state.inpText) //Lisää uusi note stateen
             this.forceUpdate(); // Uudelleenrenderöi
           }}
+          color="#6dd7fd"
         />
         </View>
       </View>
@@ -46,20 +48,19 @@ class noteScrn extends React.Component {
   }
 }
 
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Notes">
-        <Stack.Screen name="Notes" component={noteScrn} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-
 const styles = StyleSheet.create({
   mainContainer:{
     flex: 1,
-    backgroundColor: '#ffffff'
+    flexDirection: "column",
+    backgroundColor: '#ffffff',
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+  },
+
+  titleSliver:{
+    top:0,
+    flex: 0.1,
+    backgroundColor: "#0093cb"
   },
 
   bottomPos:{