add nav bar

.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/https:/codefirst.iut.uca.fr/git/bastien.ollier/geniusApp.git" vcs="Git" />
   </component>
 </project>

App.js

@@ -1,21 +1,29 @@
-import { StatusBar } from 'expo-status-bar';
+import {SafeAreaView, StyleSheet} from 'react-native';
-import { StyleSheet, Text, View } from 'react-native';
+import Navigation from "./componente/NavigationBar";
+
 import ArtistCard from './componente/ArtistCard';
+import ArtistPage from "./componente/ArtistePage";
 
 export default function App() {
+  //<ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
+    //        <ArtistPage name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
   return (
-    <View style={styles.container}>
+    <>
-      <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}></ArtistCard>
+        <SafeAreaView style={styles.topSafeArea}/>
-      <StatusBar style="auto" />
+        <SafeAreaView style={styles.mainSafeArea}>
-    </View>
+            <Navigation/>
+        </SafeAreaView>
+    </>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+    mainSafeArea: {
         flex: 1,
-    backgroundColor: '#fff',
+        backgroundColor: "#7a96e9"
-    alignItems: 'center',
-    justifyContent: 'center',
     },
+    topSafeArea: {
+        flex: 0,
+        backgroundColor: 'darksalmon'
+    }
 });

componente/ArtistePage.js

@@ -12,14 +12,17 @@ const ArtistPage = ({ name, imageUri }) => {
 
 const styles = StyleSheet.create({
     container: {
-        alignItems: 'center',
+        marginTop:40,
-        justifyContent: 'center',
+        alignItems: 'center'
+
     },
     image: {
-        width: 200,
+        width: 150,
-        height: 200,
+        height: 150,
-        borderRadius: 100,
         marginBottom: 10,
+        borderRadius: 100,
+        borderWidth: 2,
+        borderColor: 'black'
     },
     name: {
         fontSize: 20,

componente/NavigationBar.js

@@ -0,0 +1,25 @@
+import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
+import {NavigationContainer} from "@react-navigation/native";
+import ArtistPage from "./ArtistePage";
+import {AntDesign, Ionicons} from '@expo/vector-icons';
+import {StyleSheet} from "react-native";
+import SettingsPage from "./SettingsPage";
+
+export default function Navigation() {
+    const BottomTabNavigator = createBottomTabNavigator();
+    return (
+        <NavigationContainer>
+            <BottomTabNavigator.Navigator initialRouteName="Home">
+                <BottomTabNavigator.Screen name="Home" component={ArtistPage} options={{
+                    title: 'Home',
+                    tabBarIcon: () => (<AntDesign name="home" size={24} color="black" />)
+                }}/>
+                <BottomTabNavigator.Screen name="Settings" component={SettingsPage} options={{
+                    title: 'Settings',
+                    tabBarIcon: () => (<Ionicons name="settings-outline" size={24} color="black" />)
+                }}/>
+            </BottomTabNavigator.Navigator>
+        </NavigationContainer>
+    )
+}
+

componente/SettingsPage.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const SettingsPage = () => {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.name}>Settings</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop:40,
+        alignItems: 'center'
+
+    },
+    name: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+});
+
+export default SettingsPage;

package.json

@@ -10,16 +10,20 @@
   },
   "dependencies": {
     "@expo/ngrok": "^4.1.0",
+    "@expo/vector-icons": "^13.0.0",
     "@extra-fs/promises": "^3.1.4",
+    "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/native": "^6.1.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "expo": "^48.0.4",
+    "expo": "^48.0.5",
     "expo-cli": "^6.3.2",
-    "expo-status-bar": "~1.4.2",
+    "expo-status-bar": "~1.4.4",
     "fs-promise": "^2.0.3",
-    "react": "18.1.0",
+    "react": "18.2.0",
-    "react-native": "0.70.5",
+    "react-native": "0.71.3",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1"
+    "redux": "^4.2.1",
+    "react-native-safe-area-context": "4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"