├── .gitignore
├── .watchmanconfig
├── App.js
├── README.md
├── app.json
├── assets
    ├── fonts
    │   └── SpaceMono-Regular.ttf
    └── images
    │   ├── icon.png
    │   ├── men
    │       ├── men1.jpg
    │       ├── men10.jpg
    │       ├── men11.jpg
    │       ├── men12.jpg
    │       ├── men13.jpg
    │       ├── men14.jpg
    │       ├── men15.jpg
    │       ├── men2.jpg
    │       ├── men3.jpg
    │       ├── men4.jpg
    │       ├── men5.jpg
    │       ├── men6.jpg
    │       ├── men7.jpg
    │       ├── men8.jpg
    │       └── men9.jpg
    │   ├── splash.png
    │   └── women
    │       ├── women1.jpg
    │       ├── women10.jpg
    │       ├── women11.jpg
    │       ├── women12.jpg
    │       ├── women13.jpg
    │       ├── women14.jpg
    │       ├── women15.jpg
    │       ├── women2.jpg
    │       ├── women3.jpg
    │       ├── women4.jpg
    │       ├── women5.jpg
    │       ├── women6.jpg
    │       ├── women7.jpg
    │       ├── women8.jpg
    │       └── women9.jpg
├── babel.config.js
├── components
    ├── Card.js
    └── TabBarIcon.js
├── constants
    ├── Colors.js
    ├── Layout.js
    ├── Messages.js
    └── Pics.js
├── navigation
    ├── AppNavigator.js
    └── MainTabNavigator.js
├── package.json
├── screens
    ├── HomeScreen.js
    ├── MessagesScreen.js
    ├── ProfileScreen.js
    └── TopPicksScreen.js
├── swipe.gif
├── utils
    ├── randomNo.js
    └── shuffleArray.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 | *.jks
5 | *.p12
6 | *.key
7 | *.mobileprovision
8 | 
9 | .DS_Store


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import { AppLoading, Asset, Font, Icon } from 'expo'
 2 | import React from 'react'
 3 | import { StatusBar, StyleSheet, View } from 'react-native'
 4 | import AppNavigator from './navigation/AppNavigator'
 5 | 
 6 | export default class App extends React.Component {
 7 |   state = {
 8 |     isLoadingComplete: false,
 9 |   }
10 | 
11 |   render() {
12 |     if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
13 |       return (
14 |         <AppLoading
15 |           startAsync={this._loadResourcesAsync}
16 |           onError={this._handleLoadingError}
17 |           onFinish={this._handleFinishLoading}
18 |         />
19 |       )
20 |     } else {
21 |       return (
22 |         <View style={styles.container}>
23 |           <StatusBar hidden />
24 |           <AppNavigator />
25 |         </View>
26 |       )
27 |     }
28 |   }
29 | 
30 |   _loadResourcesAsync = async () => {
31 |     return Promise.all([
32 |       Asset.loadAsync([
33 |         require('./assets/images/splash.png'),
34 |         require('./assets/images/icon.png'),
35 |       ]),
36 |       Font.loadAsync({
37 |         // This is the font that we are using for our tab bar
38 |         ...Icon.MaterialIcons.font,
39 |         ...Icon.MaterialCommunityIcons.font,
40 |         ...Icon.FontAwesome.font,
41 |         ...Icon.Feather.font,
42 |       }),
43 |     ])
44 |   }
45 | 
46 |   _handleLoadingError = error => {
47 |     // In this case, you might want to report the error to your error
48 |     // reporting service, for example Sentry
49 |     console.warn(error)
50 |   }
51 | 
52 |   _handleFinishLoading = () => {
53 |     this.setState({ isLoadingComplete: true })
54 |   }
55 | }
56 | 
57 | const styles = StyleSheet.create({
58 |   container: {
59 |     flex: 1,
60 |     backgroundColor: '#fff',
61 |   },
62 | })
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # expo-tinder
2 | 
3 | > Tinder Clone using Expo and React Native Elements
4 | 
5 | ![Tinder Swipe GIF](./swipe.gif)


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "expo-tinder",
 4 |     "slug": "expo-tinder",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "32.0.0",
 7 |     "platforms": ["ios", "android"],
 8 |     "version": "1.0.0",
 9 |     "orientation": "portrait",
