Home of The Times' react/react native components, using react-native-web to share across platforms

We require MacOS with Node.js (version >=8 with npm v5), yarn (latest) and watchman installed. Native development requires Xcode, Android Studio and JDK 8.

You can try without these requirements, but you'd be on your own.

Go to http://components.thetimes.co.uk

1. Install fontforge: brew install fontforge (See Fonts section)

2. Run yarn install

3. Components can be seen running in a storybook:

• web storybook
  1. yarn storybook
  2. go to http://localhost:9001
• native storybook
  1. yarn storybook-native and leave it running
  2. yarn ios to start the iOS app
  3. To start the Android app:
     • Start a virtual device
     • Check Android SDK path is exported to $ANDROID_HOME. In Mac, android sdk is installed to ~/Library/Android/sdk by default. export ANDROID_HOME="/Users/<USERNAME>/Library/Android/sdk"
     • yarn android
     • If you get build errors, check your JDK version with javac -version, which should print javac 1.8.XXXX. Earlier or later versions may not work.
  4. go to http://localhost:7007

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

yarn android:app or yarn ios:app

For step by step guide, see the corresponding Readme documentation for android and ios

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.

See utils package on how to update the schema

The components in this project can be debugged through your browser's developer tools. These steps assume the use of Chrome DevTools.

To debug our web Storybook:

1. yarn storybook
2. navigate to http://localhost:9001
3. open DevTools
4. Click Sources
5. In the Network tab under the leftmost pane, expand top => storybook-preview-iframe => webpack:// => . => packages

Any of these source files can be debugged directly.

To debug our native Storybook:

1. yarn storybook-native and leave it running
2. yarn android:logs or yarn ios:logs (this will build storybook app and output logs) 2a. Or you could just run yarn android or yarn ios to just build the apps
3. open the developer menu on your device (Cmd + M on Android, Cmd + D on iOS) and tap Debug JS Remotely
4. navigate to http://localhost:8081/debugger-ui if it hasn't opened automatically
5. open DevTools
6. click Sources
7. expand debuggerWorker.js => webpack:// => . => packages

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

yarn commit will commit files (same as git commit), and will aid the contributor with adding a suitable commit message inline with conventional changelog