Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevenpersia/tinder-expo
Tinder clone - Expo.
https://github.com/stevenpersia/tinder-expo
Last synced: 3 months ago
JSON representation
Tinder clone - Expo.
- Host: GitHub
- URL: https://github.com/stevenpersia/tinder-expo
- Owner: stevenpersia
- License: mit
- Created: 2021-03-12T23:01:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-29T09:38:31.000Z (about 2 years ago)
- Last Synced: 2024-05-05T03:32:22.192Z (6 months ago)
- Language: TypeScript
- Homepage: https://expo.io/@stevenpersia/projects/tinder-expo
- Size: 15.4 MB
- Stars: 316
- Watchers: 7
- Forks: 144
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rainmana - stevenpersia/tinder-expo - Tinder clone - Expo. (TypeScript)
README
Tinder Clone - Expo
## Overview
⚠️ **This project use code of my previous repository [Tinder - React Native](https://github.com/stevenpersia/tinder-react-native). Because I don't have time to maintain this previous project made on React Native, I've decided to switch to Expo because it's more convenient to me. Sorry if you don't work with Expo (but give it a try).**
**Perfect to start an Tinder Clone app.** 4 screens are availables : Explore, Matches, Messages and Profile. You'll find some components like Card Component to pass props and variant. No frameworks UI like Bootstrap or Material UI are used.
- **Easy to use** 🤘
- **Made with Expo** ⚡
- **TypeScript supported** 🌞
This project was inspired by this [amazing Kishore's work on Dribbble](https://dribbble.com/shots/5631075-Dating-App-Sketch-Freebie-Day-334-365-Project365). Feel free to follow this guy because he does great stuff.
## Demo
You can try it here : https://expo.io/@stevenpersia/projects/tinder-expo
## Screenshots
## Installation and usage
Be sure, you have installed all dependencies and applications to run Expo project on your computer : [Getting Started with Expo](https://docs.expo.io/get-started/installation/).
This project works fine on iOS and Android.
### Running the project
Clone this repository :
```
git clone https://github.com/stevenpersia/tinder-expo.git
cd tinder-expo
```
Install packages :
```
yarn
```
When installation is complete, run it :
```
yarn start
```
## Props
### CardItem
| Name | Type | Required | Description | Example |
| -------------- | -------- | -------- | --------------------------------------------------------- | --------------------------------------------------- |
| `image` | string | Yes | Picture of member. | `image="https://..."` |
| `name` | string | Yes | Name of member. | `name="John Doe"` |
| `description` | string | Yes | Description of member. | `description="Full-time Traveller. Globe Trotter."` |
| `matches` | string | Yes | Match percentage. | `matches="95"` |
| `hasActions` | boolean | No | Display actions buttons (Like, Dislike, ...). | `actions` |
| `isOnline` | string | No | Display online or offline badge (`Online` and `Offline`). | `status="Online"` |
| `hasVariant` | boolean | No | Display another style of card (used for Matches screen). | `variant` |
### Message
| Name | Type | Required | Description | Example |
| ------------- | ------ | -------- | ----------------------- | -------------------------------------------------------------------------------------------- |
| `image` | string | Yes | Picture of member. | `image="https://..."` |
| `name` | string | Yes | Name of member. | `name="John Doe"` |
| `lastMessage` | string | Yes | Last message of member. | `lastMessage="You want order in Gotham. Batman must take off his mask and turn himself in."` |
### ProfileItem
| Name | Type | Required | Description | Example |
| ---------- | ------ | -------- | --------------------------- | ------------------------------------------ |
| `name` | string | Yes | Name of member. | `name="John Doe"` |
| `matches` | string | Yes | Match percentage. | `matches="95"` |
| `age` | string | No | Age of member. | `age="25"` |
| `location` | string | No | Location of member. | `location="Paris, France"` |
| `info1` | string | No | More information of member. | `info1="Straight, Single"` |
| `info2` | string | No | More information of member. | `info2="Tea Totaller & Loves Photography"` |
| `info3` | string | No | More information of member. | `info3="Beaches, Mountain & Coffee"` |
| `info4` | string | No | More information of member. | `info4="Last seen: 23h ago"` |
## Star, Fork, Clone & Contribute
Feel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!