10 |     "icon": "./assets/images/icon.png",
11 |     "splash": {
12 |       "image": "./assets/images/splash.png",
13 |       "resizeMode": "contain",
14 |       "backgroundColor": "#ffffff"
15 |     },
16 |     "updates": {
17 |       "fallbackToCacheTimeout": 0
18 |     },
19 |     "assetBundlePatterns": ["**/*"],
20 |     "ios": {
21 |       "supportsTablet": true
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/men/men1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men1.jpg


--------------------------------------------------------------------------------
/assets/images/men/men10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men10.jpg


--------------------------------------------------------------------------------
/assets/images/men/men11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men11.jpg


--------------------------------------------------------------------------------
/assets/images/men/men12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men12.jpg


--------------------------------------------------------------------------------
/assets/images/men/men13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men13.jpg


--------------------------------------------------------------------------------
/assets/images/men/men14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men14.jpg


--------------------------------------------------------------------------------
/assets/images/men/men15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men15.jpg


--------------------------------------------------------------------------------
/assets/images/men/men2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men2.jpg


--------------------------------------------------------------------------------
/assets/images/men/men3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men3.jpg


--------------------------------------------------------------------------------
/assets/images/men/men4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men4.jpg


--------------------------------------------------------------------------------
/assets/images/men/men5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men5.jpg


--------------------------------------------------------------------------------
/assets/images/men/men6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men6.jpg


--------------------------------------------------------------------------------
/assets/images/men/men7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men7.jpg


--------------------------------------------------------------------------------
/assets/images/men/men8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men8.jpg


--------------------------------------------------------------------------------
/assets/images/men/men9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/men/men9.jpg


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/splash.png


--------------------------------------------------------------------------------
/assets/images/women/women1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women1.jpg


--------------------------------------------------------------------------------
/assets/images/women/women10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women10.jpg


--------------------------------------------------------------------------------
/assets/images/women/women11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women11.jpg


--------------------------------------------------------------------------------
/assets/images/women/women12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women12.jpg


--------------------------------------------------------------------------------
/assets/images/women/women13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women13.jpg


--------------------------------------------------------------------------------
/assets/images/women/women14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women14.jpg


--------------------------------------------------------------------------------
/assets/images/women/women15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women15.jpg


--------------------------------------------------------------------------------
/assets/images/women/women2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women2.jpg


--------------------------------------------------------------------------------
/assets/images/women/women3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women3.jpg


--------------------------------------------------------------------------------
/assets/images/women/women4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women4.jpg


--------------------------------------------------------------------------------
/assets/images/women/women5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women5.jpg


--------------------------------------------------------------------------------
/assets/images/women/women6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women6.jpg


--------------------------------------------------------------------------------
/assets/images/women/women7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women7.jpg


--------------------------------------------------------------------------------
/assets/images/women/women8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women8.jpg


--------------------------------------------------------------------------------
/assets/images/women/women9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/assets/images/women/women9.jpg


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/components/Card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Platform, StyleSheet } from 'react-native'
 3 | import { Tile } from 'react-native-elements'
 4 | import Layout from '../constants/Layout'
 5 | 
 6 | const BOTTOM_BAR_HEIGHT = !Platform.isPad ? 29 : 49 // found from https://stackoverflow.com/a/50318831/6141587
 7 | 
 8 | export const Card = ({ pic, title, caption }) => (
 9 |   <Tile
10 |     imageSrc={pic}
11 |     imageContainerStyle={styles.imageContainer}
12 |     activeOpacity={0.9}
13 |     title={title}
14 |     titleStyle={styles.title}
15 |     caption={caption}
16 |     captionStyle={styles.caption}
17 |     containerStyle={styles.container}
18 |     featured
19 |   />
20 | )
21 | 
22 | const styles = StyleSheet.create({
23 |   container: {
24 |     flex: 1,
25 |     alignItems: 'center',
26 |   },
27 |   imageContainer: {
28 |     width: Layout.window.width - 30,
29 |     height: Layout.window.height - BOTTOM_BAR_HEIGHT * 6,
30 |     borderRadius: 20,
31 |     overflow: 'hidden', // this does magic
32 |   },
33 |   title: {
34 |     position: 'absolute',
35 |     left: 10,
36 |     bottom: 30,
37 |   },
38 |   caption: {
39 |     position: 'absolute',
40 |     left: 10,
41 |     bottom: 10,
42 |   },
43 | })
44 | 


