React native dating app tutorial

react native dating app tutorial

Get 265 dating mobile app templates on CodeCanyon. Buy mobile app MatchPro - Ultimate Chat / Dating React Native Application. Tags: dating, binder, chat. Varun Nath as he walks us through cloning the Tinder user interface in React Native. Jess Hui. Tutorial: Dating App Builder with React Native. Have you ever wondered how to make a dating app like Tinder? In this.

What Does It Contain?

We are proud to announce the launch of React Native Dating App with Backend! Dating App is a well-structured starter kit/app script that brings with it fully customizable pages and a rich collection of UI elements that will enable you quickly get build a dating app as you desire.

This is a bold and flexible React Native solution that is best suited for developing high-quality dating apps with the help of latest technologies that are available in the market.

Dating app provides multiple screens and features in order to help you extend the functionality of your dating app to new levels. Dating App is built using React Native, GraphCool, and NativeBase, all of which will greatly help you provide world-class user experience to your app’s users. What’s even more great about this is that your users will be able to experience this on the native platform itself!

  • Mobile App
  • Admin Web Dashboard
  • GraphQL as Backend

The Mobile App is built using the following technologies:

And here’s the code structure of the Mobile App:

src
|_ components
|_ cardDetails
|_ gradient
|_ progressBar
|_ chatBubble.js
|_ errorHandler.js
|_ header.js
|_ homeFooter.js
|_ icon.js
|_ imageView.js
|_ loader.js
|_ noMoreData.js
|_ renderImage.js
|_ renderTag.js
|_ constants
|_ containers
|_ cards
|_ card.js
|_ index.js
|_ styles.js
|_ matches
graphql.js
index.js
match.js
matchItem.js
styles.js
|_ interestProvider.js
|_ locationProvider.js
|_ login.js
|_ styles.js
|_ uploadImages.js
|_ userProvider.js
|_ graphql
|_ mutation.js
|_ query.js
|_ screens
|_ account
|_ cardProfile
|_ chat
|_ home
|_ match
|_ onBoard
|_ profile
|_ settings
|_ socialLogin
|_ uploadPhoto
|_ theme
|_ components
|_ variables
|_ appNavigator.js
|_ tabNavigator.js
|_ utils.js
|_ .eslintrc
|_ app.json
|_ config-local.js
|_ configureClient.js
|_ index.js

All The Screens You’d Ever Want!

React Native Dating App with Backendprovides you with a set of fully customizable, ready-to-use screens with easily configurable application design and the perfect UX for a dating app.

This starter kit provides you with the following screens:

We have used the following technologies to set up the backend support for the dating app:

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphCool

GraphCool is an open-source framework to develop and deploy production-ready serverless GraphQL backends. It includes GraphQL database mapping, real-time subscriptions & flexible permission system.

The reason for why we used GraphQL for backend instead of something like REST API is that:

  • GraphQL needs lesser code than REST API.
  • GraphQL is more declarative and provides an elegant data retrieval than REST API.
  • GraphQL avoids multiple REST calls.
  • GraphQL is backward compatible and version-free.
  • GraphQL has proved to be a more flexible solution than REST API.
  • GraphQL has powerful development tools.
  • GraphQL can evolve with versions

The Admin Web Dashboard is built using the following technologies:

And here’s the code structure of the Admin Web Dashboard:

src
|_ assets
|_ components
|_ config
|_ pages
|_ styles
|_ App.js
|_ App.test.js
|_ constants.js
|_ data.json
|_ index.js
|_ logo.svg
|_ registerServiceWorker.js

Dating App can perform the following the services:

  • Login — When a user tries to login inside the Web Admin Dashboard.
  • Overview — Dashboard provides the total users, total swipes, total matches, total cities, number of males, number of females, number of iOS and Android devices.
  • Settings — Dashboard can also create and update settings such as Google Play Store Link, iOS App Store link, timezone, etc.
  • Users — Dashboard can provide all user data, activate and deactivate user accounts, and also monitors all the users in real time.

I am Rajat S, currently at Geekyants as a Technical Content Writer.

Thanks for reading! Please 👏 if you liked this post and follow me to stay updated with all the exciting things happening at GeekyAnts.

Источник: https://blog.nativebase.io/launching-react-native-dating-app-with-backend-539400d1aea6

3 thoughts to “React native dating app tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *