Heart-Care

https://github.com/yousef-zeiad/HeartCare.git

React-native iOS / Android app

---

Table of Contents

• Assets
  • images
• Scripts
  • yarn pod-install
  • yarn start
  • yarn ios
  • yarn android
• Integrations:
  • Expo
  • Styled Components
  • React-Native-Shared-Element
  • React-Navigation
  • React-Native-animated-charts
• Components
  • Header
  • HeartRatingChart
• Environment
  • Git
  • Node
  • Yarn
  • Visual Studio Code
• Upgrade React-Native
• Environment Variables

Table of contents generated with markdown-toc

Assets

Custom assets are used with license and available in the assets folder.

images

Common images used by the app. In root you'll find app icon, splash etc.

App First Screen

Structure

Describes the app structure and usage of each part. Add additional ReadMe-files in each folder as needed and link them here.

• assets - place any images and fonts here
• components - see Components section
• config - global config files
• screens - main app code divided by feature. A screens folder contains all the screens, components, etc for that feature.
• navigation - react-navigation implementation.

yarn start

Start the React-Native packager. You can optionally

• yarn clear to start and reset cache of the bundler.

yarn ios

Like npm start, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.

Runs the simulator named iPhone SE (2nd generation) which we consider most stable.

yarn android

Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup).

Integrations:

Expo

The app is built using Expo for React-Native. It allows working with JavaScript without native code and instant releases Over The Air (OTA). The commands (above) uses Expo to start, run, build and deploy the app.

• app.json - Expo config
• expo-shared - shared Expo config for all developers

Styled Components

Project uses Styled components v5.3.0 for RN to make the styles read more:

• https://styled-components.com/docs

React-Native-Shared-Element

Shared-element transitions add shine to your app but can be hard to do in practise. It's possible to achieve some nice transitions by building custom modals and using the the core react-native API, But this also brings with it many restrictions. Things like resizing an image or making sure no "flicker" occurs even an older Android devices can be a real challenge.

Read more:

• react-native-shared-element

React-Native-animated-charts

The library was designed to create aesthetic, animated (so far only linear) charts based on a given input. The main assumptions of the library were to create smooth transitions between subsequent data sets. Read more:

• react-native-@rainbow-me/animated-charts

Read more:

• https://github.com/rainbow-me/react-native-animated-charts

Components

The design uses different components depending on the type of data. Here's a reference to what component to use when.

Header

A Main header for all the screen that take the icons and a children as a prop

import { Header } from '../../components/Header';

	return (<Header isIcon={false}>
        <HeartRates height={false}
         marginBottom={false}
         fontSize={false} />
      </Header>
);

HeartRatingChart

A Nice Chart Handler that you can use in more screens and take the dynamic height and width.

import { HeartRatingChart } from '../../components/HeartRatingChart';
  return (
            <HeartRatingChart
              item={item}
              size={Layout.window.width}
              points={points}
              key={index}
             />
           );

Environment

Git

We're using latest stable. Install the version for your OS from:

https://git-scm.com/downloads

Node

These versions provides stable compatibility with React Native and other frameworks:

• Node v12.XX (node --version)
• npm 6.XX (npm --version)

Download Node with NPM

Yarn

We install and run our scripts with yarn, as an alternative to npm:

Download Yarn

Visual Studio Code

We use Visual Studio Code with relevant plugins.

• React-Native Tools
• Prettier
• TypeScript Hero
• TypeScript importer
• TypeScript toolbox
• Add jsdoc comments
• Expo Tools
• GitHub
• Styled Components
• ES7 React/Redux/GraphQL/React-Native snippets
• Tabnine Autocomplete AI: autocompletion smart code

Upgrade React-Native

For a native project. Expo projects follows Expo version and upgrade guide.

npx react-native upgrade

https://reactnative.dev/docs/upgrading#react-native-cli https://react-native-community.github.io/upgrade-helper/

Environment Variables

You can configure some of Create React Native App's behavior using environment variables.