--------------------------------------------------------------------------------
/components/TabBarIcon.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Colors from '../constants/Colors'
 3 | 
 4 | export default class TabBarIcon extends React.Component {
 5 |   render() {
 6 |     const { Icon, name, focused } = this.props
 7 |     return (
 8 |       <Icon
 9 |         name={name}
10 |         size={26}
11 |         style={{ marginBottom: -3 }}
12 |         color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
13 |       />
14 |     )
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/constants/Colors.js:
--------------------------------------------------------------------------------
 1 | const tintColor = '#2f95dc';
 2 | 
 3 | export default {
 4 |   tintColor,
 5 |   tabIconDefault: '#ccc',
 6 |   tabIconSelected: tintColor,
 7 |   tabBar: '#fefefe',
 8 |   errorBackground: 'red',
 9 |   errorText: '#fff',
10 |   warningBackground: '#EAEB5E',
11 |   warningText: '#666804',
12 |   noticeBackground: tintColor,
13 |   noticeText: '#fff',
14 | };
15 | 


--------------------------------------------------------------------------------
/constants/Layout.js:
--------------------------------------------------------------------------------
 1 | import { Dimensions } from 'react-native'
 2 | 
 3 | const width = Dimensions.get('window').width
 4 | const height = Dimensions.get('window').height
 5 | 
 6 | export default {
 7 |   window: {
 8 |     width,
 9 |     height,
10 |   },
11 |   isSmallDevice: width < 375,
12 | }
13 | 


--------------------------------------------------------------------------------
/constants/Messages.js:
--------------------------------------------------------------------------------
 1 | import shuffleArray from '../utils/shuffleArray'
 2 | 
 3 | export const Messages = shuffleArray([
 4 |   {
 5 |     pic: require('../assets/images/women/women1.jpg'),
 6 |     title: 'Amelia, 27',
 7 |     message: "Let's get to your favorite restaurant.",
 8 |   },
 9 |   {
10 |     pic: require('../assets/images/women/women2.jpg'),
11 |     title: 'Joanna, 19',
12 |     message: "What's the best way to win you over?",
13 |   },
14 |   {
15 |     pic: require('../assets/images/men/men2.jpg'),
16 |     title: 'Novak, 27',
17 |     message: 'Will catch up with you later.',
18 |   },
19 |   {
20 |     pic: require('../assets/images/men/men3.jpg'),
21 |     title: 'Justin, 32',
22 |     message: 'Probably not going to work out :(',
23 |   },
24 |   {
25 |     pic: require('../assets/images/women/women3.jpg'),
26 |     title: 'Charlie, 32',
27 |     message: 'How about we go for a coffee on Sunday?',
28 |   },
29 | 
30 |   {
31 |     pic: require('../assets/images/women/women5.jpg'),
32 |     title: 'Lucy, 27',
33 |     message: 'Sleeping for now.',
34 |   },
35 |   {
36 |     pic: require('../assets/images/men/men1.jpg'),
37 |     title: 'Aaron, 24',
38 |     message: 'See you soon.',
39 |   },
40 |   {
41 |     pic: require('../assets/images/men/men4.jpg'),
42 |     title: 'Tony, 21',
43 |     message: 'Seriously, come on time.',
44 |   },
45 |   {
46 |     pic: require('../assets/images/men/men5.jpg'),
47 |     title: 'Leo, 30',
48 |     message: "What'd you like?",
49 |   },
50 |   {
51 |     pic: require('../assets/images/women/women4.jpg'),
52 |     title: 'Mary, 23',
53 |     message: "Hey, what's up?",
54 |   },
55 |   {
56 |     pic: require('../assets/images/women/women14.jpg'),
57 |     title: 'Michelle, 45',
58 |     message: 'Howdy!!!',
59 |   },
60 |   {
61 |     pic: require('../assets/images/women/women12.jpg'),
62 |     title: 'Arya, 18',
63 |     message: 'Not today!',
64 |   },
65 | ])
66 | 


--------------------------------------------------------------------------------
/constants/Pics.js:
--------------------------------------------------------------------------------
  1 | import shuffleArray from '../utils/shuffleArray'
  2 | 
  3 | export const HomeScreenPics = shuffleArray([
  4 |   {
  5 |     pic: require('../assets/images/women/women1.jpg'),
  6 |     title: 'Amelia, 27',
  7 |     caption: '16 miles away',
  8 |   },
  9 |   {
 10 |     pic: require('../assets/images/women/women2.jpg'),
 11 |     title: 'Joanna, 19',
 12 |     caption: '2 miles away',
 13 |   },
 14 |   {
 15 |     pic: require('../assets/images/women/women3.jpg'),
 16 |     title: 'Charlie, 32',
 17 |     caption: '24 miles away',
 18 |   },
 19 |   {
 20 |     pic: require('../assets/images/women/women4.jpg'),
 21 |     title: 'Mary, 23',
 22 |     caption: '45 miles away',
 23 |   },
 24 |   {
 25 |     pic: require('../assets/images/women/women5.jpg'),
 26 |     title: 'Lucy, 27',
 27 |     caption: '32 miles away',
 28 |   },
 29 |   {
 30 |     pic: require('../assets/images/women/women6.jpg'),
 31 |     title: 'Rachel, 29',
 32 |     caption: '30 miles away',
 33 |   },
 34 |   {
 35 |     pic: require('../assets/images/women/women7.jpg'),
 36 |     title: 'Ava, 31',
 37 |     caption: '14 miles away',
 38 |   },
 39 |   {
 40 |     pic: require('../assets/images/women/women8.jpg'),
 41 |     title: 'Monica, 35',
 42 |     caption: '19 miles away',
 43 |   },
 44 |   {
 45 |     pic: require('../assets/images/women/women9.jpg'),
 46 |     title: 'Lisa, 25',
 47 |     caption: '7 miles away',
 48 |   },
 49 |   {
 50 |     pic: require('../assets/images/women/women10.jpg'),
 51 |     title: 'Julia, 22',
 52 |     caption: '9 miles away',
 53 |   },
 54 |   {
 55 |     pic: require('../assets/images/men/men1.jpg'),
 56 |     title: 'Aaron, 24',
 57 |     caption: '3 miles away',
 58 |   },
 59 |   {
 60 |     pic: require('../assets/images/men/men2.jpg'),
 61 |     title: 'Novak, 27',
 62 |     caption: '12 miles away',
 63 |   },
 64 |   {
 65 |     pic: require('../assets/images/men/men3.jpg'),
 66 |     title: 'Justin, 32',
 67 |     caption: '20 miles away',
 68 |   },
 69 |   {
 70 |     pic: require('../assets/images/men/men4.jpg'),
 71 |     title: 'Tony, 21',
 72 |     caption: '4 miles away',
 73 |   },
 74 |   {
 75 |     pic: require('../assets/images/men/men5.jpg'),
 76 |     title: 'Leo, 30',
 77 |     caption: '22 miles away',
 78 |   },
 79 |   {
 80 |     pic: require('../assets/images/men/men6.jpg'),
 81 |     title: 'Ronald, 39',
 82 |     caption: '35 miles away',
 83 |   },
 84 |   {
 85 |     pic: require('../assets/images/men/men7.jpg'),
 86 |     title: 'Johnny, 41',
 87 |     caption: '44 miles away',
 88 |   },
 89 |   {
 90 |     pic: require('../assets/images/men/men8.jpg'),
 91 |     title: 'Chandler, 35',
 92 |     caption: '29 miles away',
 93 |   },
 94 |   {
 95 |     pic: require('../assets/images/men/men9.jpg'),
 96 |     title: 'Joey, 29',
 97 |     caption: '17 miles away',
 98 |   },
 99 |   {
100 |     pic: require('../assets/images/men/men10.jpg'),
101 |     title: 'Alfie, 37',
102 |     caption: '27 miles away',
103 |   },
104 | ])
105 | 
106 | export const TopPicksScreenPics = shuffleArray([
107 |   {
108 |     pic: require('../assets/images/women/women11.jpg'),
109 |     title: 'Annie, 40',
110 |     caption: '26h left',
111 |   },
112 |   {
113 |     pic: require('../assets/images/women/women12.jpg'),
114 |     title: 'Lena, 31',
115 |     caption: '20h left',
116 |   },
117 |   {
118 |     pic: require('../assets/images/women/women13.jpg'),
119 |     title: 'Kendra, 19',
120 |     caption: '15h left',
121 |   },
122 |   {
123 |     pic: require('../assets/images/women/women14.jpg'),
124 |     title: 'Mia, 23',
125 |     caption: '45h left',
126 |   },
127 |   {
128 |     pic: require('../assets/images/women/women15.jpg'),
129 |     title: 'Jenny, 27',
130 |     caption: '12h left',
131 |   },
132 |   {
133 |     pic: require('../assets/images/men/men11.jpg'),
134 |     title: 'Dwayne, 34',
135 |     caption: '13h left',
136 |   },
137 |   {
138 |     pic: require('../assets/images/men/men12.jpg'),
139 |     title: 'Novak, 27',
140 |     caption: '22h left',
141 |   },
142 |   {
143 |     pic: require('../assets/images/men/men13.jpg'),
144 |     title: 'Zikomo, 32',
145 |     caption: '20h left',
146 |   },
147 |   {
148 |     pic: require('../assets/images/men/men14.jpg'),
149 |     title: 'Sam, 19',
150 |     caption: '42h left',
151 |   },
152 |   {
153 |     pic: require('../assets/images/men/men15.jpg'),
154 |     title: 'Richard, 31',
155 |     caption: '21h left',
156 |   },
157 | ])
158 | 


--------------------------------------------------------------------------------
/navigation/AppNavigator.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createAppContainer, createSwitchNavigator } from 'react-navigation';
 3 | 
 4 | import MainTabNavigator from './MainTabNavigator';
 5 | 
 6 | export default createAppContainer(createSwitchNavigator({
 7 |   // You could add another route here for authentication.
 8 |   // Read more at https://reactnavigation.org/docs/en/auth-flow.html
 9 |   Main: MainTabNavigator,
10 | }));


--------------------------------------------------------------------------------
/navigation/MainTabNavigator.js:
--------------------------------------------------------------------------------
 1 | import { Icon } from 'expo'
 2 | import React from 'react'
 3 | import {
 4 |   createBottomTabNavigator,
 5 |   createStackNavigator,
 6 | } from 'react-navigation'
 7 | import TabBarIcon from '../components/TabBarIcon'
 8 | import HomeScreen from '../screens/HomeScreen'
 9 | import MessagesScreen from '../screens/MessagesScreen'
10 | import ProfileScreen from '../screens/ProfileScreen'
11 | import TopPicksScreen from '../screens/TopPicksScreen'
12 | 
13 | const HomeStack = createStackNavigator(
14 |   {
15 |     Home: HomeScreen,
16 |   },
17 |   {
18 |     headerMode: 'none',
19 |   },
20 | )
21 | 
22 | HomeStack.navigationOptions = {
23 |   tabBarLabel: 'Home',
24 |   tabBarIcon: ({ focused }) => (
25 |     <TabBarIcon
26 |       Icon={Icon.MaterialCommunityIcons}
27 |       focused={focused}
28 |       name="fire"
29 |     />
30 |   ),
31 | }
32 | 
33 | const TopPicksStack = createStackNavigator(
34 |   {
35 |     TopPicks: TopPicksScreen,
36 |   },
37 |   {
38 |     headerMode: 'none',
39 |   },
40 | )
41 | 
42 | TopPicksStack.navigationOptions = {
43 |   tabBarLabel: 'TopPicks',
44 |   tabBarIcon: ({ focused }) => (
45 |     <TabBarIcon Icon={Icon.FontAwesome} focused={focused} name="diamond" />
46 |   ),
47 | }
48 | 
49 | const MessagesStack = createStackNavigator(
50 |   {
51 |     Messages: MessagesScreen,
52 |   },
53 |   {
54 |     headerMode: 'none',
55 |   },
56 | )
57 | 
58 | MessagesStack.navigationOptions = {
59 |   tabBarLabel: 'Messages',
60 |   tabBarIcon: ({ focused }) => (
61 |     <TabBarIcon Icon={Icon.FontAwesome} focused={focused} name="commenting-o" />
62 |   ),
63 | }
64 | 
65 | const ProfileStack = createStackNavigator(
66 |   {
67 |     Profile: ProfileScreen,
68 |   },
69 |   {
70 |     headerMode: 'none',
71 |   },
72 | )
73 | 
74 | ProfileStack.navigationOptions = {
75 |   tabBarLabel: 'Profile',
76 |   tabBarIcon: ({ focused }) => (
77 |     <TabBarIcon Icon={Icon.Feather} focused={focused} name="user" />
78 |   ),
79 | }
80 | 
81 | export default createBottomTabNavigator({
82 |   HomeStack,
83 |   TopPicksStack,
84 |   MessagesStack,
85 |   ProfileStack,
86 | })
87 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "eject": "expo eject",
 8 |     "test": "node ./node_modules/jest/bin/jest.js --watchAll"
 9 |   },
