few improvements

App.js

@@ -1,29 +1,14 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';
-import { Button } from 'react-native-web';
+import TitleBar from './components/title_bar';
 
 export default function App() {
   return (
     <View style={styles.container, {
       flexDirection: "column"
     }}>
-      <View style={styles.controlBar}>
-        <View style={{
-          flexDirection: 'row'
-        }}>
-          <Text>Objectif</Text>
-          <TextInput/>
-        </View>
-        <View style={{
-          alignItems: 'flex-end',
-          flexDirection: 'row'
-        }}>
-        <Button title={"Jour"}></Button>
-        <Button title={"Mois"}></Button>
-        <Button title={"YTD"}></Button>
-        </View>
-      </View>
+      <TitleBar/>
       <Text>Open up App.js to start working on your app!</Text>
       <StatusBar style="auto" />
     </View>

components/title_bar.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
+
+
+function TitleBar(props){
+
+    return (
+        <View style={styles.controlBar}>
+            <View style={{
+            flexDirection: 'row'
+            }}>
+            <Text>Objectif</Text>
+            <TextInput/>
+            </View>
+            <View style={{
+            alignItems: 'flex-end',
+            flexDirection: 'row'
+            }}>
+            <Button title={"Jour"}></Button>
+            <Button title={"Mois"}></Button>
+            <Button title={"YTD"}></Button>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    controlBar: {
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: 'space-between'
+    }
+  });
+
+export default TitleBar;