Skip to content

omiceron/rn-app-example

Repository files navigation

Moewchat

React Native iOS chat and social network application example for Expo.

Installation

Если вы работодатель и хотите проверить приложение на работоспособность, скачайте Expo и перейдите по ссылке на бандл проекта.

Setting up backend

Skip this step if you don't want to use your custom backend. In other case you should start a Firebase project using these Google products:

Then deploy Meowchat Firebase Cloud Functions. Apply your settings by modifying .firebaserc:

{
  "projects": {
    "default": "YOUR_FIREBASE_PROJECT_NAME"
  }
}

Set your config.js according to your project:

export const appName = 'YOUR_FIREBASE_PROJECT_NAME'
export const facebookAppId = 'YOUR_FACEBOOK_APP_ID'
export const googleClientId = 'YOUR_GOOGLE_CLIENT_ID'
export const apiKey = 'YOUR_API_KEY'
export const messagingSenderId = 'YOUR_MESSAGING_SENDER_ID'

export const config = {
  apiKey,
  authDomain: `${appName}.firebaseapp.com`,
  databaseURL: `https://${appName}.firebaseio.com`,
  projectId: appName,
  storageBucket: `gs://${appName}.appspot.com`,
  messagingSenderId
}

Running app on your phone

Meowchat is a React Native Expo project. You should use Expo to compile your app. Follow the instructions on Expo.

Features

Some features of Meowchat.

Authentication

Creating your user with e-mail

Simple user creating.

Signing in

All fields are validated.

Creating your user with Facebook or Google+

Creating user or signing in via OAuth 2.0.

Revealing password

There is no such behavior in React Native to reveal password, so I did it myself.

Signing out

If you're signing out all cached data will be wiped out. Apropos, you can see the presence watcher working there.

Chatting

Creating chat

If user has no chat with other user new chat will be created, but nobody will see that.

Sending messages

Simple chatting. New message raises chat to the top of the list, even if it's from user you have no chat with. Delivery status implemented.

Lazy loading chats

Chats are loading by last message order.

Archive and Deleting chats

Swipeable rows deliver some good options.

Posting

Creating post

Attach location

Location stored on Firebase as an object of a coordinates

Location parse

You can extract your location from address

Revealing post

Lazy loading posts

Likes

Likes screen. Refreshing with each interaction. Posts and likes realtime update are disabled for performance reasons.

Users

User screen

You can navigate to posts that user created or liked. User screen refreshes user data. So the user information will be always up-to-date.

User presence

Works even if you close your app.

Editing current user

Add photo for current user

Other

Caching store

Fetched info stored on your device. When you open Meowchat next time, you'll see last state you had before closing.

Deep navigation

You can surf deep inside the app and all your navigation history will be saved until you close Meowchat.

Independent navigation screens

Navigation screens are independent. That means you can open same chats due to deep navigation and that will not break your navigation history.

About

React Native mobile application example

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published