From bb6b2343cc6a0ac041946f3aab0deb586cc6de17 Mon Sep 17 00:00:00 2001 From: Will Larry Date: Fri, 4 Jun 2021 09:48:39 -0400 Subject: [PATCH 1/2] Add bio page to app. - Add ImageSquare component. - Hook up navigation for ImageToolbar component. - Remove Reactron import --- App.js | 17 +++-- src/components/ImageSquare.js | 43 ++++++++++++ src/components/ImageToolbar.js | 19 ++++- src/screens/BioScreen.js | 124 +++++++++++++++++++++++++++++++++ src/screens/HomeScreen.js | 1 - src/screens/index.js | 2 + 6 files changed, 196 insertions(+), 10 deletions(-) create mode 100644 src/components/ImageSquare.js create mode 100644 src/screens/BioScreen.js diff --git a/App.js b/App.js index 8fcfbf9..d875025 100644 --- a/App.js +++ b/App.js @@ -9,6 +9,7 @@ import { ImageScreen, LoginScreen, RegistrationScreen, + BioScreen, } from './src/screens'; import HeaderIcons from './src/components/HeaderIcons'; import {AuthContext} from './src/lib/context/AuthContext/AuthContextProvider'; @@ -55,13 +56,17 @@ export default function App({navigation}) { ({ - name: '', + options={() => ({ + headerTransparent: true, + headerTitle: false, + headerLeft: () => , + })} + /> + ({ headerTransparent: true, - headerStyle: { - backgroundColor: '#000', - opacity: 0.5, - }, headerTitle: false, headerLeft: () => , })} diff --git a/src/components/ImageSquare.js b/src/components/ImageSquare.js new file mode 100644 index 0000000..32d63dd --- /dev/null +++ b/src/components/ImageSquare.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { + View, + Image, + StatusBar, + StyleSheet, + TouchableOpacity, +} from 'react-native'; +import {useNavigation} from '@react-navigation/native'; + +const ImageSquare = ({photo}) => { + const navigation = useNavigation(); + + const onImagePress = () => { + navigation.push('Image', {photo}); + }; + + return ( + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + width: '90%', + }, + photoContainer: { + alignItems: 'center', + }, + image: { + width: '100%', + height: 196, + borderRadius: 4, + }, +}); + +export default ImageSquare; diff --git a/src/components/ImageToolbar.js b/src/components/ImageToolbar.js index deafd22..be3728c 100644 --- a/src/components/ImageToolbar.js +++ b/src/components/ImageToolbar.js @@ -1,8 +1,16 @@ import React from 'react'; -import {Text, View, Image, StyleSheet} from 'react-native'; +import {Text, View, Image, StyleSheet, TouchableOpacity} from 'react-native'; +import {useNavigation} from '@react-navigation/native'; + import Heart from '../assets/Heart'; const ImageToolbar = ({photo, fullScreen}) => { + const navigation = useNavigation(); + + const onUserPress = () => { + navigation.navigate('Bio', {photo}); + }; + return ( { source={{uri: photo?.user.profile_image.small}} /> - {photo?.user.username} + + {photo?.user.username} + @@ -47,7 +57,7 @@ const styles = StyleSheet.create({ borderRadius: 16, marginLeft: 7, }, - username: { + usernameContainer: { fontFamily: 'Helvetica Neue', fontWeight: '300', fontSize: 13, @@ -55,6 +65,9 @@ const styles = StyleSheet.create({ paddingLeft: 6, flex: 1, }, + username: { + color: '#FFF', + }, heartIcon: { marginRight: 12, }, diff --git a/src/screens/BioScreen.js b/src/screens/BioScreen.js new file mode 100644 index 0000000..4d9c39d --- /dev/null +++ b/src/screens/BioScreen.js @@ -0,0 +1,124 @@ +import React, {useEffect, useState} from 'react'; +import { + View, + StatusBar, + Image, + Text, + StyleSheet, + FlatList, + Dimensions, + ImageBackground, +} from 'react-native'; +import config from 'react-native-config'; + +import ImageSquare from '../components/ImageSquare'; + +const screenWidth = Dimensions.get('window').width; + +const BioScreen = ({route}) => { + const {photo} = route.params; + const [photos, setPhotos] = useState([]); + const [pageNumber, setPageNumber] = useState(1); + + useEffect(() => { + loadUserPhotos(); + }, []); + + const loadUserPhotos = () => { + fetch( + `https://api.unsplash.com/users/${photo.user.username}/photos/?client_id=${config.UNSPLASH_APP_CLIENT_ID}&page=${pageNumber}`, + ) + .then(response => response.json()) + .then(data => { + const photosArray = [...photos, ...data]; + setPhotos(photosArray); + setPageNumber(pageNumber + 1); + }) + .catch(e => { + alert(e.message); + }); + }; + const renderPhoto = ({item}) => { + return ( + + + + ); + }; + const renderHeader = () => { + return ( + <> + + + + {photo?.user.username} + {photo?.user?.bio} + + + + ); + }; + + return ( + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + descriptionBio: { + fontSize: 20, + textAlign: 'center', + }, + columns: { + padding: 10, + }, + usernameBio: { + fontWeight: 'bold', + textAlign: 'center', + fontSize: 24, + paddingBottom: 10, + }, + userBioImage: { + width: 180, + height: 180, + borderRadius: 180 / 2, + }, + userBioContainer: { + paddingTop: '35%', + paddingBottom: 25, + width: '90%', + alignItems: 'center', + flex: 1, + }, + userCoverImage: { + position: 'relative', + width: '100%', + flex: 1, + height: '50%', + justifyContent: 'center', + alignItems: 'center', + }, + imageSquareContainer: { + width: screenWidth / 3, + }, +}); +export default BioScreen; diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index 740dfc6..7b013ee 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -1,7 +1,6 @@ import React, {useEffect, useState} from 'react'; import {FlatList, StyleSheet} from 'react-native'; import config from 'react-native-config'; -import Reactotron from 'reactotron-react-native'; import VerticalImageIndex from '../components/VerticalImageIndex'; diff --git a/src/screens/index.js b/src/screens/index.js index 95d059c..a8757d6 100644 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -5,3 +5,5 @@ export {default as HomeScreen} from './HomeScreen'; export {default as ImageScreen} from './ImageScreen'; export {default as RegistrationScreen} from './RegistrationScreen'; + +export {default as BioScreen} from './BioScreen'; From 8d8018d09a0ce721be8d774de19f1b6df5718a7a Mon Sep 17 00:00:00 2001 From: Will Larry Date: Fri, 4 Jun 2021 10:01:11 -0400 Subject: [PATCH 2/2] Fix typo --- src/components/ImageToolbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ImageToolbar.js b/src/components/ImageToolbar.js index be3728c..172a4d8 100644 --- a/src/components/ImageToolbar.js +++ b/src/components/ImageToolbar.js @@ -17,7 +17,7 @@ const ImageToolbar = ({photo, fullScreen}) => { fullScreen ? { ...styles.bottomToolbar, - ...styles.bottomToolbarFillSize, + ...styles.bottomToolbarFullSize, } : styles.bottomToolbar }> @@ -46,7 +46,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', backgroundColor: 'rgba(0, 0, 0, 0.3)', }, - bottomToolbarFillSize: { + bottomToolbarFullSize: { width: '100%', height: '10%', paddingBottom: 5,