![\"ScreenShot-1.png\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/FEW-2.4-Wthr-Native-Tutorial@472a97a89c9e284cc006a5c6eeedef2144711fb0/P00-Getting-Started/assets/01_init-with-expo_expo-page.png\" "\\"\\"")
\n What's Wthr? It's a new native app that shows the current weather info on your phone.
What does it mean to be a native app? As a native app, it runs truly native code on your device.
Does it work on iOS or Android? It runs on both! This project is built with React Native. React Native can build for Android and iOS both from the same code base. React Native is based on React which is a JavaScript library for creating user interfaces. React Native is written with JavaScript using the syntax and patterns used with React but compiles into native iOS or Android code.
Read more about it here.
"},{"id":"T0E6OlNlY3Rpb24tODM4OA==","title":"Why Is This Important","htmlContent":"Learning this will provide the foundation for the work you'll do through FEW 2.4, where you'll be building more complex react native apps and doing a deeper dive on the fundamentals that you'll learn here.
"},{"id":"T0E6OlNlY3Rpb24tODM4OQ==","title":"Prerequisites","htmlContent":"You need to know the basics of JavaScript. If you have experience with React that will help but is not required.
You do need a computer with a text editor and mobile phone, iOS or Android for testing your project. You can also test from the desktop using the iOS or Android simulator, but this is more work than testing on a real phone. For this purpose of this tutorial, we will test from a real device.
"},{"id":"T0E6OlNlY3Rpb24tODM5MA==","title":"Learning Outcomes","htmlContent":"By the end of this tutorial, students should be able to...
Let's get a good outline going of what we need to do:
To work with React Native you'll need to install Node.js:
Install Node via this download link, or through a package manager of your choice such as Homebrew
\nIf you're building apps for iOS you'll want to install Xcode. This only runs on a Mac. If you want to build apps for Android you'll want to install Android Studio. This runs on either Mac or Windows.
If you're building for iOS, install Xcode here and be sure to install with Command Line Tools as well. If you didn't, you can still install them by following these instructions
\n\nIf you're building for Android, install Android Studio here
\nMuch like we've done in earlier tutorials, make sure you're committing your code as you complete milestones. At a minimum, you should make a commit whenever the tutorial prompts you.
Now set up your repo!
\nMake your first commit
\n$ git init\n$ git add .\n$ git commit -m 'project init'\n\nNow Go to GitHub and create a public repository called REPO-NAME, and now associate it as a remote for your local git project and then push to it.
\nPush it!
\n$ git remote add origin GITHUB-REPO-URL\n$ git push origin main -u\n\n
Once those are done, let's get our project set up. We're going to be using Expo to display our product on our mobile devices.
Open the terminal and install Expo. After that, use Expo to initialize your project. Replace <NameOfProject> with the name of the project you are creating.
$ npm install expo-cli --g\n$ expo init <NameOfProject>\n\n
Expo will prompt you with a few commands. Provide the following answers:
The command will prompt you for the type of starter project you want to create. Choose 'Blank template'
\n\nNext, the command prompts you for an app name. This can be different from the project name.
\n\nWait for the process to finish installing all of the dependent files.
\nWhile those are installing, you'll need to install the Expo Client on your phone before being able to use your app. Expo Client runs in your phone and is used to preview your App while you work.
Install the Expo Client on your phone:
\n\n\n\nSign up for an account in the app in order to use it.
\nAfter all the dependencies are installed, follow the prompts at the end:
Run the following commands, replacing <NameOfProject> with your project name:
$ cd <NameOfProject>\n$ npm start\n\nThis should open a browser window which looks something like:
Scan the QR code in the lower left with your phone.
\n\nOn the iPhone you can open the camera and scan the image, you don't need to take a picture. The phone should open a notification asking if you want to open Expo.
\nYou should be up and ready to go now. Let's write some code!
"},{"id":"T0E6OlNlY3Rpb24tODM5Ng==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'project init'\n$ git push\n\nLet's go over some building blocks of React and React Native that we will use to create our Wthr app.
"},{"id":"T0E6OlNlY3Rpb24tNzkxNw==","title":"Components","htmlContent":"React projects are written in JavaScript. The basic building block in React is the Component. Components are usually things you can see on the screen and may also have some business logic code that manages their behavior.
Components can be written as a function or as a class that extends React.Component.
Look at App.js in your project. This file in the entry point. It's also the top level component. Think of components like a tree: one component can branches/child components and these can have their own children. App.js is like the root of the tree.
Review App.js below and make sure you understand what's going on:
// This imports React from the 'react' package\nimport React from 'react';\n// This imports two native Components: `Text`, and `View` from the 'react-native' package.\n// `StyleSheet` is a helper Object for creating styles sheets in React Native. \nimport { StyleSheet, Text, View } from 'react-native';\n\n// The next block of code is the definition of a component. This component is named App, and it extends `React.Component`.\n// Components that extend `React.Component` must implement a render function. The `render()` method must return JSX.\nexport default class App extends React.Component {\n render() {\n // JSX is an extension of the JavaScript language. It allows you to write code that looks like HTML/XML within your JavaScript.\n return (\n // This is a View component with a child Text component. These are displayed on the screen in the default app. Remember these were imported above.\n <View style={styles.container}>\n <Text>Open up App.js to start working on your app!</Text>\n </View>\n );\n }\n}\n\n// This defines an object that will be used to style the components here in the app component.\nconst styles = StyleSheet.create({\n // These properties of `container` are standard CSS properties, and the values are the same values you would have used in CSS.\n container: {\n flex: 1,\n backgroundColor: '#fff',\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\n
React Native uses native components. So far we've seen the View and Text Components, let's cover those in a bit more detail:
Makes text
<Text>Some text that is displayed...</Text>
A view is a rectangular area on the screen that can display child elements.
<View>\n ...Child Components...\n</View>\n
React native supports a subset of CSS style properties and units.
Typically you'll set all styles \"inline\" on each element and define them as a JS Object.
<View style={{backgroundColor:'#f00'}}></View>
Let's define a component that displays the Weather Data:
Create a new file named DisplayWeather.js. Make a folder in your project named: Components save this file there.
Add the following to DisplayWeather.js:
import React from 'react'\nimport { Text, View, StyleSheet } from 'react-native'\n\nconst DisplayWeather = (props) => {\n return (\n <View>\n <Text>72˚</Text>\n </View>\n )\n}\n\nexport default DisplayWeather\n\n
This defines a simple component. This component is defined as a function. Component function based component must return JSX and should take a single parameter named props. The View component will act as a container for the Text, and the Text will display the temperature.
For now, we will assume the temperature is 72˚. In the future, you will get the weather data from an online service and display the actual temperature here.
Lastly, let's add a style sheet. Do this by defining a variable named styles and assigning it an Object with CSS properties that can be applied to Components.
Add a StyleSheet to /Components/DisplayWeather.js:
import React from 'react'\nimport { Text, View, StyleSheet } from 'react-native'\n\nconst DisplayWeather = (props) => {\n return (\n <View style={styles.container}>\n <Text style={styles.temp}>72˚</Text>\n </View>\n )\n}\n\nexport default DisplayWeather\n\n// These objects are assigned to the `style` prop on each of the two components.\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center'\n },\n temp: {\n fontSize: 40,\n fontWeight: 'bold'\n }\n})\n\n
Now that we have a component, let's import and display it in the app:
Add the following at the top of App.js.
import DisplayWeather from './Components/DisplayWeather'\n\n
Notice, when importing your own files you'll need to include a path. Since the file is in the same folder the path begins: './'
Replce the current component in the render() method of App.js with your component:
<View style={styles.container}>\n <DisplayWeather />\n</View>\n\n
Notice that you don't need to use a closing tag for DisplayWeather since it doesn't have any children. You do need to use /> to 'self-close' this tag.
Try loading the app on your phone, you should see it say 72˚ in the center of the screen.
Congrats! You got some great practice with using and creating React Native Components!
"},{"id":"T0E6OlNlY3Rpb24tNzkyMg==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added displayweather component'\n$ git push\n\nAdd another Text component to display a description of the weather. Edit the Display Weather component. Add another Text component below the Temp. Use some text that describes the weather, something like:
\n\nPartly Cloudy
\n\nSave and test your work. Your app should refresh its view in Expo.
\ncomponentDidMount methodComponents have a lifecycle that can be used to track when they are created and when they are removed. We would like the App Component to get the geolocation when the component is created.
To get the weather data, we need to know the location of the phone. We can get this:
navigator.geolocation.getCurrentPosition(success, error, options)
The component needs to know if the location data is available or not. Getting location data is an asynchronous operation. You'll need to make a request and wait for a response.
"},{"id":"T0E6OlNlY3Rpb24tNzkyNQ==","title":"Component Lifecycle methods","htmlContent":"The componentDidMount() method is called when the component is created and added to a view. The code in this method will run at that time. The code here requests the current position. If the request is successful it prints the data to the console if not it prints an error.
To get geolocation, add the componentDidMount() method to App.js:
export default class App extends React.Component {\n\n componentDidMount() {\n navigator.geolocation.getCurrentPosition((location) => {\n console.log(location)\n }, (err) => {\n console.log(err.message)\n })\n }\n\n render() {\n return (\n <View style={styles.container}>\n <DisplayWeather />\n </View>\n );\n }\n}\n\n...\n\n
Running the code now will cause Expo to refresh your and the phone will ask you for permission to use your location. Tapping Allow will show the following in the console where you ran npm start a moment later:
Object {\n \"coords\": Object {\n \"accuracy\": 65,\n \"altitude\": 34.92243192580078,\n \"altitudeAccuracy\": 10,\n \"heading\": -1,\n \"latitude\": 37.75495136832096,\n \"longitude\": -122.49818570206919,\n \"speed\": -1,\n },\n \"timestamp\": 1552707836378.427,\n}\n
NOTE: You may need to restart the expo app and re-scan the QR code to see the above output.
"},{"id":"T0E6OlNlY3Rpb24tNzkyNg==","title":"State","htmlContent":"Your component needs to know when it has geolocation and when it doesn't. It won't have the data when loads, and it may never get the data if it isn't allowed access to the phone's location or if the data isn't available for some other reason.
You can use state to keep track of this. state is a feature of Class-based components, and setting state will cause a component to render. This means that changing state will allow your component to redraw itself!
Define some state by adding a constructor to App.js within the class definition:
export default class App extends React.Component {\n\n...\n\nconstructor(props) {\n super(props)\n\n // These will hold the user's location and the weather data when it is loaded\n this.state = {\n location: null,\n weather: null\n }\n}\n\n...\n\n}\n\n
Next, we need to set the value of the location state in componentDidMount:
Update componentDidMount in App.js to the following:
componentDidMount() {\n navigator.geolocation.getCurrentPosition((location) => {\n // Now we're setting the state instead of just logging to console\n // You'll always set state by calling `this.setState()`.\n this.setState({ location })\n }, (err) => {\n console.log(err.message)\n })\n}\n\n
Let's get some weather data to load. We'll get ours from openweathermap.org.
Go to openweathermap.org now and make a user account.
\n\nOnce you've signed in, select API Keys from the nav bar, and copy your developer API key.
\nReact Native uses native systems to get geolocation and to make network requests. These have all been mapped to a JavaScript API that works just like it does in the browser.
Before we dive into using our brand new API Key. We need to make sure we're storing it safely in our app. We don't want to just hard-code it since that means when we push it to GitHub, it's out for anyone to use! Let's safeguard this now using an .env file, where we can store our private info (such as API Keys) and not have them get uploaded to GitHub or hard-coded in our .js files.
First thing we need to do is install react-native-dotenv, which lets you import environment variables from a .env file.
Follow the install instructions on the react-native-dotenv GitHub page
\n\nNOTE: Your project currently does not have a .babelrc file as the page mentions. Here's a .babelrc example that should match what the react-native-dotenv page is requesting:
{\n \"presets\": [\n \"module:metro-react-native-babel-preset\",\n \"module:react-native-dotenv\"\n ]\n}\n\n
IMPORTANT NOTE: Make sure your .gitignore is set up to properly ignore .env files.
Let's create our .env file now:
At the top level of your project directory, create a new .env file, replacing your_api_key with your actual key (no quotes):
WEATHER_API_KEY=your_api_key\n\n
Now we can actually add a new method to the App Class that will load in our weather data:
Create the loadWeather method in the App Class of App.js, remembering to import our WEATHER_API_KEY at the top of the file:
import { WEATHER_API_KEY } from 'react-native-dotenv'\n\nexport default class App extends React.Component {\n\n...\n\nloadWeather() {\n const apikey = WEATHER_API_KEY\n const { latitude, longitude } = this.state.location.coords\n const units = 'Imperial'\n const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apikey}&units=${units}`\n // `fetch()` is used to load data\n fetch(url)\n // After a connection is made the data is streamed as JSON\n .then(res => res.json())\n // When that resolves we use `this.setState()` to assign the weather data to state which will also re-render the component.\n .then(json => this.setState({ weather: json }))\n .catch(err => console.log(err.message))\n}\n\n...\n\n}\n\n
Call this method when you resolve the location in componentDidMount.
Update componentDidMount to call loadWeather:
componentDidMount() {\n navigator.geolocation.getCurrentPosition((location) => {\n this.setState({ location })\n this.loadWeather()\n }, (err) => {\n console.log(err.message)\n })\n}\n\n
Great work on using State to configure and manage components, as well as using some native networking! We shouldn't see anything change in the app quite yet. We still have some work to do in terms of passing the data from App to DisplayWeather, which we'll get to in the next chapter.
$ git add .\n$ git commit -m 'implemented state and component lifecycle'\n$ git push\n\nBefore our app will actually display the weather data, we need to pass the weather data from App to DisplayWeather. Components all have a special property named props that are used for passing information from a parent component to a child component.
"},{"id":"T0E6OlNlY3Rpb24tNzkzMA==","title":"Passing Props","htmlContent":"Use props to pass the weather data from App to DisplayWeather in App.js:
render() {\n return (\n <View style={styles.container}>\n <DisplayWeather data={this.state.weather} />\n\n </View>\n );\n}\n
Props are used to passed data from a parent to a child component. Children get values from keys on the props object.
We want the DisplayWeather component to display a message when the weather data is loading. It also needs to display an error message if there was a problem, and otherwise display the weather data.
In the App component you set your data on the data prop. In DisplayWeather you get this as props.data, which we'll use to help us check the above conditions.
Add these two if statements above return in /Components/DisplayWeather.js:
const DisplayWeather = (props) => {\n // No data yet, so it must still be loading\n if (props.data === null) {\n return <Text>Loading...</Text>\n }\n\n // Cod is where codes go, so if an error occurred, the value would not be 200 (could be 400, 404, etc.)\n if (props.data.cod !== 200) {\n return <Text>An Error has occurred</Text>\n }\n\n // If no error and not loading, load/display weather data, grabbing the appropriate data from props\n const { temp } = props.data.main\n const { description } = props.data.weather[0]\n\n return (\n <View style={styles.container}>\n <Text style={styles.temp}>{temp}˚</Text>\n <Text>{description}</Text>\n </View>\n )\n}\n\n
The weather data from OpenWeatherMap is a JSON object. It has a structure. To get information like the temperature and description you'll need to navigate the structure:
Object {\n \"base\": \"stations\",\n \"clouds\": Object {\n \"all\": 1,\n },\n \"cod\": 200,\n \"coord\": Object {\n \"lat\": 37.75,\n \"lon\": -122.5,\n },\n \"dt\": 1552710644,\n \"id\": 5391997,\n \"main\": Object {\n \"humidity\": 50,\n \"pressure\": 1021,\n \"temp\": 54.36,\n \"temp_max\": 59,\n \"temp_min\": 50,\n },\n \"name\": \"San Francisco County\",\n \"sys\": Object {\n \"country\": \"US\",\n \"id\": 4322,\n \"message\": 0.0097,\n \"sunrise\": 1552745967,\n \"sunset\": 1552789093,\n \"type\": 1,\n },\n \"visibility\": 16093,\n \"weather\": Array [\n Object {\n \"description\": \"clear sky\",\n \"icon\": \"01n\",\n \"id\": 800,\n \"main\": \"Clear\",\n },\n ],\n \"wind\": Object {\n \"deg\": 360,\n \"speed\": 5.82,\n },\n}\n
In the render() method in DisplayWeather, we used:
const { temp } = props.data.main\nconst { description } = props.data.weather[0]\n\n
Find main.temp in the JSON snippet above
This gives us 54.36 which is the temperature in F.
Next find weather[0].description in the JSON snippet above.
Weather is an array which is why we need to get the first element with [0].
Great work on using Props and State to configure and manage components in this chapter!
"},{"id":"T0E6OlNlY3Rpb24tNzkzMw==","title":"Product So Far","htmlContent":"Save and reload the app, you should now be getting the temperature of where you're at with a short description of the weather.
Congrats on building your first native react app!
As you go through FEW 2.4, reflect back to this tutorial and check that the material you're learning is builds upon what you learned here.
\nWe promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
This allows us to get feedback on how well the students are grasping the learning outcomes, and tells us where we can improve the tutorial experience.
"},{"id":"T0E6OlNlY3Rpb24tNzkzNQ==","title":"Stretch Challenges","htmlContent":"Display some more of the weather info in the DisplayWeather component. Try these:
\n\nTo do this you will need to get the value by navigating the Weather JSON. Then you'll need to add a <text> component to display the value.
Last you'll want to style the new elements. Add a new property to the styles object for the element that will use the style. Think of this like a class name you might assign to an HTML element.
Next, assign an object with style properties under this property. Here are some properties you can use:
\n\nfontSizefontWeightcolorAssign these properties values that work with React Native. React Native does not use the full selection of CSS values and generally doesn't use units.
\n\nFor example fontSize can be set to 24 and that's the equivalent of font-size: 24px in CSS terms.
Some properties take keyword values these are always a string and React Native usually implements a subset of values supported by CSS. For example fontWeight: 'bold' is the same as font-weight: bold in CSS.
Check the style properties by looking at the component reference. This will list all of the CSS properties supported by that component. Here is a link to the Text Component.
\nBefore our app will actually display the weather data, we need to pass the weather data from App to DisplayWeather. Components all have a special property named props that are used for passing information from a parent component to a child component.
"},{"id":"T0E6OlNlY3Rpb24tNzkzMA==","title":"Passing Props","htmlContent":"Use props to pass the weather data from App to DisplayWeather in App.js:
render() {\n return (\n <View style={styles.container}>\n <DisplayWeather data={this.state.weather} />\n\n </View>\n );\n}\n
Props are used to passed data from a parent to a child component. Children get values from keys on the props object.
We want the DisplayWeather component to display a message when the weather data is loading. It also needs to display an error message if there was a problem, and otherwise display the weather data.
In the App component you set your data on the data prop. In DisplayWeather you get this as props.data, which we'll use to help us check the above conditions.
Add these two if statements above return in /Components/DisplayWeather.js:
const DisplayWeather = (props) => {\n // No data yet, so it must still be loading\n if (props.data === null) {\n return <Text>Loading...</Text>\n }\n\n // Cod is where codes go, so if an error occurred, the value would not be 200 (could be 400, 404, etc.)\n if (props.data.cod !== 200) {\n return <Text>An Error has occurred</Text>\n }\n\n // If no error and not loading, load/display weather data, grabbing the appropriate data from props\n const { temp } = props.data.main\n const { description } = props.data.weather[0]\n\n return (\n <View style={styles.container}>\n <Text style={styles.temp}>{temp}˚</Text>\n <Text>{description}</Text>\n </View>\n )\n}\n\n
The weather data from OpenWeatherMap is a JSON object. It has a structure. To get information like the temperature and description you'll need to navigate the structure:
Object {\n \"base\": \"stations\",\n \"clouds\": Object {\n \"all\": 1,\n },\n \"cod\": 200,\n \"coord\": Object {\n \"lat\": 37.75,\n \"lon\": -122.5,\n },\n \"dt\": 1552710644,\n \"id\": 5391997,\n \"main\": Object {\n \"humidity\": 50,\n \"pressure\": 1021,\n \"temp\": 54.36,\n \"temp_max\": 59,\n \"temp_min\": 50,\n },\n \"name\": \"San Francisco County\",\n \"sys\": Object {\n \"country\": \"US\",\n \"id\": 4322,\n \"message\": 0.0097,\n \"sunrise\": 1552745967,\n \"sunset\": 1552789093,\n \"type\": 1,\n },\n \"visibility\": 16093,\n \"weather\": Array [\n Object {\n \"description\": \"clear sky\",\n \"icon\": \"01n\",\n \"id\": 800,\n \"main\": \"Clear\",\n },\n ],\n \"wind\": Object {\n \"deg\": 360,\n \"speed\": 5.82,\n },\n}\n
In the render() method in DisplayWeather, we used:
const { temp } = props.data.main\nconst { description } = props.data.weather[0]\n\n
Find main.temp in the JSON snippet above
This gives us 54.36 which is the temperature in F.
Next find weather[0].description in the JSON snippet above.
Weather is an array which is why we need to get the first element with [0].
Great work on using Props and State to configure and manage components in this chapter!
"},{"id":"T0E6OlNlY3Rpb24tNzkzMw==","title":"Product So Far","htmlContent":"Save and reload the app, you should now be getting the temperature of where you're at with a short description of the weather.
Congrats on building your first native react app!
As you go through FEW 2.4, reflect back to this tutorial and check that the material you're learning is builds upon what you learned here.
\nWe promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
This allows us to get feedback on how well the students are grasping the learning outcomes, and tells us where we can improve the tutorial experience.
"},{"id":"T0E6OlNlY3Rpb24tNzkzNQ==","title":"Stretch Challenges","htmlContent":"Display some more of the weather info in the DisplayWeather component. Try these:
\n\nTo do this you will need to get the value by navigating the Weather JSON. Then you'll need to add a <text> component to display the value.
Last you'll want to style the new elements. Add a new property to the styles object for the element that will use the style. Think of this like a class name you might assign to an HTML element.
Next, assign an object with style properties under this property. Here are some properties you can use:
\n\nfontSizefontWeightcolorAssign these properties values that work with React Native. React Native does not use the full selection of CSS values and generally doesn't use units.
\n\nFor example fontSize can be set to 24 and that's the equivalent of font-size: 24px in CSS terms.
Some properties take keyword values these are always a string and React Native usually implements a subset of values supported by CSS. For example fontWeight: 'bold' is the same as font-weight: bold in CSS.
Check the style properties by looking at the component reference. This will list all of the CSS properties supported by that component. Here is a link to the Text Component.
\n