enhanced About screen

assets/styles/styles.js

@@ -38,8 +38,7 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 18,
-		color: colors.white,
-		// fontFamily: "Source Sans Pro"
+		color: colors.white
 	},
 	link: {
 		fontSize: 18,
@@ -268,12 +267,29 @@ export default StyleSheet.create({
 	aboutContainer: {
 		flex: 1,
 		marginVertical: 32,
-		textAlign: 'left'
+		textAlign: 'left',
+		alignItems: 'center'
 	},
 	aboutTitle: {
 		fontSize: 20,
 		fontWeight: 'bold',
-		marginTop: 16,
-		marginBottom: 8
+		marginTop: 8
+	},
+	aboutImage: {
+		width: 80,
+		height: 80,
+		borderRadius: 80,
+		borderColor: colors.orange,
+		borderWidth: 1
+	},
+	aboutVersion: {
+		marginBottom: 16,
+		marginRight: 32,
+		width: "100%"
+	},
+	aboutVersionText: {
+		fontSize: 12,
+		color: colors.secondary,
+		textAlign: 'right'
 	}
 });

components/AboutScreen.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	View,
 	Image,
@@ -15,23 +15,33 @@ const AboutScreen = () => {
 			if (supported) Linking.openURL(url).catch(() => {});
 		}).catch(() => {});
 	}
+
+	useEffect(() => {
+		Image.resolveAssetSource({ uri: '../assets/img/about_icon.png' });
+	}, []);
+
 	return (
 		<BackgroundImage>
 			<View style={styles.container}>
 				<View style={styles.container}>
 					<View style={styles.aboutContainer}>
-						<Text style={[styles.text, styles.aboutTitle]}>Team Scantrad France :</Text>
+						<Image style={styles.aboutImage} source={require('../assets/img/about_icon.png')}></Image>
+						<Text style={[styles.text, styles.aboutTitle]}>Team Scantrad France</Text>
 						<Text style={styles.text}>Équipe de traduction de divers mangas.</Text>
 						<Text style={styles.link} onPress={() => openURL("https://linktr.ee/scantradfrance")}>Linktree</Text>
 					</View>
 				</View>
 				<View style={styles.container}>
 					<View style={styles.aboutContainer}>
-						<Text style={[styles.text, styles.aboutTitle]}>Dastan21 :</Text>
+						<Image style={styles.aboutImage} source={{ uri: "https://avatars.githubusercontent.com/u/58090137?v=4" }}></Image>
+						<Text style={[styles.text, styles.aboutTitle]}>Dastan21</Text>
 						<Text style={styles.text}>Développeur de l'application mobile.</Text>
 						<Text style={styles.link} onPress={() => openURL("https://github.com/Dastan21")}>Github</Text>
 					</View>
 				</View>
+				<View style={styles.aboutVersion}>
+					<Text style={[styles.text, styles.aboutVersionText]}>v2.2.1</Text>
+				</View>
 			</View>
 		</BackgroundImage>
 	);

components/ChapterScreen.js

@@ -140,9 +140,10 @@ const ChapterScreen = ({ navigation, route }) => {
 	}
 
 	useEffect(() => {
+		Image.resolveAssetSource({uri: '../assets/img/settings.png'});
+
 		updateHeader();
 		loadChapterPages();
-		Image.resolveAssetSource({uri: '../assets/img/settings.png'});
 	}, []);
 
 	useEffect(() => {