Need help with tinder-react-native?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

stevenpersia
650 Stars 254 Forks MIT License 73 Commits 6 Opened issues

Description

Tinder clone - React Native.

Services available

!
?

Need anything else?

Contributors list

# 67,125
Objecti...
Java
tinder
React N...
44 commits
# 16,183
JavaScr...
TypeScr...
React N...
Android
8 commits
# 748
GitHub
rust-la...
wechat-...
herokua...
1 commit
# 310,346
HTML
session...
Objecti...
tinder
1 commit
# 319,502
Objecti...
Java
tinder
mobile-...
1 commit

Tinder Clone - React Native

Tinder Clone - React Native

Last Commit Licence Star

Overview

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.

More features will be added to the project in the future.

This project was inspired by this amazing Kishore's work on Dribbble. Feel free to follow this guy because he does great stuff.

Screenshots

Capture 1 Capture 2 Capture 3 Capture 4

Installation and usage

Be sure, you have installed all dependencies and applications to run React Native project on your computer : Getting Started with React Native.

This project works fine for iOS but in Android version there are serious UI problems because I've only worked on iOS.

Running the project

Clone this repository :

git clone https://github.com/stevenpersia/tinder-react-native.git
cd tinder-react-native

Install packages :

npm install

When installation is complete, run with version of your choice :

react-native run-ios
# or
react-native run-android

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"
| |
actions
| boolean | No | Display actions buttons (Like, Dislike, ...). |
actions
| |
onPressLeft
| function | No | Swipe card to left. |
onPressLeft={() => this.swiper.swipeLeft()}
| |
onPressRight
| function | No | Swipe card to right. |
onPressRight={() => this.swiper.swipeRight()}
| |
status
| string | No | Display online or offline badge (
Online
and
Offline
). |
status="Online"
| |
variant
| 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!

Contributors

Stephen Phillips
Stephen Phillips

💬
Anand Vasudevan
Anand Vasudevan

💻

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.