dabbott

Prerequisites

• Basic JavaScript knowledge

Prework

• Background reading on React
• Background reading on ES6
• Exercise applies reading
• Project structure
• NPM/dependency management

dabbott

import React, { Component } from 'react'
import { AppRegistry } from 'react-native'

// Patch `AppRegistry.registerComponent` on first launch
if (!global.originalRegister) {
  global.hasRegistered = false
  global.hasRegisteredOnce = false
  global.getComponent = null

  global.originalRegister = AppRegistry.registerComponent

dabbott

// In Deco

const mapStateToProps = (state) => createSelector(
  (state) => state.storyboard,
  (storyboard) => ({
    storyboard,
  })
)

class Storyboard extends Component {

dabbott

// In Deco

class Storyboard extends Component {
  const {storyboard, dispatch, fileId} = this.props
  
  render() {
    <YOPS     
      // The currently running storyboard
      storyboardId={fileId}
    /> 

dabbott

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Image = exports.Text = exports.View = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

dabbott

Course Materials

Course Guide

Day 1 Slides

---

Documentation

dabbott

Navigation RFC
https://github.com/ericvicenti/navigation-rfc

Navigator Comparison
https://github.com/ericvicenti/navigation-rfc/blob/master/Docs/NavigationOverview.md

3 Options Today

React Native Router Flux

dabbott

@setContext
class Provider extends Component {
  render() {
    return null 
  }
}

@context(['color'])
class Hello extends Component {

dabbott

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("react-native"));
	else if(typeof define === 'function' && define.amd)
		define(["react", "react-native"], factory);
	else if(typeof exports === 'object')
		exports["@shoutem-animation"] = factory(require("react"), require("react-native"));
	else
		root["@shoutem-animation"] = factory(root["React"], root["ReactNative"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {

dabbott

http://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.6.1/index.html#width=260&scale=0.75&fullscreen=true&styles=%7B%22tab%22%3A%7B%22backgroundColor%22%3A%22rgb(250%2C250%2C250)%22%7D%2C%22header%22%3A%7B%22backgroundColor%22%3A%22rgb(250%2C250%2C250)%22%2C%22boxShadow%22%3A%22rgba(0%2C%200%2C%200%2C%200.2)%200px%201px%201px%22%2C%22zIndex%22%3A10%7D%2C%22headerText%22%3A%7B%22color%22%3A%22%23AAA%22%2C%22fontWeight%22%3A%22normal%22%7D%2C%22transpilerHeader%22%3A%7B%22backgroundColor%22%3A%22rgb(240%2C240%2C240)%22%2C%22boxShadow%22%3A%22rgba(0%2C%200%2C%200%2C%200.2)%200px%201px%201px%22%2C%22zIndex%22%3A10%7D%2C%22transpilerHeaderText%22%3A%7B%22color%22%3A%22%23888%22%2C%22fontWeight%22%3A%22normal%22%7D%2C%22tabText%22%3A%7B%22color%22%3A%22%23AAA%22%7D%2C%22tabTextActive%22%3A%7B%22color%22%3A%22%23000%22%7D%7D&title=Shoutem%20Animation&code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20View%2C%20Text%2C%20Easing%20%7D%20from%20'react