10 |   "jest": {
11 |     "preset": "jest-expo"
12 |   },
13 |   "dependencies": {
14 |     "@expo/samples": "2.1.1",
15 |     "expo": "^32.0.0",
16 |     "react": "16.5.0",
17 |     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
18 |     "react-native-deck-swiper": "1.5.25",
19 |     "react-native-elements": "^1.1.0",
20 |     "react-navigation": "^3.0.9"
21 |   },
22 |   "devDependencies": {
23 |     "babel-preset-expo": "^5.0.0",
24 |     "jest-expo": "^32.0.0"
25 |   },
26 |   "private": true
27 | }
28 | 


--------------------------------------------------------------------------------
/screens/HomeScreen.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { SafeAreaView, StyleSheet } from 'react-native'
 3 | import Swiper from 'react-native-deck-swiper'
 4 | import { Card } from '../components/Card'
 5 | import { HomeScreenPics } from '../constants/Pics'
 6 | 
 7 | class HomeScreen extends React.Component {
 8 |   render() {
 9 |     return (
10 |       <SafeAreaView style={styles.container}>
11 |         <Swiper
12 |           cards={HomeScreenPics}
13 |           renderCard={Card}
14 |           infinite
15 |           backgroundColor="white"
16 |           cardHorizontalMargin={0}
17 |           stackSize={2}
18 |         />
19 |       </SafeAreaView>
20 |     )
21 |   }
22 | }
23 | 
24 | const styles = StyleSheet.create({
25 |   container: {
26 |     flex: 1,
27 |     backgroundColor: 'transparent',
28 |   },
29 | })
30 | 
31 | export default HomeScreen
32 | 


