The Times react-native components used in the mobile and tablet apps

times-components-native Home of The Times’ react native components used in the mobile and tablet apps.

Prerequisites

For more details read the React Native documentation.

Getting Started

Install fontforge: brew install fontforge (See Fonts section)
Run yarn install
Components can be seen running in a storybook:
cd ios && pod install && cd -
yarn start and leave it running
Run the iOS app using XCode or open the Android project to run on Android.

Native Apps & TCN

In order to run development servers for native applications, start react-native dev server via:

yarn android:native or yarn ios:native

For step by step guide, see the corresponding documentation for android and iOS.

Testing

There is a mixture of different checks & tests split acrossing linting, typechecking and unit tests.

yarn lint
yarn test:all
yarn test:android
yarn test:ios
yarn test:common

Releases

Production Releases

The release to production pipeline comes with a hold step on CircleCI for builds running on the master branch. Once you bump the version in a PR, merge your PR and trigger the hold_release_prod step in the build. This will publish the artifacts, for iOS in the artifacts repo and for Android in JFrog.

Beta Releases

Similar to the production releases, you can triger builds with the hold_release_beta step from all branches (apart from master) as long as the version in package.json is a beta version (includes the word beta). Once the “hold” step is approved, the pipeline will build and push to the beta artifacts repos (different location to prod).

Updating the native apps

Once a release is published, you will have to bump the version in the native apps. That would be the Podfile for iOS and the build.gradle file for Android.

Miscellaneous

Fonts ⚠️

In order to view the storybook on native, you’ll need to fix broken fonts. This fix is done automatically when running storybook (both web and native), but requires that fontforge is installed, otherwise the fix won’t be applied and you’ll get the classic red error screen when trying to use a broken font.

Schema

See utils package on how to update the schema

Contributing

See the CONTRIBUTING.md for an extensive breakdown of the project

Download Details:

Author: newsuk

Source Code: https://github.com/newsuk/times-components-native

#react-native #react #mobile-apps