reactnative-best-practice

reactnative-best-practice copied to clipboard

Navigator structure

AppNavigator                        # Stack
├── SplashScreen
├── OnBoardingScreen
├── AuthStackNavigator              # Stack
│   ├── LoginScreen
│   ├── RegisterScreen
│   └── ForgotScreen
└── DrawerNavigator                 # Drawer
    └── DashboardNavigator          # Stack
        ├── TabNavigator            # BottomTab
        │   ├── HomeScreen
        │   ├── MessageScreen
        │   ├── NotificationScreen
        │   └── ProfileScreen
        └── PostScreen

1. react-navigation

• https://reactnavigation.org/docs/en/getting-started.html

2. react-native-vector-icons

• https://oblador.github.io/react-native-vector-icons/

3. react-navigator

• https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2

4. splash-screen

• https://whatdidilearn.info/2019/01/13/how-to-implement-a-splash-screen-in-react-native.html

5. Intro page sample

• https://github.com/Jacse/react-native-app-intro-slider#configuring-buttons

• https://www.google.com/search?q=image+intro+screen&safe=active&sxsrf=ACYBGNQ4HBo5bTsobkFd9wiwbXJGe_0h9g:1579317769273&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi80f-UmYznAhUEyIsBHQNIDh0Q_AUoAXoECAwQAw&biw=1680&bih=971#imgrc=no5KEDQqYmSD0M:

6. Color name

• https://htmlcolorcodes.com/color-names/

7. Intergate with Apollo graphql (@apollo/react-hooks, apollo-link)

• https://www.apollographql.com/docs/react/integrations/react-native/#gatsby-focus-wrapper
• https://www.apollographql.com/docs/react/api/react-hooks/#gatsby-focus-wrapper
• https://www.apollographql.com/docs/link/

8. Validation (Formik, Yup)

• https://jaredpalmer.com/formik/docs/guides/validation

9. SAP Mobile Design

• https://blogs.sap.com/2018/05/25/labs-preview-sap-business-bydesign-plans-new-mobile-apps-for-smartphones/

10. Sticky header

• https://stackoverflow.com/questions/55264425/is-there-a-fixed-header-or-sticky-header-for-react-native

11. Design UI

• https://www.youtube.com/watch?v=TkuQAjnaSbM

12. Asset free UI - UX

• https://www.vecteezy.com/vector-art/251964-mobile-payment-online-service-for-modern-business-website-socia

13. Vector

• https://icons8.com/ouch/search/network
• https://www.freepik.com/free-vectors/illustrations

14. AddButton

• https://itnext.io/react-native-tab-bar-is-customizable-c3c37dcf711f

15. Logo App

• https://dribbble.com/shots/6365319-s-chat-bubbles-logo

16. Disable Rotate

• https://aboutreact.com/react-native-disable-screen-rotation/

17. Image from

• https://dribbble.com/search/red%20gif

18. Permissions

• https://github.com/react-native-community/react-native-permissions

19. Image Picker

• https://github.com/react-native-community/react-native-image-picker

20. Image Gif not fire Android

• https://stackoverflow.com/questions/57089042/react-native-0-60-0-0-60-x-android-for-animated-gif-support

21. Custom tabbar

• https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496

22. Handle ID javascript with firebase

• https://stackoverflow.com/questions/56144736/react-native-firebase-display-array-of-objects-using-flatlist

23. Folder structure READ.ME

• https://github.com/kriasoft/Folder-Structure-Conventions/blob/master/README.md

24. Firestore

• https://medium.com/firebase-developers/should-i-query-my-firebase-database-directly-or-use-cloud-functions-fbb3cd14118c