--------------------------------------------------------------------------------
/screens/MessagesScreen.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { SafeAreaView, ScrollView, StyleSheet } from 'react-native'
 3 | import { ListItem } from 'react-native-elements'
 4 | import { Messages } from '../constants/Messages'
 5 | 
 6 | class MessagesScreen extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <SafeAreaView>
10 |         <ScrollView>
11 |           {Messages.map((user, i) => (
12 |             <ListItem
13 |               key={i}
14 |               leftAvatar={{ source: user.pic, size: 'large' }}
15 |               title={user.title}
16 |               titleStyle={styles.title}
17 |               subtitle={user.message}
18 |               subtitleStyle={styles.subtitle}
19 |               chevron
20 |             />
21 |           ))}
22 |         </ScrollView>
23 |       </SafeAreaView>
24 |     )
25 |   }
26 | }
27 | 
28 | const styles = StyleSheet.create({
29 |   title: {
30 |     fontSize: 24,
31 |     color: '#3F3F3F',
32 |   },
33 |   subtitle: {
34 |     color: '#A5A5A5',
35 |   },
36 | })
37 | 
38 | export default MessagesScreen
39 | 


--------------------------------------------------------------------------------
/screens/ProfileScreen.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Image, SafeAreaView, StyleSheet, View } from 'react-native'
 3 | import { Divider, Icon, Text } from 'react-native-elements'
 4 | import Layout from '../constants/Layout'
 5 | import { HomeScreenPics } from '../constants/Pics'
 6 | import { randomNo } from '../utils/randomNo'
 7 | 
 8 | const { pic, title } = HomeScreenPics[randomNo(1, HomeScreenPics.length)]
 9 | 
