Running.COACH React Native component library

This repo contains the shared React Native components of Running.COACH. The can be used both on the website and the mobile apps. It uses react-native-web to render native components on the web.

Usage

• Add RC_RN to your project: yarn add runningcoach_reactnative
• Embed the components into your app

Component Structure

• Components are classes contained in a single .tsx file. They include the following parts:
  • Props: those are values that can be passed to the component by the host application. Examples include the API host name, user ID or the browser version. Props can not be changed after the component has been mounted.
  • State: those are values the component generates or fetches after it was mounted, mainly used for storing internal values. Examples include responses of a web request or the current date. State may be changed by the component itself by calling setState(). Must be set in the constructor.
  • render(): the actual rendering of the component. May use both Props and State to choose what to display.
  • State and Prop interface: this defines the types of the Prop and State variables.
  • componentDidMount(): method that is called whenever the component is included in a host application. Useful to perform requests and populate the State.

Dev Guidelines

• Create components which can be used both on mobile and the web. This includes allowing style changes using props; using responsive designs and allowing to set the API host
• Components should be self-contained and run any web requests themselves.