├── .buckconfig ├── .expo-shared └── assets.json ├── .gitattributes ├── .gitignore ├── App.js ├── README.md ├── __tests__ └── App.js ├── app.json ├── assets └── icons │ ├── app-icon.png │ ├── loading-icon-512.png │ └── loading-icon.png ├── babel.config.js ├── components ├── Nav.js ├── NavAbsolute.js └── index.js ├── constants ├── Colors.js └── index.js ├── images ├── iphone11-giphy.gif └── pixel2-giphy.gif ├── index.js ├── metro.config.js ├── mocks └── contact.json ├── package-lock.json ├── package.json ├── screens ├── Product1 │ ├── PhotoButton.js │ ├── Product.js │ ├── ProductStyle.js │ ├── index.js │ └── product.json ├── Profile1 │ ├── Email.js │ ├── Profile.js │ ├── Separator.js │ ├── Tel.js │ ├── constants.js │ └── index.js ├── Profile2 │ ├── Post.js │ ├── Posts.js │ ├── Profile.js │ └── index.js ├── Profile3 │ ├── Post.js │ ├── Posts.js │ ├── Profile.js │ ├── ProfileStyle.js │ ├── contact.json │ └── index.js └── Setting1 │ ├── Chevron.js │ ├── Icon.js │ ├── InfoText.js │ ├── Options.js │ ├── Setting.js │ └── index.js └── utils ├── datetime.js ├── image.js └── index.js /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifacts 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | 61 | # Expo 62 | .expo/* 63 | web-build/ 64 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Icon } from 'react-native-elements' 3 | import { NavigationContainer } from '@react-navigation/native' 4 | import { createStackNavigator } from '@react-navigation/stack' 5 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' 6 | import PropTypes from 'prop-types' 7 | 8 | import Profile1 from './screens/Profile1' 9 | import Profile2 from './screens/Profile2' 10 | import Profile3 from './screens/Profile3' 11 | import Setting1 from './screens/Setting1' 12 | 13 | import Product1 from './screens/Product1' 14 | 15 | import SettingOption1 from './screens/Setting1/Options' 16 | 17 | const Setting1Stack = createStackNavigator() 18 | function SettingsStackScreen() { 19 | return ( 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | const Product1Stack = createStackNavigator() 28 | function Product1StackScreen() { 29 | return ( 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | const Profile1Stack = createStackNavigator() 37 | function Profile1StackScreen() { 38 | return ( 39 | 44 | 45 | 46 | ) 47 | } 48 | 49 | const Profile2Stack = createStackNavigator() 50 | function Profile2StackScreen() { 51 | return ( 52 | 57 | 58 | 59 | ) 60 | } 61 | 62 | const Profile3Stack = createStackNavigator() 63 | function Profile3StackScreen() { 64 | return ( 65 | 70 | 71 | 72 | ) 73 | } 74 | const Tab = createBottomTabNavigator() 75 | 76 | const HomeIcon = ({ focused, tintColor }) => ( 77 | 83 | ) 84 | 85 | export default function App() { 86 | return ( 87 | 88 | ({ 90 | tabBarIcon: props => 91 | })} 92 | tabBarOptions={{ 93 | activeTintColor: 'tomato', 94 | inactiveTintColor: 'gray', 95 | showLabel: false, 96 | showIcon: true, 97 | indicatorStyle: { 98 | backgroundColor: 'transparent', 99 | }, 100 | labelStyle: { 101 | fontSize: 12, 102 | }, 103 | iconStyle: { 104 | width: 30, 105 | height: 30, 106 | }, 107 | style: { 108 | // backgroundColor: 'transparent', 109 | justifyContent: 'center', 110 | }, 111 | }} 112 | > 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | ) 121 | } 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-user-profile 2 | [![Travis](https://api.travis-ci.org/nattatorn-dev/react-native-user-profile.svg)]() 3 | [![Greenkeeper badge](https://badges.greenkeeper.io/nattatorn-dev/react-native-user-profile.svg)]() 4 | [![Known Vulnerabilities](https://snyk.io/test/github/nattatorn-dev/react-native-user-profile/badge.svg?targetFile=package.json)](https://snyk.io/test/github/nattatorn-dev/react-native-user-profile?targetFile=package.json) 5 | [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg)]() 6 | [![GitHub license](https://img.shields.io/github/license/nattatorn-dev/react-native-user-profile.svg)]() 7 | 8 | A react native mobile starter kit, Examples of user profiles screens to help you create component and design 🎨 9 | 10 | ## Expo 38.0.9 11 | ## Find it on Expo 12 | https://expo.io/@nattatorn-dev/expo-react-native-user-profile 13 | 14 | Scan QR Code and Sharing does not support ios 15 | https://blog.expo.io/upcoming-limitations-to-ios-expo-client-8076d01aee1a 16 | 17 | ## Example 18 | Iphone11 19 | ![Iphone11](https://github.com/nattatorn-dev/react-native-user-profile/blob/master/images/iphone11-giphy.gif) 20 | 21 | Pixel2 22 | ![Iphone11](https://github.com/nattatorn-dev/react-native-user-profile/blob/master/images/pixel2-giphy.gif) 23 | 24 | ## Profile1 25 | ![Profile1](https://i.imgur.com/Otl1wox.jpg) 26 | 27 | ## Profile2 28 | ![Profile2](https://i.imgur.com/xT9pole.jpg) 29 | 30 | ## Profile3 31 | ![Profile3](https://i.imgur.com/Le5gqwL.jpg) 32 | 33 | ## Profile4 34 | ![Profile4](https://i.imgur.com/9TiMIB9.jpg) 35 | 36 | ## Product1 37 | ![Product1](https://i.imgur.com/3maoUqy.jpg) 38 | 39 | ## Features 40 | - Carefully crafted user experience and design 41 | - Clean and comprehensive codebase 42 | 43 | ## Install 44 | - Git clone the repository. 45 | - In the repo directory, run "npm install" to install dependencies 46 | - If you have a problem with react-natigation, Do this https://reactnavigation.org/docs/getting-started 47 | - Run "exp start" to initiate expo. Then, you will see instructions to run a demo on a real device or a simulator. 48 | 49 | 50 | ## Made with help of 51 | - [react-native](https://github.com/facebook/react-native) 52 | - [react-native-elements](https://github.com/react-native-training/react-native-elements) 53 | - [react-navigation](https://github.com/react-community/react-navigation) 54 | - [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view) 55 | 56 | ## License 57 | [MIT](LICENSE) license. 58 | 59 | ## How can I support developers? 60 | - Star our GitHub repo :star: 61 | - Create pull requests, submit bugs, suggest new features or documentation updates :wrench: 62 | 63 | We're always happy to receive your feedback! 64 | -------------------------------------------------------------------------------- /__tests__/App.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import App from '../App'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | renderer.create(); 10 | }); 11 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expo-react-native-user-profile", 3 | "displayName": "expo react native user profile", 4 | "expo": { 5 | "name": "expo-react-native-user-profile", 6 | "description": "An empty new project", 7 | "slug": "expo-react-native-user-profile", 8 | "version": "1.0.0", 9 | "assetBundlePatterns": [ 10 | "**/*" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /assets/icons/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nattatorn-dev/react-native-user-profile/1b3a05983fa4af4b1c52f9fbe107fd2c3b44083a/assets/icons/app-icon.png -------------------------------------------------------------------------------- /assets/icons/loading-icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nattatorn-dev/react-native-user-profile/1b3a05983fa4af4b1c52f9fbe107fd2c3b44083a/assets/icons/loading-icon-512.png -------------------------------------------------------------------------------- /assets/icons/loading-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nattatorn-dev/react-native-user-profile/1b3a05983fa4af4b1c52f9fbe107fd2c3b44083a/assets/icons/loading-icon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, Text, View } from 'react-native' 3 | import { Icon } from 'react-native-elements' 4 | import { Platform } from 'react-native' 5 | import PropTypes from 'prop-types' 6 | 7 | import { Colors } from '../constants' 8 | 9 | const styles = StyleSheet.create({ 10 | centerRow: { 11 | alignItems: 'center', 12 | backgroundColor: 'transparent', 13 | flex: 2, 14 | flexDirection: 'row', 15 | justifyContent: 'center', 16 | }, 17 | container: { 18 | flexDirection: 'row', 19 | ...Platform.select({ 20 | ios: { 21 | height: 55, 22 | }, 23 | android: { 24 | height: 80, 25 | }, 26 | }), 27 | justifyContent: 'center', 28 | marginLeft: 10, 29 | marginRight: 10, 30 | }, 31 | icon: { 32 | justifyContent: 'flex-start', 33 | marginTop: 2.8, 34 | }, 35 | iconContainer: { 36 | alignSelf: 'center', 37 | }, 38 | leftRow: { 39 | backgroundColor: 'transparent', 40 | flex: 1, 41 | flexDirection: 'row', 42 | justifyContent: 'flex-start', 43 | }, 44 | logoutText: { 45 | color: Colors.blue, 46 | fontSize: 18, 47 | fontWeight: '400', 48 | }, 49 | rightRow: { 50 | alignItems: 'center', 51 | backgroundColor: 'transparent', 52 | flex: 1, 53 | flexDirection: 'row', 54 | justifyContent: 'flex-end', 55 | }, 56 | titleText: { 57 | color: 'black', 58 | fontSize: 18, 59 | fontWeight: '400', 60 | }, 61 | }) 62 | 63 | const Search = ({ title, navigation, leftIcon }) => ( 64 | 65 | 66 | 67 | navigation.goBack(null)} 78 | {...leftIcon} 79 | /> 80 | 81 | 82 | 83 | {title} 84 | 85 | 86 | 87 | Log out 88 | 89 | 90 | 91 | ) 92 | 93 | Search.propTypes = { 94 | title: PropTypes.string.isRequired, 95 | navigation: PropTypes.object.isRequired, 96 | leftIcon: PropTypes.object, 97 | } 98 | 99 | Search.defaultProps = { 100 | leftIcon: {}, 101 | } 102 | 103 | export default Search 104 | -------------------------------------------------------------------------------- /components/NavAbsolute.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { StyleSheet, Text, View } from 'react-native' 3 | import { Icon } from 'react-native-elements' 4 | import PropTypes from 'prop-types' 5 | 6 | import { Colors } from '../constants' 7 | 8 | const styles = StyleSheet.create({ 9 | centerRow: { 10 | alignItems: 'flex-start', 11 | backgroundColor: 'transparent', 12 | flex: 3, 13 | flexDirection: 'column', 14 | justifyContent: 'center', 15 | }, 16 | 17 | container: { 18 | backgroundColor: 'transparent', 19 | borderBottomWidth: 0, 20 | elevation: 0, 21 | flexDirection: 'row', 22 | height: 125, 23 | justifyContent: 'center', 24 | left: 0, 25 | marginLeft: 10, 26 | marginRight: 10, 27 | position: 'absolute', 28 | right: 0, 29 | zIndex: 100, 30 | }, 31 | icon: { 32 | justifyContent: 'flex-start', 33 | marginTop: 2.8, 34 | }, 35 | iconContainer: { 36 | alignSelf: 'center', 37 | }, 38 | leftRow: { 39 | backgroundColor: 'transparent', 40 | flex: 1, 41 | flexDirection: 'row', 42 | justifyContent: 'flex-start', 43 | }, 44 | rightRow: { 45 | alignItems: 'flex-end', 46 | backgroundColor: 'transparent', 47 | flex: 2, 48 | flexDirection: 'row', 49 | justifyContent: 'flex-end', 50 | marginRight: 4, 51 | }, 52 | titleText: { 53 | color: Colors.white, 54 | fontSize: 24, 55 | fontWeight: '600', 56 | }, 57 | subTitleText: { 58 | color: Colors.white, 59 | fontSize: 14, 60 | fontWeight: '400', 61 | }, 62 | }) 63 | 64 | class Nav extends Component { 65 | static propTypes = { 66 | navigation: PropTypes.object.isRequired, 67 | title: PropTypes.string.isRequired, 68 | subTitle: PropTypes.string.isRequired, 69 | } 70 | 71 | state = { 72 | like: false, 73 | } 74 | 75 | onPressLike = () => { 76 | this.setState(state => ({ 77 | like: !state.like, 78 | })) 79 | } 80 | 81 | render() { 82 | const { navigation, title, subTitle } = this.props 83 | 84 | return ( 85 | 86 | 87 | 88 | 99 | 100 | 101 | 102 | {title} 103 | 104 | 105 | {subTitle} 106 | 107 | 108 | 109 | 121 | null} 127 | iconStyle={styles.icon} 128 | underlayColor="transparent" 129 | underlineColorAndroid="transparent" 130 | containerStyle={styles.iconContainer} 131 | hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }} 132 | /> 133 | 134 | 135 | 136 | ) 137 | } 138 | } 139 | 140 | export default Nav 141 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Nav } from './Nav' 2 | export { default as NavAbsolute } from './NavAbsolute' 3 | -------------------------------------------------------------------------------- /constants/Colors.js: -------------------------------------------------------------------------------- 1 | // https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/ 2 | 3 | const colors = { 4 | red: '#FF3B30', 5 | orange: '#FF9500', 6 | yellow: '#FFCC00', 7 | green: '#4CD964', 8 | tealBlue: '#5AC8FA', 9 | blue: '#007AFF', 10 | purple: '#5856D6', 11 | pink: '#FF2D55', 12 | 13 | white: '#FFFFFF', 14 | customGray: '#EFEFF4', 15 | lightGray: '#E5E5EA', 16 | lightGray2: '#D1D1D6', 17 | midGray: '#C7C7CC', 18 | gray: '#8E8E93', 19 | black: '#000000', 20 | } 21 | 22 | export default colors 23 | -------------------------------------------------------------------------------- /constants/index.js: -------------------------------------------------------------------------------- 1 | export { default as Colors } from './Colors' 2 | -------------------------------------------------------------------------------- /images/iphone11-giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nattatorn-dev/react-native-user-profile/1b3a05983fa4af4b1c52f9fbe107fd2c3b44083a/images/iphone11-giphy.gif -------------------------------------------------------------------------------- /images/pixel2-giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nattatorn-dev/react-native-user-profile/1b3a05983fa4af4b1c52f9fbe107fd2c3b44083a/images/pixel2-giphy.gif -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in the Expo client or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transformer: { 3 | assetPlugins: ['expo-asset/tools/hashAssetFiles'], 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /mocks/contact.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Darrell Schmeler", 3 | "username": "Leola_VonRueden", 4 | "address": { 5 | "streetA": "Abbott Shoals", 6 | "streetB": "505 Winona Place", 7 | "streetC": "4306 Hudson Street Suite 875", 8 | "streetD": "Suite 489", 9 | "city": "Ginatown", 10 | "state": "Massachusetts", 11 | "country": "Nepal", 12 | "zipcode": "41428-0189", 13 | "geo": { 14 | "lat": "-75.8513", 15 | "lng": "81.3262" 16 | } 17 | }, 18 | "website": "destany.org", 19 | "bio": 20 | "Web & Mobile UI/UX designer, Motion designer following the latest ui & ux trends", 21 | "company": { 22 | "name": "Streich, Harber and Hilpert", 23 | "catchPhrase": "Team-oriented hybrid neural-net", 24 | "bs": "user-centric embrace vortals" 25 | }, 26 | "avatar": "https://i.imgur.com/GfkNpVG.jpg", 27 | "avatarBackground": 28 | "https://i.imgur.com/rXVcgTZ.jpg", 29 | "tels": [ 30 | { "id": 1, "name": "Mobile", "number": "+66 (089)-928-2134" }, 31 | { "id": 2, "name": "Work", "number": "+41 (112)-435-9887" } 32 | ], 33 | "emails": [ 34 | { "id": 1, "name": "Personal", "email": "elsie-goodman@mail.com" }, 35 | { "id": 2, "name": "Work", "email": "elsie@work.com" } 36 | ], 37 | "posts": [ 38 | { 39 | "id": 1, 40 | "words": "cupiditate qui cum", 41 | "sentence": "Ipsum laborum quasi debitis dolores veniam.", 42 | "sentences": 43 | "Impedit veritatis harum nihil dolores dolorem optio assumenda. Laborum saepe voluptas officia odit. Ut voluptas mollitia mollitia eum autem quisquam qui aut. Et ipsa hic harum molestias et quam qui cum. Sint sit soluta.", 44 | "paragraph": 45 | "Beatae voluptas ea magni quibusdam dolorem sit aut qui. Dolorem rerum et consequuntur inventore officia excepturi dolore architecto fuga. Quia consequatur asperiores rerum qui corporis dolorum. At harum velit adipisci iste odit modi veniam ut. Deserunt quibusdam velit non ea.", 46 | "image": 47 | "https://d25tv1xepz39hi.cloudfront.net/2016-12-19/files/foodphotoghacks_image8.jpg", 48 | "createdDate": "2017-11-21T02:33:53.770Z", 49 | "user": { 50 | "name": "Ronaldo", 51 | "username": "Ronaldo.Effertz", 52 | "avatar": 53 | "https://s3.amazonaws.com/uifaces/faces/twitter/samuelkraft/128.jpg", 54 | "email": "Ronaldo.Effertz.Deckow@hotmail.com" 55 | } 56 | }, 57 | { 58 | "id": 2, 59 | "words": "est voluptatum aut", 60 | "sentence": "Omnis omnis aut dolor quaerat sunt et optio.", 61 | "sentences": 62 | "Nam numquam magni saepe. Deserunt aspernatur dolorem libero soluta sint molestias et sint sed. Maiores id quis assumenda voluptates quos ut saepe officia voluptatem. Ea placeat sed ut. Modi sed earum voluptas cumque unde eum doloribus ipsam.", 63 | "paragraph": 64 | "Quam aut reprehenderit asperiores aut. Sunt quis aspernatur incidunt. Illo et perferendis ex incidunt eos ut maxime dolorem voluptatem. Qui rem nihil quos cumque eum doloribus. Quae beatae tempore commodi.", 65 | "createdDate": "2017-11-20T18:04:58.858Z", 66 | "user": { 67 | "name": "Markus", 68 | "username": "Markus.Price68", 69 | "avatar": 70 | "https://s3.amazonaws.com/uifaces/faces/twitter/kikillo/128.jpg", 71 | "email": "Markus.Price68.Dicki@yahoo.com" 72 | } 73 | }, 74 | { 75 | "id": 3, 76 | "words": "vitae voluptas quia", 77 | "sentence": "Voluptates dolor ad rem amet voluptas.", 78 | "sentences": 79 | "Rem ipsum quis. Animi ipsum ut at possimus. Beatae molestiae non odio soluta quidem ut suscipit.", 80 | "paragraph": 81 | "Veniam veritatis nihil illum rerum et. Temporibus facere sed delectus corporis alias. Et odio aliquid est. Quas sit et quia tempora sit eveniet quam.", 82 | "createdDate": "2017-03-24T10:56:15.461Z", 83 | "image": "https://touristmeetstraveler.com/wp-content/uploads/sushi.jpg", 84 | "user": { 85 | "name": "Magali", 86 | "username": "Magali16", 87 | "avatar": 88 | "https://s3.amazonaws.com/uifaces/faces/twitter/mastermindesign/128.jpg", 89 | "email": "Magali1664@gmail.com" 90 | } 91 | } 92 | ] 93 | } 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-user-profile", 3 | "version": "0.0.3", 4 | "description": "Hello Expo!", 5 | "author": "nattatorn-dev", 6 | "main": "index.js", 7 | "scripts": { 8 | "android": "react-native run-android", 9 | "ios": "react-native run-ios", 10 | "web": "expo start", 11 | "start": "expo start", 12 | "test": "jest" 13 | }, 14 | "dependencies": { 15 | "@react-native-community/masked-view": "0.1.10", 16 | "@react-navigation/bottom-tabs": "^5.8.0", 17 | "@react-navigation/native": "^5.7.3", 18 | "@react-navigation/stack": "^5.9.0", 19 | "expo": "~38.0.9", 20 | "expo-splash-screen": "^0.5.0", 21 | "expo-status-bar": "^1.0.0", 22 | "expo-updates": "~0.2.10", 23 | "react": "~16.11.0", 24 | "react-dom": "~16.11.0", 25 | "react-native": "~0.62.2", 26 | "react-native-elements": "^2.2.1", 27 | "react-native-gesture-handler": "~1.6.0", 28 | "react-native-reanimated": "~1.9.0", 29 | "react-native-safe-area-context": "~3.0.7", 30 | "react-native-screens": "~2.9.0", 31 | "react-native-tab-view": "^2.15.1", 32 | "react-native-unimodules": "~0.10.1", 33 | "react-native-web": "~0.11.7" 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "~7.9.0", 37 | "babel-jest": "~25.2.6", 38 | "jest": "~25.2.6", 39 | "react-test-renderer": "~16.11.0" 40 | }, 41 | "jest": { 42 | "preset": "react-native" 43 | }, 44 | "private": true 45 | } 46 | -------------------------------------------------------------------------------- /screens/Product1/PhotoButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, View } from 'react-native' 3 | import { Button, Icon } from 'react-native-elements' 4 | 5 | import ProductStyles from './ProductStyle' 6 | 7 | const styles = StyleSheet.create({ ...ProductStyles }) 8 | 9 | const PhotoButton = () => ( 10 | 11 |