From 7f5142f7cb1f72852da5bbf51003b02b3c345b53 Mon Sep 17 00:00:00 2001 From: Will Larry Date: Fri, 28 May 2021 16:40:07 -0400 Subject: [PATCH 1/2] Add image screen to see individual image details --- App.js | 58 +++++++++++++++++-------- src/assets/Arrow.js | 20 +++++++++ src/assets/Share.js | 34 +++++++++++++++ src/components/BackButton.js | 26 ++++++++++++ src/components/ImageToolbar.js | 63 ++++++++++++++++++++++++++++ src/components/ShareButton.js | 47 +++++++++++++++++++++ src/components/VerticalImageIndex.js | 41 +++++++++++------- src/screens/ImageScreen.js | 42 +++++++++++++++++++ src/screens/index.js | 2 + 9 files changed, 300 insertions(+), 33 deletions(-) create mode 100644 src/assets/Arrow.js create mode 100644 src/assets/Share.js create mode 100644 src/components/BackButton.js create mode 100644 src/components/ImageToolbar.js create mode 100644 src/components/ShareButton.js create mode 100644 src/screens/ImageScreen.js diff --git a/App.js b/App.js index 2c448ee..8fcfbf9 100644 --- a/App.js +++ b/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,39 @@ export default function App({navigation}) { {currentUser ? ( - , - }} - /> + <> + , + }} + /> + ({ + name: '', + headerTransparent: true, + headerStyle: { + backgroundColor: '#000', + opacity: 0.5, + }, + headerTitle: false, + headerLeft: () => , + })} + /> + ) : ( <> { + return ( + + + + + + ); +}; + +export default Arrow; diff --git a/src/assets/Share.js b/src/assets/Share.js new file mode 100644 index 0000000..b90dd19 --- /dev/null +++ b/src/assets/Share.js @@ -0,0 +1,34 @@ +import React from 'react'; +import {View} from 'react-native'; +import Svg, {Defs, G, Path, Use} from 'react-native-svg'; + +const Share = ({color = '#FFF', size = 25}) => ( + + + + + + + + + + + + + + + + +); + +export default Share; diff --git a/src/components/BackButton.js b/src/components/BackButton.js new file mode 100644 index 0000000..4751c86 --- /dev/null +++ b/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 ( + + + + ); +}; + +const styles = StyleSheet.create({ + backButton: { + marginLeft: 20, + }, +}); +export default BackButton; diff --git a/src/components/ImageToolbar.js b/src/components/ImageToolbar.js new file mode 100644 index 0000000..deafd22 --- /dev/null +++ b/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 ( + + + + {photo?.user.username} + + + + + ); +}; + +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; diff --git a/src/components/ShareButton.js b/src/components/ShareButton.js new file mode 100644 index 0000000..22b2176 --- /dev/null +++ b/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 ( + + + + ); +}; + +const styles = StyleSheet.create({ + shareButton: { + marginRight: 20, + }, +}); +export default ShareButton; diff --git a/src/components/VerticalImageIndex.js b/src/components/VerticalImageIndex.js index c78caee..04d8981 100644 --- a/src/components/VerticalImageIndex.js +++ b/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 ( - + - - - + + - {photo?.user.username} - - - - + + ); }; const styles = StyleSheet.create({ - photoContainer: { + container: { alignItems: 'center', display: 'flex', marginBottom: 14, paddingTop: 10, }, + photoContainer: { + width: '100%', + alignItems: 'center', + }, image: { width: '90%', height: 196, diff --git a/src/screens/ImageScreen.js b/src/screens/ImageScreen.js new file mode 100644 index 0000000..3ccaf00 --- /dev/null +++ b/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: () => , + }); + }, [navigation, photo]); + + return ( + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + display: 'flex', + }, + photo: { + width: '100%', + flex: 1, + resizeMode: 'cover', + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default ImageScreen; diff --git a/src/screens/index.js b/src/screens/index.js index a055548..95d059c 100644 --- a/src/screens/index.js +++ b/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'; From 8dfe78c456bf517eaa4d47238758205ee7d667ee Mon Sep 17 00:00:00 2001 From: Will Larry Date: Fri, 28 May 2021 16:51:57 -0400 Subject: [PATCH 2/2] Remove unnecessary code --- App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/App.js b/App.js index 8fcfbf9..656df1a 100644 --- a/App.js +++ b/App.js @@ -55,8 +55,7 @@ export default function App({navigation}) { ({ - name: '', + options={() => ({ headerTransparent: true, headerStyle: { backgroundColor: '#000',