Weather App Exercise

Setup Instructions

This boilerplate project was built using only JavaScript and an older version of Expo. Therefore, you will be using this repository as a guide to set up your own project from scratch.

1. Create your Expo Project

Create a new project using the following command:

npx create-expo-app --template blank-typescript

This will generate a blank template project with TypeScript enabled. For more information on the different templates, refer to this documentation.

It will ask you to name your project. Call the project your-name-weather-app.

You can now open the project in Visual Studio Code.

2. Copy Screens & Components

Create the following files, and copy the code from this repository into these files:

- components/
-- ReadingCard.tsx
- screens/
-- AddScreen.tsx
-- ReadingScreen.tsx
- services/
-- FirestoreService.ts
- firebase.ts

Note that all these files have TypeScript support.

3. Setup Navigation

For this project, we will be using React Navigation for our stack navigation.

Install the following dependencies with the following two commands:

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/elements
npx expo install react-native-screens react-native-safe-area-context

Next, update your App.tsx file with the following code:

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import AddScreen from './screens/AddScreen';
import ReadingScreen from './screens/ReadingScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home" component={ReadingScreen} />
        <Stack.Screen name="Add" component={AddScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

For the full React Navigation documentation, click here.

4. Setup Firebase

Make sure to include your Firebase Class Project configuration in the firebase.ts file.

Next, make sure to initialise Firestore for your project:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
    // YOUR FIREBASE_CONFIGURATION HERE
};

// Initialise Firebase
const app = initializeApp(firebaseConfig);

// Initialise Cloud Firestore and get a reference to the service
export const db = getFirestore(app);

---

Now we can start adding our functionality!☀️☀️🌦️🌦️