Family Mode Mobile App 🌘

This app, designed for family mode, enables family members to conveniently view each other's sleep data on the Pod, offering insights into the sleep habits of your family members.

Table of Contents

• Family Mode Mobile App 🌘
  • Table of Contents
  • Screenshot
  • How To Run
    • Assumptions Made
    • Notes
    • Troubleshooting

Screenshot

More screenshots

How To Run

To run the application locally:

1. Clone repo:

git clone https://github.com/nayemalam/family_mode_sleep_data.git

2. cd into the folder:

cd family_mode_sleep_data

3. Install dependencies:

yarn # or yarn install

4. Install CocoaPods (for ios):

cd ios && pod install

5. Go back to root and run the metro server:

yarn start

6. Run app on ios:

react-native run-ios

or

yarn ios # this will run iPhone 15 as the simulator specified

7. Run app on android:

yarn android # or react-native run-android

Assumptions Made

• based on the annotated example here, ignored heating
• there could be multiple intervals of sleep data for a single day, so the data is grouped by date (screens/Profile -> groupedDaysByTsMap)
• Assumed 8 hours as deep sleep and 6 hours as light sleep (src/components/TimeSlept)
• Created 3 fictitious family members locally all having an id attached to them (this is the challengeId), can be seen in src/services/FamilyService.ts

Notes

• Dialogs are not implemented, but the UI is designed to show the dialog
• There is a Details screen which is implemented for one type of timeseries data, but it can be extended to show other types of data (types of data can be seen in types/index.ts -> DetailsType)
• Added two tabs on the bottom, but the second tab is not necessary, it was just added to show the UI design and also to test selecting a different family member
• For "tnt" I just counted the total number of tnt's there are, technically it should be extended to show how many were tosses and how many were turns, at this moment there is a Details view that shows at what time the tnt's happened and how many during that time
• Instead of adding a percentage of sleep fitness, I opted to create a sleep fitness status (src/utils/index.ts -> sleepScoreLabel), where 0-60 is "Poor", 61-80 is "Fair", 81-90 is "Good" and 91-100 is "Excellent" - I feel that this might provide the user better understanding and feedback
• No calendar picker - the days were implemented in src/components/CircularDayScoreSelector - though it would be better to have a calendar picker
• The timeframe selector (src/components/TimeframeSelector) on the top (DAYS, WEEKS, MONTHS, YEARS) is not implemented, but the UI is designed to show the selector
• There is definitely a lot of places for improvement, but I tried to keep it focused on the main features laid out on this figma
• It will always show the current day's data and also handle when there is no data
• Built with the latest version of React Native (0.73.4) as of today's date (Feb 28, 2024)

Troubleshooting

Sometimes

yarn start --reset-cache

is needed to clear the cache and then run yarn ios or yarn android again

• if android simulator fails to boot up and it gives this error: "INSUFFICIENT STORAGE", then you can try the following:

  • open Android Studio
  • Under "More Actions" dropdown, click "AVD Manager"
  • Select your device (in my case it was "Pixel 3a API 31 arm64-v8a")
  • There is a dropdown on the right, click it and select "Edit"
  • Select "Show Advanced Settings", scroll down and adjust the "Memory and Storage" -> "RAM" to "2048" or back to "1024" and then click "Finish"
  • restart the simulator

• If above doesn't work, you can click the dropdown on the right and select "Wipe Data" or "Cool Boot Now" and then restart the simulator

• if ios simulator causes any issues, you can try the following:

  • General -> Storage Settings -> Developer -> Delete Cache

If all else doesn't work, I am more than happy to screen share/record the application and flow for both ios and android simulators.

---

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started (React Native Generated README)

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

1. Open App.tsx in your text editor of choice and edit some lines.

2. For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

   For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Now what?

• If you want to add this new React Native code to an existing application, check out the Integration guide.
• If you're curious to learn more about React Native, check out the Introduction to React Native.

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

• React Native Website - learn more about React Native.
• Getting Started - an overview of React Native and how setup your environment.
• Learn the Basics - a guided tour of the React Native basics.
• Blog - read the latest official React Native Blog posts.
• @facebook/react-native - the Open Source; GitHub repository for React Native.