Premiers pas

App.js

 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Button, Text, View, TextInput } from 'react-native';
+import * as Font from 'expo-font';
 
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-    </View>
-  );
+class App extends React.Component {
+
+  state = {
+    fontLoaded: false,
+  };
+
+  async componentDidMount() {
+    await Font.loadAsync({
+      'Trebuchet MS': require('./assets/fonts/trebuc.ttf'),
+    });
+
+    this.setState({ fontLoaded: true });
+  }
+
+  render() {
+    let titre = "";
+    if(this.state.fontLoaded){
+      titre = <Text style={styles.h1} >Bienvenue sur CRS Mons App !</Text>;
+    }else{
+      titre = <Text >Bienvenue sur CRS Mons App !</Text>;
+    }
+    return(
+        <View style={styles.container}>
+          {titre}
+          <TextInput placeholder="Nom d'utilisateur"/>
+          <TextInput placeholder="Mot de passe"/>
+          <Button title='Se connecter'/>
+        </View>
+    )
+        ;
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
+  h1: {
+    paddingTop: 15,
+    fontFamily: 'Trebuchet MS',
+    fontSize: 20,
+    color: '#d7006e',
+    textAlign: 'center'
+  }
 });
+
+export default App;
\ No newline at end of file

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "expo": "^35.0.0",
+    "expo-font": "^7.0.0",
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",