10 | const Social = ({ name }) => (
11 |   <Icon
12 |     name={name}
13 |     type="font-awesome"
14 |     containerStyle={styles.iconContainer}
15 |     size={32}
16 |   />
17 | )
18 | 
19 | class ProfileScreen extends React.Component {
20 |   render() {
21 |     return (
22 |       <SafeAreaView style={styles.container}>
23 |         <View style={styles.imageContainer}>
24 |           <Image source={pic} style={styles.image} />
25 |         </View>
26 |         <Text h4 style={styles.name}>
27 |           {title}
28 |         </Text>
29 |         <Text style={styles.desc}>Fashion Designer at Amelia & Co.</Text>
30 |         <Divider style={styles.divider} />
31 |         <Text style={styles.desc}>
32 |           I love to travel. I have a cat named pickles, if he likes you, I
33 |           probably will too.
34 |         </Text>
35 |         <Divider style={styles.divider} />
36 |         <Text style={styles.desc}>Find me on Social here</Text>
37 |         <View style={styles.socialLinks}>
38 |           <Social name="snapchat" />
39 |           <Social name="instagram" />
40 |           <Social name="facebook-square" />
41 |         </View>
42 |       </SafeAreaView>
43 |     )
44 |   }
45 | }
46 | 
47 | const styles = StyleSheet.create({
48 |   container: {
49 |     flex: 1,
50 |     alignItems: 'center',
51 |   },
52 |   imageContainer: {
53 |     margin: 20,
54 |   },
55 |   image: {
56 |     width: Layout.window.width - 60,
57 |     height: Layout.window.height / 2 - 60,
58 |     borderRadius: 20,
59 |   },
60 |   name: {
61 |     color: '#5E5E5E',
62 |     alignSelf: 'flex-start',
63 |     marginLeft: 30,
64 |   },
65 |   desc: {
66 |     color: '#5E5E5E',
67 |     alignSelf: 'flex-start',
68 |     marginTop: 5,
69 |     marginHorizontal: 30,
70 |     fontSize: 14,
71 |   },
72 |   divider: {
73 |     backgroundColor: '#C0C0C0',
74 |     width: Layout.window.width - 60,
75 |     margin: 20,
76 |   },
77 |   socialLinks: {
78 |     flex: 1,
79 |     alignItems: 'flex-start',
80 |     flexDirection: 'row',
81 |     width: Layout.window.width,
82 |     marginLeft: 40,
83 |   },
84 |   iconContainer: {
85 |     paddingHorizontal: 8,
86 |     paddingVertical: 15,
87 |   },
88 | })
89 | 
90 | export default ProfileScreen
91 | 


