The purpose of the React Native incubator pack is to provide you with a starting point to learn from. This incubator goes under the assumption that you have some experience with React and Redux. If that is not the case, we would recommend that you familiarise yourself with these first, as it will shed a lot of light on some of the topics being discussed. The incubator does not intend to prepare you to start an enterprise React Native project from scratch, but rather, prepares you to hit the ground running when joining a team, or starting on an old project. For an enterprise-level React Native setup, see the attached React Native - A Beginner's Guide.pdf
Outcomes of the incubator
React Native JSX
Using native API's (GPS, local storage, etc.)
React Native application State and Lifecycle
Native code modules
React Native classes
Facebook's React Native Getting Started guide will help you to get your environment up and running and their Tutorial is an excellent starting place, as it covers theoretical and practical aspects of React Native. Completing Facebook's React Native tutorial shouldn't take more than a day.
You probably noticed during the tutorial that there's no built-in mechanism for making Ajax requests and that there's no built-in navigation framework. The tutorial not covering these is not an oversight. React Native doesn't have either of these built-in, you need to choose one.
PROTIPS AND PITFALLS
Note: See the Pro-tips & Pitfalls section in the beginner's guide for a more detailed breakdown of React Native's pro-tips & pitfalls.
- Expo is useful for prototyping but it does not allow you to make native code alteration - have a look at the Expo caveats. It is not recommended to use Expo for enterprise projects.
- When installing libraries and packages that require native code changes, make sure that the appropriate native files are updated correctly - this can be done by following the library/package in question's manual installation steps.
- Use React Native's StyleSheet.create method to create small reusable style components.
- Give thought to how your application will scale on different devices with different sizes and aspect ratios:
- Try to avoid using pixel values
- Make sure to use the Flexbox system as much as possible
- React Native allows you to access the device's dimensions - you can use a percentage of the device's height or width to size and scale components
- Develop on a physical device if you can:
- When running in debug (develop) mode, React Native applications take a big performance hit - this combined with the poor performance of emulators can lead to a less than ideal and sluggish experience
- Some visual components don't function correctly on emulators, so you might end up trying to fix a visual bug that might not even exist on physical devices
- When using your fingers to navigate and action your application, you get a better understanding of how your application will feel to actual users
You must create a calendar and itinerary with weather information for a city that the user selects when they first visit the mobile application.
hIGH-LEVEL FUNCTIONAL REQUIREMENTS:
- When the user opens the app for the first time it must ask them in which city they stay.
- Once a city has been selected the user must be asked which time format they prefer, 24 hours or 12 hours.
- Once the initial setup component of selected a time format and city has been completed the user is sent to their dashboard.
- The dashboard is essentially a calendar with integrated weather forecasts.
- The dashboard shows the current weather conditions as returned by the Open Weather API.
- The dashboard must show weather data for the current day.
- The dashboard must show the weather forecast for the next 5 days as returned by the Open Weather API.
- When a user taps on a day on the calendar they are able to edit their itinerary for that day.
- When editing their itinerary the user can add items for a specific time, or they can add TODO items which are not to be completed at a specific time.
- Modifications to a user's location, time format preference, and itinerary should be persisted to local storage.
You have free reign over the design, layout, and look & feel of the portal. Be creative!
You're welcome to use whatever you please, but the Expo seed is the easiest seed with which to begin your project. You can also use Entelect's own React Native starter project if you don't mind setting up the Android/iOS environments.
Note: Expo is not recommended for large or enterprise projects, see the Getting Started section in the React Native Beginner's Guide for a more detailed breakdown of starting enterprise project with React Native. If you'd like to have a look at an example of an enterprise-level starter project (including state management with Redux and React Navigation as a navigation framework), you can have a look at Entelect's own React Native production-example-project.
- Use React Native's Geolocation API to automatically get the user's location (this won't be possible in Expo apps that have NOT been ejected).
- Add support for multiple users.
- Use Redux.
- Use Redux-Thunk.
- Use a testing framework to test your reducers.
- Use an enzyme for acceptance/regression testing.
Feedback is important. If you find a cool new resource or feel that any part of this incubator or it's resources are out of date, leave us a message in the Slack channel.