Add individual image screen

App.js

@@ -4,9 +4,15 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {decode, encode} from 'base-64';
 
-import {HomeScreen, LoginScreen, RegistrationScreen} from './src/screens';
+import {
+  HomeScreen,
+  ImageScreen,
+  LoginScreen,
+  RegistrationScreen,
+} from './src/screens';
 import HeaderIcons from './src/components/HeaderIcons';
 import {AuthContext} from './src/lib/context/AuthContext/AuthContextProvider';
+import BackButton from './src/components/BackButton';
 
 if (!global.btoa) {
   global.btoa = encode;
@@ -28,23 +34,38 @@ export default function App({navigation}) {
     <NavigationContainer>
       <Stack.Navigator>
         {currentUser ? (
-          <Stack.Screen
-            name="Home"
-            component={HomeScreen}
-            options={{
-              title: 'Splash',
-              headerStyle: {
-                backgroundColor: '#092235',
-              },
-              headerTintColor: '#fff',
-              headerTitleStyle: {
-                fontWeight: 'bold',
-                fontSize: 30,
-                paddingBottom: 5,
-              },
-              headerRight: () => <HeaderIcons navigation={navigation} />,
-            }}
-          />
+          <>
+            <Stack.Screen
+              name="Home"
+              component={HomeScreen}
+              options={{
+                title: 'Splash',
+                headerStyle: {
+                  backgroundColor: '#092235',
+                },
+                headerTintColor: '#fff',
+                headerTitleStyle: {
+                  fontWeight: 'bold',
+                  fontSize: 30,
+                  paddingBottom: 5,
+                },
+                headerRight: () => <HeaderIcons navigation={navigation} />,
+              }}
+            />
+            <Stack.Screen
+              name="Image"
+              component={ImageScreen}
+              options={() => ({
+                headerTransparent: true,
+                headerStyle: {
+                  backgroundColor: '#000',
+                  opacity: 0.5,
+                },
+                headerTitle: false,
+                headerLeft: () => <BackButton />,
+              })}
+            />
+          </>
         ) : (
           <>
             <Stack.Screen

src/assets/Arrow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {View} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+
+const Arrow = ({color = '#FFF', size = 25}) => {
+  return (
+    <View>
+      <Svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        fill={color}
+        viewBox="0 0 24 24">
+        <Path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
+      </Svg>
+    </View>
+  );
+};
+
+export default Arrow;

src/components/BackButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {TouchableOpacity, StyleSheet} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+import Arrow from '../assets/Arrow';
+
+const BackButton = () => {
+  const navigation = useNavigation();
+
+  const onBackPress = () => {
+    navigation.goBack();
+  };
+
+  return (
+    <TouchableOpacity style={styles.backButton} onPress={onBackPress}>
+      <Arrow />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  backButton: {
+    marginLeft: 20,
+  },
+});
+export default BackButton;

src/components/ImageToolbar.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {Text, View, Image, StyleSheet} from 'react-native';
+import Heart from '../assets/Heart';
+
+const ImageToolbar = ({photo, fullScreen}) => {
+  return (
+    <View
+      style={
+        fullScreen
+          ? {
+              ...styles.bottomToolbar,
+              ...styles.bottomToolbarFillSize,
+            }
+          : styles.bottomToolbar
+      }>
+      <Image
+        style={styles.avatar}
+        source={{uri: photo?.user.profile_image.small}}
+      />
+
+      <Text style={styles.username}>{photo?.user.username}</Text>
+      <View style={styles.heartIcon}>
+        <Heart />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomToolbar: {
+    position: 'absolute',
+    bottom: 0,
+    height: '15%',
+    width: '90%',
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  bottomToolbarFillSize: {
+    width: '100%',
+    height: '10%',
+    paddingBottom: 5,
+  },
+  avatar: {
+    height: 23,
+    width: 23,
+    borderRadius: 16,
+    marginLeft: 7,
+  },
+  username: {
+    fontFamily: 'Helvetica Neue',
+    fontWeight: '300',
+    fontSize: 13,
+    color: '#FFF',
+    paddingLeft: 6,
+    flex: 1,
+  },
+  heartIcon: {
+    marginRight: 12,
+  },
+});
+
+export default ImageToolbar;

src/components/ShareButton.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {Platform, Share, TouchableOpacity, StyleSheet} from 'react-native';
+
+import ShareIcon from '../assets/Share';
+
+const ShareButton = ({data}) => {
+  const {user, links, photo: photoInfo} = data;
+  const photoTitle = photoInfo?.description
+    ? photoInfo?.description
+    : photoInfo?.alt_description;
+  const shareTitle = `${photoTitle} by: ${user?.name}`;
+  const shareUrl = links?.html;
+
+  const shareMessage = () => {
+    if (Platform.OS === 'android') {
+      return `Splash App  ${shareUrl}`;
+    }
+
+    return shareTitle;
+  };
+
+  const onShareMessage = () => {
+    return Share.share(
+      {
+        title: shareTitle,
+        message: shareMessage,
+        url: shareUrl,
+      },
+      {
+        subject: shareTitle,
+      },
+    );
+  };
+
+  return (
+    <TouchableOpacity style={styles.shareButton} onPress={onShareMessage}>
+      <ShareIcon />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  shareButton: {
+    marginRight: 20,
+  },
+});
+export default ShareButton;

src/components/VerticalImageIndex.js

@@ -1,34 +1,45 @@
 import React from 'react';
-import {Text, View, Image, StatusBar, StyleSheet} from 'react-native';
-import Heart from '../assets/Heart';
+import {
+  View,
+  Image,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+import ImageToolbar from './ImageToolbar';
 
 const VerticalImageIndex = ({photo}) => {
+  const navigation = useNavigation();
+
+  const onImagePress = () => {
+    navigation.push('Image', {photo});
+  };
+
   return (
-    <View style={styles.photoContainer} key={photo.id}>
+    <View style={styles.container} key={photo.id}>
       <StatusBar barStyle="light-content" />
-      <Image style={styles.image} source={{uri: photo?.urls.regular}} />
-      <View style={styles.bottomToolbar}>
-        <Image
-          style={styles.avatar}
-          source={{uri: photo?.user.profile_image.small}}
-        />
+      <TouchableOpacity style={styles.photoContainer} onPress={onImagePress}>
+        <Image style={styles.image} source={{uri: photo?.urls.regular}} />
 
-        <Text style={styles.username}>{photo?.user.username}</Text>
-        <View style={styles.heartIcon}>
-          <Heart />
-        </View>
-      </View>
+        <ImageToolbar photo={photo} />
+      </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  photoContainer: {
+  container: {
     alignItems: 'center',
     display: 'flex',
     marginBottom: 14,
     paddingTop: 10,
   },
+  photoContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
   image: {
     width: '90%',
     height: 196,

src/screens/ImageScreen.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {View, StatusBar, ImageBackground, StyleSheet} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+import ShareButton from '../components/ShareButton';
+import ImageToolbar from '../components/ImageToolbar';
+
+const ImageScreen = ({route}) => {
+  const navigation = useNavigation();
+
+  const {photo} = route.params;
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => <ShareButton data={photo} />,
+    });
+  }, [navigation, photo]);
+
+  return (
+    <View style={styles.container}>
+      <ImageBackground source={{uri: photo?.urls.regular}} style={styles.photo}>
+        <StatusBar barStyle="light-content" />
+        <ImageToolbar photo={photo} fullScreen />
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    display: 'flex',
+  },
+  photo: {
+    width: '100%',
+    flex: 1,
+    resizeMode: 'cover',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default ImageScreen;

src/screens/index.js

@@ -2,4 +2,6 @@ export {default as LoginScreen} from './LoginScreen';
 
 export {default as HomeScreen} from './HomeScreen';
 
+export {default as ImageScreen} from './ImageScreen';
+
 export {default as RegistrationScreen} from './RegistrationScreen';