--------------------------------------------------------------------------------
/screens/TopPicksScreen.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { ScrollView, StyleSheet, View } from 'react-native'
 3 | import { Text, Tile } from 'react-native-elements'
 4 | import { SafeAreaView } from 'react-navigation'
 5 | import { TopPicksScreenPics } from '../constants/Pics'
 6 | 
 7 | class TopPicksScreen extends React.Component {
 8 |   render() {
 9 |     return (
10 |       <SafeAreaView>
11 |         <ScrollView>
12 |           <Text h2 h2Style={styles.h2Style}>
13 |             Top Picks
14 |           </Text>
15 |           <Text h4 h4Style={styles.h4Style}>
16 |             Featured profiles of the day, picked just for you
17 |           </Text>
18 |           <View style={styles.grid}>
19 |             {TopPicksScreenPics.map(({ pic, title, caption }, i) => (
20 |               <Tile
21 |                 imageSrc={pic}
22 |                 activeOpacity={0.9}
23 |                 title={title}
24 |                 titleStyle={styles.title}
25 |                 caption={caption}
26 |                 captionStyle={styles.caption}
27 |                 featured
28 |                 key={title}
29 |               />
30 |             ))}
31 |           </View>
32 |         </ScrollView>
33 |       </SafeAreaView>
34 |     )
35 |   }
36 | }
37 | 
38 | const styles = StyleSheet.create({
39 |   h2Style: {
40 |     fontWeight: 'bold',
41 |     textAlign: 'center',
42 |     color: '#000000',
43 |   },
44 |   h4Style: {
45 |     textAlign: 'center',
46 |     color: '#757575',
47 |   },
48 |   grid: {
49 |     marginTop: 20,
50 |     marginBottom: 20,
51 |   },
52 |   title: {
53 |     position: 'absolute',
54 |     left: 10,
55 |     bottom: 50,
56 |     backgroundColor: 'black',
57 |     marginBottom: -2,
58 |     padding: 10,
59 |   },
60 |   caption: {
61 |     position: 'absolute',
62 |     left: 10,
63 |     bottom: 0,
64 |     backgroundColor: 'black',
65 |     marginTop: 10,
66 |     padding: 10,
67 |   },
68 | })
69 | 
70 | export default TopPicksScreen
71 | 


--------------------------------------------------------------------------------
/swipe.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deadcoder0904/expo-tinder/4fe24b7e45b7e93022da5a4b8edac942b8a5f829/swipe.gif


--------------------------------------------------------------------------------
/utils/randomNo.js:
--------------------------------------------------------------------------------
1 | export const randomNo = (min, max) =>
2 |   Math.floor(Math.random() * (max - min) + min)
3 | 


--------------------------------------------------------------------------------
/utils/shuffleArray.js:
--------------------------------------------------------------------------------
1 | // found at https://stackoverflow.com/a/46545530/6141587
2 | const shuffleArray = array =>
3 |   array
4 |     .map(a => ({ sort: Math.random(), value: a }))
5 |     .sort((a, b) => a.sort - b.sort)
6 |     .map(a => a.value)
7 | 
8 | export default shuffleArray
9 | 


--------------------------------------------------------------------------------