What the heck does it do?

Glad you asked. And right off the top let me tell you - it does not actually rattle 😬

Screens

Home

On this screen you can enter your name (or anything really) and see the update happen as you type. We wanted to show we could share data across multiple screens, so we added a simple - yet interactive - means of getting data to share.

yeah but how is it being shared?

We implemented a simple context with a single property in state name and an it's update function updateName. We passed the entire app to the provider so that we could consume from any level.

Geo

As soon as this screen mounts we ask the user for their permission to access their Location via the Expo API. If granted, we call the Expo Location API to retrieve the users current location and display the details on the screen. We included an "Update" button to retrieve the user's location on-demand.

Open up the tab and walk around! See the numbers change, oooooooohhhhhhhhh ❗️

Speak

The second consumer of our name context and the most interactive for last.

The first time you open this tab you will be surprised to hear your phone greeting you! We use whatever string was entered on the Home screen in the initial greeting. We also placed a button on the screen which will have your phone say a random message (maybe even the greeting again 🤞).

Other details

Navigation

We utilized the react native navigation solution within our app. Not only did we make this decision during our planning phase, the expo-cli init command can create a "tabs" project which has a few screen navigations already wired up for you! Truth be told, this was how we initially learned to use react native navigation while heavily consulting the documentation 😀

Styling

React Native uses a css-in-js approach to styling components. The gist:

• use the same CSS property but instead of kebab-case you camel-case
  • e.g. backgroundColor instead of background-color
• pass an object of <css_property>:<value> to the style prop of react-native components to apply
• unitless dimensions
• EVERYTHING IS FLEXBOX
• and more