Developer.md

Crossplatform React-Native

Developer documentation

Package renamed
New package name: react-native-cross-components

These are some of the common use components Crossplatform use in our projects.

---

Table of Contents

• Crossplatform React-Native Components
  • Table of Contents
  • Install
    • Important Icons!
  • Documentation
  • Components
    • CrossButton
    • CrossBusyIndicator
    • CrossSpinner
    • CrossLabel
    • CrossEditor
  • Can not run ShellScript
• Tools
  • Java
  • Git
    • Git Credential Manager
  • Node
  • Yarn
  • Visual Studio Code
• Scripts
  • yarn dev
  • yarn read-sh
  • yarn install-globals
  • yarn lint
  • yarn build
  • yarn build-watch
  • yarn start
  • yarn test-watch
  • yarn test
  • yarn docs
  • npm-version
• Debugging
• Release
  • Publish new version
    • Publish GitHub documentation

Table of contents generated with markdown-toc

Install

Install with react-native-paper if you don't already have it.

Package renamed
Previous package name: @crossplatform/react-native-components
New package name: react-native-cross-components

	npm i react-native-paper
	npm i react-native-cross-component

Or if you're hanging with the cool kids

	yarn add react-native-paper
	yarn add react-native-cross-component

Can not run ShellScript

Adjust the rights on SH-files for your user (in root). Remarks: we use bash terminal in VS Code

    yarn read-sh

Or manually:

	sudo find . -name "\*.sh" | xargs chmod u+x

Tools

Java

We use version 8 of the Java JDK. On OSX, remove any older versions according to this process

https://stackoverflow.com/questions/46770453/java-error-when-using-git-credential-manager-in-mac-on-osx

    brew cask remove java
    sudo rm -rf "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin"
    sudo rm -rf "/Library/PreferencePanes/JavaControlPanel.prefPane"
    sudo rm -rf "~/Library/Application Support/Oracle"
    sudo rm -rf "~/Library/Java"

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Git

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

https://git-scm.com/downloads

Git Credential Manager

You need the manager to log in to Microsoft from MacOS using Git.
If you've updated Java, re-install GCM after.

	git-credential-manager install

Node

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

• Node v8.9.4 (node --version)
• npm 5.6.0 (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.

• Prettier
• TypeScript Hero
• TypeScript importer
• TypeScript toolbox
• Add jsdoc comments

Scripts

yarn dev

Always run after pull / clone!

• Installs global tools (npm packages, CLI tools)
• Cleans code using yarn lint

yarn read-sh

See Can not run ShellScript

yarn install-globals

Install global CLI tools required by the project

yarn lint

Executes lint.sh that runs prettier and tslint code formatting, fixing inconsistencies.

yarn build

Start TypeScript compiler. Run at least once to generate /lib folder where JavaScript resides. You can also...

yarn build-watch

Start TypeScript compiler and watch for changes.

yarn start

Start the React-Native packager. You can also start it with options:

	npm start -- --reset-cache
	# or
	yarn start -- --reset-cache

yarn test-watch

Run tests in watch mode, for development, updating snapshots as needed.

Runs the jest test runner on your tests in watch mode with interactive console. Remember to run u option when prompted to update snapshots. This is alias to npm run test

yarn test

Run tests as CI, not updating any snapshots. Run this before commit to ensure tests will work on build server.

You can run CI style tests in respective folder using

yarn test

But in development you would want to test and update Jest snapshots (--u):

yarn test-watch

yarn docs

Generate documentation. Read more

npm-version

Up the NPM package version before running npm publish. Automatically run as prepublishOnly command.

Debugging

Use VS Code's debugging capabilities to maintain a effective development cycle.

Launch.json configuration is not checked in, but here is the debug launch.json for React-Native

        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug in Expo",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },

And finally Jest Test debugging:

({
  "name": "Debug Jest Tests",
  "type": "node",
  "request": "launch",
  "runtimeArgs": [
    "--inspect-brk",
    "${workspaceRoot}/node_modules/.bin/jest",
    "--runInBand",
    "--collectCoverage=false"
  ],
  "args": ["test", "--runInBand", "--no-cache", "--env=jsdom"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "port": 9229
},
{
  "type": "node",
  "request": "launch",
  "name": "Jest Current File",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest",
  "runtimeArgs": [
    "--inspect-brk",
    "${workspaceRoot}/node_modules/.bin/jest",
    "--runInBand",
    "--collectCoverage=false"
  ],
  "args": ["${file}", "--no-cache", "--env=jsdom"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "port": 9229
})

Release

The project is released through NPM

The source code is available on the Crossplatform GitHub.

Publish new version

1. Update the version. This will also run build and linting.

	yarn npm-version

2. Publish the new version on NPM (if not logged in run npm adduser first)

	npm publish --access public

Publish GitHub documentation

Generate documentation using the docscommand

	yarn docs

This will

1. Generate docs using the typedoc library (yarn generate-docs)
2. Publish to GitHub pages using the gh-pages library (yarn gh-pages)