Giter VIP home page Giter VIP logo

adityasonel / thereactapp Goto Github PK

View Code? Open in Web Editor NEW
26.0 3.0 8.0 16.15 MB

๐Ÿš€ A powerful React-Native Modules & UI Components showcase. That show you the power and wisdom of React-Native in Mobile Application Development (Work in Progress) ๐Ÿš€

License: MIT License

JavaScript 80.69% Python 4.48% Java 4.38% Objective-C 10.45%
react-native reactnavigation react-native-vector-icons react-native-linear-gradient android ios react-firebase reactapp react-native-sample react-native-template react-native-playground

thereactapp's Introduction

TheReactApp ๐Ÿš€

A powerful React-Native Modules & UI Components showcase. That show you the power and wisdom of React-Native in Mobile Application Development. TheReactApp is a mobile application template built with some others powerfull react native libraries like React Navigation, React-Native Vector Icon, React-Native Linear Gradient. Thanks to all respective developers - this libraries is all you need to build your react native app faster. Working Android Application demo coming soon on Google PlayStore. For now you can download working APK here, Download - TheReactApp

If you are newbie React-Native Developer then this repo is 110% for you.

Screenshots

What's inside

  • Up-to-date code with androidx and xcode libraries
  • UI/UX Design from best dribbble templates
  • Firebase Database Integration
  • Integrate React-Navigation
  • Integrate React-Native Linear Gradient
  • Use React-Native Vector Icon
  • Transitions with React Navigation Fluid Transition
  • Redux Store integration
  • Authentication through firebase
  • Firebase Cloudstore integration
  • Support for large screen devices

All uncheck features and many more sparking things are coming in future.

Getting Started

1. Clone and Install

# Clone the repo
git clone https://github.com/adityasonel/TheReactApp.git

# Install dependencies
yarn install

or

npm install

2. Link all native dependencies:

react-native link

That's it! Cool, right?

3. Integrate Firebase

Firebase Database is used to render sample data on HomeTab. For fetch data from firebase, you have to add your firebase keys in FirebaseConfig.js file that is,

var FirebaseConfig = {
    apiKey: BuildConfig.FIREBASE_API_KEY,
    authDomain: BuildConfig.FIREBASE_AUTH_DOMAIN,
    databaseURL: BuildConfig.FIREBASE_DB_URL,
    projectId: BuildConfig.FIREBASE_PROJECT_ID,
    storageBucket: BuildConfig.FIREBASE_STORAGE_BUCKET
};

Get all your firebase keys from Firebase Console and add here at src/config/FirebaseConfig.js. And that's all!!!

For more info about how to add firebase to react-native application check this firebase blog post.

Currently known issue

As i stated above i am using latest androidx library in this project. But react-native-gesture-handler is still on v4 version of android sdk. So when you try to run application by react-native run-android, you can get an error as

error: package android.support.v4.util does not exist

Solving with android studio

If you are familiar with android studio, you can solve this error by just import latest dependencies. Search for files RNGestureHandlerEvent.java and RNGestureHandlerStateChangeEvent.java in android studio, replace older version dependencies with newer version. There you go, everything is perfect. Just run application again.

Solving without android studio

But if you are not want to open android studio you can also solve this issue but in much longer way. Search for this to files in project RNGestureHandlerEvent.java and RNGestureHandlerStateChangeEvent.java or go to file location in your system.

That is normally, node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/ search for above two files and replace this line

import android.support.v4.util.Pools;

# with

import androidx.core.util.Pools;

There you go, everything is perfect. Just run application again. But i am not recommending this way because this is not relevant method to solve dependencies or library version issues in android developement.

Contributing

If you find any problems, please open an issue or submit a fix as a pull request.

License

MIT License

thereactapp's People

Contributors

adityasonel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

thereactapp's Issues

Request to Add Product in Start React

Hello,
I am Maheshwari from team GeekyAnts.

On behalf of Start React, we add open source products which we find helpful to the community & also we provide credits to author itself.

Let me know if you are interested showcase your product in our open source website.

Looking forward to hear from you.

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.