Giter Club home page Giter Club logo

andrase / usapp Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 277.43 MB

Realtime android react-native chat-app

Home Page: https://www.youtube.com/watch?v=w_1VowseA3g

JavaScript 86.75% TypeScript 0.26% Ruby 2.32% Java 7.31% Objective-C 2.24% Objective-C++ 1.11%
lottie-react-native moment react-native-async-storage react-native-firebase react-native-gifted-chat react-native-google-signin react-native-linear-gradient react-native-onesignal react-native-reanimated cloudmessaging

usapp's Introduction

Realtime android react-native chat-app
with theme and text-size settings, lottie animations,
push notifications and much more..

After investing some time in learning react-native, watching countless hours of tutorials, I managed to create this fully functional android chat-app using react native CLI. Feel free to install it and try it out. At the root of the project, you will find us-app-debug.apk which you can install on your android device (you will need to enable 3rd-party installation). Feel free to hit me up of you would like to chat, search for user "rohadtsajt" in the app. ๐Ÿ˜Š

Here are a few tutorials I found extremly useful:
React-native navigation, Lottie & splash, React-native firebase signin 1, React-native firebase signin 2, React-native firebase signin 3, Theming, Asyncstorage, Gifted-chat 1, Gifted-chat 2, Push notifications 1, Push notifications 2

Packadges used:

  • react-native firebase responseible for authentication, authentication-session and connecting real-time database
  • react-native-google-signin social authentication via gmail using react-native firebase
  • lottie-react-native lottie animations
  • react-native reanimated fade-in animations
  • react-native-async-storage saving users theme and text-size settings locally
  • react-native-modal pop-up windows
  • react-native-switch-selector tri-state button selecting theme and text settings
  • react-native-linear-gradient linear-gradient backgrounds and buttons combined w theming
  • react-native-vector-icons some icons svgs
  • react-native-gifted-chat complete chat ui
  • react-native-onesignal push notification and in-app message service for mobile apps
  • react-native-axios for api calls to Onesignal / sending cloud messages
  • moment.js formating dates
  • The app built with react-native-CLI instead of Expo for the reason that I an in-app authentication wihtout a browiser redirect.
    If you would like to read more about this project, install the app and head over to the about sections or access the content here.

    Run ๐Ÿš€

    These instructions will get you a copy of the project up and running on a virtual or physical android device. Either install android studio and have a virtual machine and/or have a device where debugging through usb enabled.

    Start with cloning this repo on your local machine via cli or github-desktop:

    $ git clone https://github.com/AndrasE/usapp
    $ cd PROJECTNAME

    To install and set up the library, run:

    $ npm i

    Get SHA certificate fingerprint keys:

    $ cd android && ./gradlew signingReport

    Create a firebase android app with authentication and a real-time database. You may need to go to console.cloud.google.com to enable authentication. (firebase should auto-create it, but not 100% will happen):

    insert SHA keys above

    Add Firebase to your Android project:

    Add Firebase to your Android project

    Create a free OneSingal account. Get onesignal-id and onesignal-barer from app/settings:
    look for OneSignal App ID & Rest API Key

    Add your own credentials:

    $ cd PROJECTNAME && touch .env
    setup and insert your own API keys

    Serving the app:

    $ npx react-native start

    For building your own version of the apk follow these steps:

    React Native Generate Debug and Release APK

    usapp's People

    Contributors

    andrase avatar

    Watchers

     avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.