Getting Started 

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.

Based on experience garnered from React Native projects we've done, Axios is our preferred Ajax library and React Navigation is our preferred navigation framework.

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

PRACTICAL

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:

1. When the user opens the app for the first time it must ask them in which city they stay.
2. Once a city has been selected the user must be asked which time format they prefer, 24 hours or 12 hours.
3. Once the initial setup component of selected a time format and city has been completed the user is sent to their dashboard.
4. The dashboard is essentially a calendar with integrated weather forecasts.
5. The dashboard shows the current weather conditions as returned by the Open Weather API.
6. The dashboard must show weather data for the current day.
7. The dashboard must show the weather forecast for the next 5 days as returned by the Open Weather API.
8. When a user taps on a day on the calendar they are able to edit their itinerary for that day.
9. 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.
10. 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 Beg​inner'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.

ADVANCED

• 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.