fix pages display & texts

react-native/ChatApp/components/DiscussionsScreen.js

@@ -27,6 +27,7 @@ class DiscussionsScreen extends React.Component {
                 icon={<Icon solid name='plus' type='font-awesome-5' />}
                 onPress={() => alert('Nouvelle discussion')}
                 type="clear"
+                containerStyle={{margin: 5}}
               />
             ),
           }}

react-native/ChatApp/components/HomeScreen.js

@@ -3,6 +3,7 @@ import {
   View,
 } from 'react-native';
 import { Text } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/FontAwesome';
 
 class HomeScreen extends React.Component {
 
@@ -15,7 +16,35 @@ class HomeScreen extends React.Component {
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <Text h2>Bienvenue !</Text>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <Text h1>Bienvenue !</Text>
+        </View>
+        <View style={{flex: 4, alignItems: 'center', justifyContent: 'center', paddingBottom: 25}}>
+          <Icon
+            name="comments"
+            size={75}
+            color="dodgerblue"
+          />
+          <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+            ChatApp est une application de discussions instantannées développée sous React Native.
+          </Text>
+          <Icon
+            name="graduation-cap"
+            size={75}
+            color="dodgerblue"
+          />
+          <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+            Travail réalisé en groupe dans le cadre d'un projet tutoré sur une veille technologique en développement mobile.
+          </Text>
+          <Icon
+            name="mobile"
+            size={90}
+            color="dodgerblue"
+          />
+          <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
+          Le but était de comparer et de développer 3 versions d'une même application sous Flutter, Ionic et React Native, l'ensemble communiquant grâce à une même API.
+          </Text>
+        </View>
       </View>
     )
   }

react-native/ChatApp/components/LoginScreen.js

@@ -2,11 +2,14 @@ import React from 'react';
 import {
   View,
   StyleSheet,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,
+  Dimensions
 } from 'react-native';
 import { Input, Button, Text } from 'react-native-elements';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
+const windowHeight = Dimensions.get('window').height;
+
 class LoginScreen extends React.Component {
 
   constructor(props) {
@@ -28,12 +31,11 @@ class LoginScreen extends React.Component {
     return (
         <KeyboardAvoidingView
           behavior="height"
-          style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}
         >
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
             <Text h1>Connexion</Text>
           </View>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
             <Input
               placeholder="Pseudonyme"
               style={{ fontSize: 16, borderBottomColor: "grey" }}
@@ -64,7 +66,7 @@ class LoginScreen extends React.Component {
               }
             />
           </View>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
 
             <Text>
               Pas encore inscrit ?
@@ -84,6 +86,7 @@ class LoginScreen extends React.Component {
 };
 
 const styles = StyleSheet.create({
+  //container global style
   customButton: {
     borderRadius: 1000,
     width: 200,

react-native/ChatApp/components/SignupScreen.js

@@ -2,11 +2,14 @@ import React from 'react';
 import {
   View,
   StyleSheet,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,
+  Dimensions
 } from 'react-native';
 import { Input, Button, Text } from 'react-native-elements';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
+const windowHeight = Dimensions.get('window').height;
+
 class SignupScreen extends React.Component {
 
   constructor(props) {
@@ -29,12 +32,11 @@ class SignupScreen extends React.Component {
     return (
         <KeyboardAvoidingView
           behavior="height"
-          style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}
         >
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
             <Text h1>Inscription</Text>
           </View>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
             <Input
               placeholder="Pseudonyme"
               style={{ fontSize: 16, borderBottomColor: "grey" }}
@@ -73,7 +75,7 @@ class SignupScreen extends React.Component {
               }
             />
           </View>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+          <View style={{ height: windowHeight/3, alignItems: 'center', justifyContent: 'center' }}>
             <Text>
               J'ai déjà un compte
             </Text>
@@ -96,10 +98,6 @@ const styles = StyleSheet.create({
     borderRadius: 1000,
     width: 200,
     textAlign: 'center',
-  },
-  linkText: {
-    color: 'dodgerblue',
-    textDecorationLine: 'underline'
   }
 })