React Native adaptive view

chapter11/App.js

@@ -3,8 +3,8 @@
 import React from "react";
 import { Provider } from "react-redux";
 
-import { store } from "./src/regionsApp/store";
-import { Main } from "./src/regionsApp/main";
+import { store } from "./src/adaptiveApp/store";
+import { Main } from "./src/adaptiveApp/main";
 
 export default class App extends React.PureComponent<> {
     render() {

chapter11/App.regions.js

@@ -0,0 +1,17 @@
+/* @flow */
+
+import React from "react";
+import { Provider } from "react-redux";
+
+import { store } from "./src/regionsApp/store";
+import { Main } from "./src/regionsApp/main";
+
+export default class App extends React.PureComponent<> {
+    render() {
+        return (
+            <Provider store={store}>
+                <Main />
+            </Provider>
+        );
+    }
+}

chapter11/__BORRAME__

@@ -0,0 +1,113 @@
+http://iosres.com/
+https://material.io/tools/devices/
+http://screensiz.es/
+
+
+https://www.sebastien-gabriel.com/designers-guide-to-dpi/
+https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922
+POINTS in Apple, DIP (Density Independent Pixels) in Android
+RN: unidad siempre es DIP, no se pone la unidad
+
+
+
+import React from "react";
+import PropTypes from "prop-types";
+import { AppState, View } from "react-native";
+
+class StatusHandler extends React.PureComponent {
+    static propTypes = {
+        setStatus: PropTypes.func.isRequired
+    };
+
+    componentDidMount() {
+        AppState.addEventListener("change", this.props.setStatus.bind(this));
+        this.props.setStatus(AppState.currentState);
+    }
+
+    render() {
+        return <View hidden />;
+    }
+}
+
+export { StatusHandler };
+
+
+
+
+return (
+                <Provider>
+                    <StatusBar hidden />
+                    <ConnectedOnLayoutHandler />
+                    <ConnectedOnStatusHandler />
+                    <ConnectedKillSwitchHandler onSuccess={() => null} />
+                    <TopLevelNavigator
+                        ref={navigatorRef => NavigatorService.setContainer(navigatorRef)}
+                        uriPrefix={Platform.OS == "android" ? "tbstntrn://tbstntrn/" : "tbstntrn://"}
+                    />
+                </Provider>
+            );
+
+
+
+
+Todos los componentes que precisan estado se conectan a state.view.appLayout
+
+
+
+
+
+import { HomeCardHandset } from "./homeCard.handset";
+import { HomeCardTablet } from "./homeCard.tablet";
+import { HomeCardTV } from "./homeCard.tv";
+import { selectViewForFormFactor } from "../../utilities";
+
+export const HomeCard = selectViewForFormFactor(HomeCardHandset, HomeCardTablet, HomeCardTV);
+
+
+
+
+
+
+
+
+
+import React from "react";
+import PropTypes from "prop-types";
+
+// eslint-disable-next-line react/require-render-return
+class HomeCardCommon extends React.PureComponent {
+    static propTypes = {
+        appLayout: PropTypes.string.isRequired,
+        ...
+    };
+
+    render() {
+        throw new Error("MUST IMPLEMENT ABSTRACT render() METHOD");
+    }
+}
+
+export { HomeCardCommon };
+
+
+
+
+
+action para layout:
+
+export const resetLayout = ({ view: { ...rest } }) => ({
+    view: {
+        ...rest,
+        appLayout: `${Dimensions.get("window").height}/${Dimensions.get("window").width}`
+    }
+});
+
+
+
+
+Todas las vistas son
+
+render() { if FormFactor.isPortrait ... else ... }
+
+
+
+

chapter11/devices.csv

@@ -0,0 +1,287 @@
+Device Name,Platform,OS Version,Portrait Width,Landscape Width,Release Date
+Acer Iconia Tab A1-810,Android,4.2.2,768,1024,2013-05
+Acer Iconia Tab A100,Android,4.0.3,800,1280,2011-04
+Acer Iconia Tab A101,Android,3.2.1,600,1024,2011-05
+Acer Iconia Tab A200,Android,4.0.3,800,1280,2012-01
+Acer Iconia Tab A500,Android,4.0.3,648,1280,2011-04
+Acer Iconia Tab A501,Android,3.2,800,1280,2011-04
+ACER Liquid E2,Android,4.2.1,360,640,2013-05
+Ainol Novo 7 Elf 2,Android,4.0.3,496,1024,2012-06
+Alcatel One Touch Idol X,Android,4.2.2,480,800,2013-07
+Alcatel One Touch T10,Android,4.0.3,480,800,2013-03
+Alcatel One Touch 903,Android,2.3.6,320,427,2012-08
+Alcatel (Vodafone) Smart Mini 875,Android,4.1.1,320,480,2013-07
+Amicroe 7 TouchTAB II,Android,4.0.4,480,800,2013-01
+Amicroe 9.7 TouchTAB IV,Android,4.1.1,768,1024,2013-05
+Archos 70b (it2),Android,3.2.1,600,1024,2012-02
+Archos 80G9,Android,3.2,768,1024,2011-09
+Arnova 10b G3,Android,4.0.3,600,1024,2012-05
+Arnova 7 G2,Android,2.3.1,480,800,2011-09
+Arnova 7F G3,Android,4.0.3,640,1067,2012-11
+Arnova 8C G3,Android,4.0.3,800,1067,2012-11
+ASUS B1-A71,Android,4.1.2,600,1024,2013-01
+ASUS Fonepad,Android,4.1.2,601,962,2013-04
+ASUS MeMo Pad ME172V,Android,4.1.1,600,1024,2013-01
+ASUS MeMo Pad FHD10/ME302C 10.1,Android,4.2.2,800,1280,2013-08
+ASUS Padfone,Android,4.0,800,1128,2012-06
+ASUS Transformer Pad TF300T,Android,4.0.3,800,1280,2012-04
+ASUS Transformer TF101,Android,3.1,800,1280,2011-04
+ASUS Vivo,Windows RT,8.0,768,1366,2012-11
+Barnes & Noble Nook HD,Android,4.0.4,600,960,2012-11
+BAUHN AMID-972XS,Android,4.0.3,768,1024,2012-09
+BAUHN AMID-9743G,Android,4.1.2,768,1024,2013-02
+BAUHN ASP-5000H,Android,4.2,360,640,2013-09
+BlackBerry 9520,BlackBerry OS,5,345,691,2009-11
+BlackBerry Bold 9000,BlackBerry OS,4.0.0.223,480,-,2008-08
+BlackBerry Bold 9780,BlackBerry OS,6.0.0.110,480,-,2010-11
+BlackBerry Bold 9790,BlackBerry OS,7.0.0.528,320,-,2011-12
+BlackBerry Bold 9900,BlackBerry OS,7.1.0.342,356,-,2011-08
+BlackBerry Curve 9300,BlackBerry OS,5.0.0.716,311,-,2010-08
+BlackBerry Curve 9300,BlackBerry OS,6.0.0.448,320,-,2010-08
+BlackBerry Curve 9320,BlackBerry OS,7.1.0.569,320,-,2010-05
+BlackBerry Curve 9360,BlackBerry OS,7.0.0.530,320,-,2011-08
+BlackBerry Curve 9380,BlackBerry OS,7.0.0.513,320,406,2011-12
+BlackBerry PlayBook,Blackberry Tablet OS,2.1.0,600,1024,2011-04
+BlackBerry Torch 9800,BlackBerry OS,6.0.0.353,360,480,2010-08
+BlackBerry Torch 9810,BlackBerry OS,7.0.0.296,320,-,2011-08
+BlackBerry Torch 9860,BlackBerry OS,7.0.0.579,320,505,2011-09
+BlackBerry Q10,BlackBerry OS,10.1.0.1910,346,-,2013-04
+BlackBerry Z10,BlackBerry OS,10.0.10.690,342,570,2013-02
+Dell Venue 8,Windows 8,8.1,800,1280,10-2013
+Galaxy Nexus,Android,4.1.1,360,598,2011-11
+HP Slate 7 2800,Android,4.1.1,600,1024,2013-06
+HP Slate 21,Android,4.2.2,1920,NA,2013-10
+HP Touchpad,Android,4.0.3,768,1024,2011-07
+HP Touchpad,webOS,3.0,768,1024,2011-07
+HP Veer,WebOS,2.1.1,320,545,2011-06
+HTC 7 Mozart,WP7,7.5,320,480,2010-10
+HTC 7 Trophy,WP7,7.5,320,480,2010-10
+HTC A620b,WP8,8.0,320,480,2013-01
+HTC Desire,Android,2.3.3,320,533,2010-03
+HTC Desire C,Android,4.0.3,320,480,2012-06
+HTC Desire HD,Android,2.3.5,320,533,2010-10
+HTC Desire S,Android,4.0.4,320,533,2011-03
+HTC Desire X,Android,4.1.1,320,533,2012-10
+HTC Desire 700,Android,4.1.2,360,640,2014-01
+HTC Desire Z (Vision),Android,2.2,480,800,2010-11
+HTC Droid Eris,Android,2.1,320,480,2009-11
+HTC Evo 3D,Android,4.0.3,540,960,2011-07
+HTC Incredible 2,Android ,2.3.4,320,533,2011-04
+HTC Legend,Android,2.2,320,480,2010-03
+HTC MyTouch Slide 4G,Android,2.3.4,320,533,2011-07
+HTC One,Android,4.1.2,360,640,2013-03
+HTC One Mini,Android,4.2.2,360,640,2013-07
+HTC One S,Android,4.0.3,360,640,2012-04
+HTC One SV,Android,4.0.4,320,533,2012-12
+HTC One V,Android,4.0.3,320,533,2012-04
+HTC One X,Android,4.2.2,360,640,2012-05
+HTC One X+,Android,4.3,360,640,2012-11
+HTC One XL,Android,4.0.3,360,640,2012-05
+HTC Rio 8S,WP8,8.0,320,480,2012-12
+HTC Sensation XL,Android,4.0.3,360,640,2011-11
+HTC Titan II/4G,WP7,7.5,320,480,2012-04
+HTC Velocity 4G,Android,4.0.3,360,640,2012-11
+HTC Wildfire A3333,Android,2.2.1,267,356,2010-05
+HTC Wildfire S,Android,2.3.3,320,480,2011-05
+HTC Windows Phone 8S,WP8,8.0,320,480,2012-11
+HTC Windows Phone 8X (C625b),WP8,8.0,320,480,2012-11
+Huawei Ascend G510,Android,4.1.1,320,569,2013-04
+Huawei Ascend Mate,Android,4.1.1,480,813,2013-03
+Huawei U8650 Sonic,Android,2.3.3,320,480,2011-06
+Huawei U8860,Android,4.0.3,320,544,2011-12
+Huawei Y300-0151,Android,4.1.1,320,533,2013-03
+iPad,iOS,5.0.1,768,1024,2010-03
+iPad 2,iOS,5.0.1,768,1024,2011-03
+iPad 3,iOS,5.1.1,768,1024,2012-03
+iPad Air,iOS,7.0.3,768,1024,2013-10
+iPad Mini,iOS,6.0.1,768,1024,2012-11
+iPhone,iOS,3.1.3,320,480,2007-06
+iPhone 3G,iOS,4.2.1,320,480,2008-07
+iPhone 3GS,iOS,6.0a2,320,480,2009-06
+iPhone 4,iOS,5.1.1,320,480,2010-06
+iPhone 4S,iOS,4.3.5,320,480,2011-10
+iPhone 5,iOS,6.0,320,568,2012-09
+iPhone 5c,iOS,7.0,320,568,2013-09
+iPhone 5s,iOS,7.0,320,568,2013-09
+iPhone 6,iOS,8.0,375,667,2014-09
+iPhone 6 Plus,iOS,8.0,414,736,2014-09
+iPod Touch 4th Gen,iOS,5.0.1,320,480,2010-09
+iPod Touch 5th Gen,iOS,6.0,320,568,2012-10
+Kindle 3,Kindle,3.3,600,-,2010-08
+Kindle Fire 2,Android,4.0.3,600,963,2011-11
+Kindle Fire HD,Android,4,533,801,2012-09
+Kindle Fire HD 8.9,Android,4.0.3,800,1220,2012-10
+Kindle Paperwhite,Kindle,5,758,-,2012-10
+Kobo eReader Touch,Android,2.0.0,600,-,2011-06
+Kogan 42" Smart 3D LED TV,Android,4.1.2,-,1280,2013-07
+Lenovo IdeaTab A1000,Android,4.2.2,600,1024,2013-05
+Lenovo IdeaTab S6000,Android,4.2.2,800,1280,2013-06
+Lenovo Yoga Tablet 8,Android,4.2.2,602,962,2013-10
+Lenovo Yoga Tablet 10,Android,4.2.2,800,1280,2013-11
+LG 55LW6500 TV,Proprietary (TV),5.00.07,-,1280,2011-03
+LG Ally,Android,2.2.2,320,533,2010-04
+LG G2,Android,4.2.2,360,598,2013-09
+LG Optimus 2x,Android,2.3.7,320,533,2011-02
+LG Optimus Black P970,Android,4.0.4,320,533,2011-05
+LG Optimus G E975,Android,4.1.2,384,640,2012-11
+LG Optimus L3 E400,Android,2.3.6,320,427,2012-02
+LG Optimus L3 II E425f,Android,4.1.2,320,427,2013-04
+LG Optimus L7 P700,Android,4.0.3,320,533,2012-05
+LG Optimus L9 P760,Android,4.0.4,360,640,2012-11
+LG Optimus Pad V900,Android,3.0.1,768,1280,2011-05
+LG Viewty KU990,Proprietary (Java),1.2,240,400,2008-10
+Microsoft Surface,Windows RT,8.0,768,1366,2012-11
+Microsoft Surface Pro,Windows 8,8.0,720,1280,2012-11
+Motorola Defy,Android,2.3.4,320,569,2010-10
+Motorola Defy Mini,Android,2.3.6,320,480,2012-01
+Motorola Droid Bionic,Android,4.1.2,360,640,2011-09
+Motorola Droid Razr,Android,2.3.6,360,640,2011-11
+Motorola Droid 3,Android,2.3,360,559,2011-07
+Motorola Electrify 2,Android,4.1.2,360,598,2012-07
+Motorola Fire XT,Android,2.3.5,320,480,2011-09
+Motorola FlipOut,Android,2.1,320,240,2010-06
+Motorola Milestone,Android,2.3.7,320,569,2009-11
+Motorola Moto G,Android,4.3,360,598,2013-11
+Motorola RAZR HD 4G,Android,4.0.4,360,598,2012-09
+Motorola RAZR M 4G,Android,4.0.4,360,598,2012-09
+Motorola RAZR MAXX,Android,4.0,360,640,2012-05
+Motorola Xoom,Android,4.1,800,1280,2011-05
+Motorola Xoom 2,Android,3.2.2,800,1280,2011-12
+Motorola Xoom 2 Media Edition,Android,3.2.2,800,1280,2011-12
+Nexus 10,Android,4.2.2,800,1280,2012-11
+Nexus 4,Android,4.2.1,384,598,2012-11
+Nexus 5,Android,4.4,360,598,2013-10
+Nexus 7,Android,4.1.1,603,966,2012-07
+Nexus 7,Android,4.2.1,600,961,2012-07
+Nexus 7,Android,4.3,601,962,2012-07
+Nexus 7 (LCD Density set to 175PPI),Android,4.1.1,731,1170,2012-07
+Nexus 7 (2013),Android,4.3,600,960,2013-07
+Nexus One,Android,2.3.7,320,533,2010-01
+Nexus S,Android,4.1.1,320,533,2010-10
+Nintendo 3DS,3DS,4.3.0-10E,416,-,2011-02
+Nintendo 3DS XL,3DS,1.7455.EU,416,-,2012-07
+Nintendo DSi,DSi,507; U; en-GB,256,-,2009-04
+Nintendo DSi XL,DSi,1.4.4A,240,-,2010-03
+Nintendo Wii,Wii,4.3,800,-,2007-11
+Nintendo Wii U,Wii U,1.0.0.7494,854,-,2012-11
+Nokia 2700,S40,5th Edition,240,-,2009-07
+Nokia Asha 300,Proprietary (Nokia),07.03 29-11-11 RM-781,234,-,2011-11
+Nokia Asha 302,Proprietary (Nokia),14.53 20-03-12 RM-813,314,-,2012-03
+Nokia 500,Symbian,Belle,360,640,2011-09
+Nokia 700 (Opera Mobile),Symbian,Belle FP2,240,427,2011-09
+Nokia E61i,S60,Symbian 9.1,320,-,2007-04
+Nokia E71,S60,Symbian 9.2,320,-,2007-04
+Nokia Lumia 520,WP8,8.0,320,480,2013-04
+Nokia Lumia 610,WP7,7.5,320,480,2012-04
+Nokia Lumia 710,WP7,7.5,320,480,2011-12
+Nokia Lumia 720,WP7,8.0,320,480,2013-04
+Nokia Lumia 800,WP7,7.5,320,480,2011-11
+Nokia Lumia 820,WP8,8.0,320,480,2012-11
+Nokia Lumia 900,WP7,7.5,320,480,2012-05
+Nokia Lumia 920,WP8,8.0,320,480,2012-11
+Nokia Lumia 925,WP8,8.0,320,480,2013-06
+Nokia Lumia 1520,WP8,8.0,320,480,2013-11
+Nokia N9,MeeGo,1.2,320,496,2011-09
+Nokia N900,Maemo,5,480,800,2009-11
+Nokia N95,S60,Symbian 9.2,240,-,2007-03
+Palm Pixi,WebOS,1.4.5,320,480,2009-11
+Palm Pre,WebOS,2.2,320,-,2009-10
+Panasonic Toughpad FZ-A1,Android,4.0,768,1024,2012-12
+PendoPad 7",Android,4.2.2,480,800,2013-11
+PendoPad 10",Android,4.2.2,600,1024,2013-11
+Pioneer Dreambook,Android,4.0.4,768,1024,2010-07
+Samsung Ativ S,WP8,8.0,320,480,2012-12
+Samsung E3210,Proprietary (Java),-,128,-,2011-05
+Samsung Galaxy 5/Europa I5500,Android,2.1-update1,320,427,2010-08
+Samsung Galaxy Ace S5830,Android,2.3.4,320,480,2011-02
+Samsung Galaxy Ace 2 I8160,Android,2.3.6,320,533,2012-05
+Samsung Galaxy Ace Plus S7500,Android,2.3.6,320,480,2012-02
+Samsung Galaxy Beam I8530,Android,2.3.6,320,533,2012-07
+Samsung Galaxy Camera GC100,Android,4.1.2,360,598,2012-11
+Samsung Galaxy Mini S5570,Android,2.3.4,240,320,2011-02
+Samsung Galaxy Mini 2 S6500,Android,2.3,320,480,2012-03
+Samsung Galaxy Note N700,Android,2.3.6,400,640,2011-10
+Samsung Galaxy Note 10.1 N8010,Android,4.0.4,800,1280,2012-08
+Samsung Galaxy Note 10.1 N8010 (Multiscreen Enabled),Android,4.0.4,800,637,2012-08
+Samsung Galaxy Note 10.1 (2014 Edition) P600,Android,4.3,800,1280,2013-11
+Samsung Galaxy Note 2 N7100,Android,4.1.1,360,640,2012-09
+Samsung Galaxy Note 3 N9005,Android,4.3,360,640,2013-09
+Samsung Galaxy Note 8.0 N5100,Android,4.1.2,601,962,2013-04
+Samsung Galaxy Note 8.0 N5110,Android,4.1.2,601,962,2013-04
+Samsung Galaxy S I9000,Android,2.3.6,320,533,2010-06
+Samsung Galaxy S Duos S7562,Android,4.0.4,320,533,2012-09
+Samsung Galaxy S WiFi YPG70CW,Android,2.2,320,533,2011-05
+Samsung Galaxy S2 I9100,Android,2.3.6,320,533,2011-04
+Samsung Galaxy S3 I9300,Android,4.0.4,360,640,2012-05
+Samsung Galaxy S3 Mini I8190,Android,4.1.2,320,533,2012-11
+Samsung Galaxy S4 I9500,Android,4.2.2,360,640,2013-04
+Samsung Galaxy S4 I9505,Android,4.2.2,360,640,2013-04
+Samsung Galaxy S4 Active I9295,Android,4.2.2,360,640,2013-06
+Samsung Galaxy S4 Mini I9190,Android,4.2.2,360,640,2013-07
+Samsung Galaxy S4 Zoom SM-C105,Android,4.2.2,360,640,2013-07
+Samsung Galaxy Tab 10.1 P7510,Android,3.2,800,1280,2011-07
+Samsung Galaxy Tab 2 10.1 P5110,Android,4.0.4,800,1280,2012-05
+Samsung Galaxy Tab 2 7.0 P3110,Android,4.0.3,600,1024,2012-05
+Samsung Galaxy Tab 3 7.0 T210,Android,4.1.2,600,1024,2013-07
+Samsung Galaxy Tab 3 8.0 T310,Android,4.2.2,602,962,2013-07
+Samsung Galaxy Tab 3 10.1 P5210,Android,4.2.2,800,1280,2013-07
+Samsung Galaxy Tab 3 Kids T2105,Android,4.1.2,600,1024,2013-11
+Samsung Galaxy Tab 7.7 P6810,Android,3.2,800,1280,2012-01
+Samsung Galaxy Tab 7.0 Plus P6210,Android,3.2,600,1024,2012-01
+Samsung Galaxy Tab 8.9 P7310,Android,4.0.4,800,1280,2011-05
+Samsung Galaxy Tab 8.9 4G P7320,Android,3.2,800,1280,2012-02
+Samsung Galaxy Tab P1000,Android,2.3.3,400,683,2010-10
+Samsung Galaxy X Cover 2 S7710 ,Android,4.1.2,320,533,2013-03
+Samsung Galaxy Y S5360,Android,2.3.6,320,427,2011-10
+Samsung Galaxy Young S6310,Android,4.1.2,320,480,2013-02
+Samsung Infuse 4G I997,Android,2.3,320,533,2011-05
+Samsung Omnia W I8350,WP7,7.5,320,480,2011-10
+Samsung Omnia 7 I8700,WP7,7.5,320,480,2010-10
+Samsung Wave S8500,Bada,1.0,240,400,2010-04
+Samsung Wave S8500,Bada,2.0.1,320,534,2010-04
+Scroll Excel,Android,2.3.4,480,800,2012-02
+Sony BRAVIA 40 EX520,Proprietary (TV),PKG4.012GAA-0104,-,1920,2011-01
+Sony Ericsson Elm,Proprietary (Java),1231-1917 R7CA061 100619,240,-,2010-03
+Sony Ericsson Spiro,Proprietary (Java),-,240,-,2010-08
+Sony Ericsson Xperia Arc,Android,2.3.4,320,569,2011-03
+Sony Ericsson Xperia Mini ST15i,Android,2.3.4,320,401,2011-08
+Sony Ericsson Xperia Neo,Android,4.0.4,480,854,2011-03
+Sony Ericcson Xperia Play,Android,2.3.4,425,974,2011-03
+Sony Ericsson Xperia X8,Android,2.1.1,320,480,2010-09
+Sony Ericsson Xperia X10,Android,2.3.3,320,569,2010-03
+Sony PlayStation 3,PlayStation 3,4.25,-,1824,2006-11
+Sony PlayStation Portable,PlayStation Portable,4.2,-,480,2005-03
+Sony PlayStation Vita,PlayStation Vita,1.00,-,896,2012-02
+Sony Tablet P,Android,4.0.3,-,1024,2012-09
+Sony Tablet S,Android,4.0.3,800,1280,2011-09
+Sony VAIO Tap 20,Windows 8,8.0,900,1600,2013-06
+Sony Xperia acro S,Android,4.0.4,360,640,2012-08
+Sony Xperia P,Android,2.3.7,360,640,2012-05
+Sony Xperia S,Android,2.3.7,360,640,2012-02
+Sony Xperia Sola,Android,2.3.7,320,569,2012-05
+Sony Xperia SP,Android,4.1.2,360,598,2013-04
+Sony Xperia Tablet Z,Android,4.1.2,800,1280,2013-05
+Sony Xperia Tipo,Android,4.0.4,320,480,2012-08
+Sony Xperia U,Android,2.3.7,320,569,2012-05
+Sony Xperia V,Android,4.1.2,360,598,2012-12
+Sony Xperia Z,Android,4.1.2,360,598,2013-02
+Sony Xperia Z1,Android,4.2.2,360,598,2013-09
+Telstra T-Hub 2,Android,2.3.7,400,683,2012-07
+Tesco Hudl,Android,4.2,600,799,2013-09
+Toshiba AT100,Android,4.0.4,800,1280,2011-07
+Toshiba AT1S0,Android,3.2,602,961,2012-02
+Toshiba AT200,Android,3.2.1,800,1280,2012-02
+Toshiba AT300,Android,4.0.3,800,1280,2012-06
+Toshiba AT330,Android,4.0.3,900,1600,2012-07
+Wiko Cink Slim,Android,4.1.1,320,533,2012-11
+Yarvik Xenta Tab 8c,Android,4.1.2,768,1024,2013-08
+XBOX 360,XBOX,2.0,-,1050,2005-11
+Xiaomi MI-3,Android,4.2.1,360,640,2013-09
+ZTE Open,FireFox OS,1.0.0B01,320,415,2013-07
+ZTE T22 (Telstra Urbane),Android,4.0.4,320,533,2012-08
+ZTE T28 (Telstra Active Touch),Android,2.3.5,320,533,2011-05
+ZTE T760 (Telstra Smart-Touch 2),Android,2.3.5,320,480,2012-02
+ZTE T790 (Telstra Pulse),Android,4.0.4,320,480,2013-05
+ZTE T81 (Telstra Frontier 4G),Android,4.0.4,320,533,2012-11
+ZTE T82 (Telstra Easy Touch 4G),Android,4.0.4,360,598,2012-11
+ZTE T83 (Telstra Dave 4G),Android,4.1.2,320,534,2013-10

chapter11/package-lock.json

@@ -4042,13 +4042,13 @@
       }
     },
     "eslint": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.4.0.tgz",
-      "integrity": "sha512-UIpL91XGex3qtL6qwyCQJar2j3osKxK9e3ano3OcGEIRM4oWIpCkDg9x95AXEC2wMs7PnxzOkPZ2gq+tsMS9yg==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.5.0.tgz",
+      "integrity": "sha512-m+az4vYehIJgl1Z0gb25KnFXeqQRdNreYsei1jdvkd9bB+UNQD3fsuiC2AWSQ56P+/t++kFSINZXFbfai+krOw==",
       "dev": true,
       "requires": {
-        "ajv": "^6.5.0",
-        "babel-code-frame": "^6.26.0",
+        "@babel/code-frame": "^7.0.0",
+        "ajv": "^6.5.3",
         "chalk": "^2.1.0",
         "cross-spawn": "^6.0.5",
         "debug": "^3.1.0",
@@ -4063,11 +4063,11 @@
         "functional-red-black-tree": "^1.0.1",
         "glob": "^7.1.2",
         "globals": "^11.7.0",
-        "ignore": "^4.0.2",
+        "ignore": "^4.0.6",
         "imurmurhash": "^0.1.4",
-        "inquirer": "^5.2.0",
+        "inquirer": "^6.1.0",
         "is-resolvable": "^1.1.0",
-        "js-yaml": "^3.11.0",
+        "js-yaml": "^3.12.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.3.0",
         "lodash": "^4.17.5",
@@ -4080,13 +4080,33 @@
         "progress": "^2.0.0",
         "regexpp": "^2.0.0",
         "require-uncached": "^1.0.3",
-        "semver": "^5.5.0",
+        "semver": "^5.5.1",
         "strip-ansi": "^4.0.0",
         "strip-json-comments": "^2.0.1",
         "table": "^4.0.3",
         "text-table": "^0.2.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+          "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.0.0"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz",
+          "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.0",
+            "esutils": "^2.0.2",
+            "js-tokens": "^4.0.0"
+          }
+        },
         "ajv": {
           "version": "6.5.3",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
@@ -4099,6 +4119,12 @@
             "uri-js": "^4.2.2"
           }
         },
+        "chardet": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+          "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+          "dev": true
+        },
         "cross-spawn": {
           "version": "6.0.5",
           "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4121,6 +4147,17 @@
             "ms": "2.0.0"
           }
         },
+        "external-editor": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
+          "integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
+          "dev": true,
+          "requires": {
+            "chardet": "^0.7.0",
+            "iconv-lite": "^0.4.24",
+            "tmp": "^0.0.33"
+          }
+        },
         "fast-deep-equal": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -4128,9 +4165,9 @@
           "dev": true
         },
         "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -4147,22 +4184,31 @@
           "integrity": "sha512-K8BNSPySfeShBQXsahYB/AbbWruVOTyVpgoIDnl8odPpeSfP2J5QO2oLFFdl2j7GfDCtZj2bMKar2T49itTPCg==",
           "dev": true
         },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "dev": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
         "inquirer": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz",
-          "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==",
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.0.tgz",
+          "integrity": "sha512-QIEQG4YyQ2UYZGDC4srMZ7BjHOmNk1lR2JQj5UknBapklm6WHA+VVH7N+sUdX3A7NeCfGF8o4X1S3Ao7nAcIeg==",
           "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
             "chalk": "^2.0.0",
             "cli-cursor": "^2.1.0",
             "cli-width": "^2.0.0",
-            "external-editor": "^2.1.0",
+            "external-editor": "^3.0.0",
             "figures": "^2.0.0",
-            "lodash": "^4.3.0",
+            "lodash": "^4.17.10",
             "mute-stream": "0.0.7",
             "run-async": "^2.2.0",
-            "rxjs": "^5.5.2",
+            "rxjs": "^6.1.0",
             "string-width": "^2.1.0",
             "strip-ansi": "^4.0.0",
             "through": "^2.3.6"
@@ -4173,6 +4219,15 @@
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
+        },
+        "rxjs": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.1.tgz",
+          "integrity": "sha512-hRVfb1Mcf8rLXq1AZEjYpzBnQbO7Duveu1APXkWRTvqzhmkoQ40Pl2F9Btacx+gJCOqsMiugCGG4I2HPQgJRtA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
         }
       }
     },
@@ -12775,6 +12830,12 @@
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
     },
+    "tslib": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
+      "dev": true
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

chapter11/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "devDependencies": {
-        "eslint": "^5.4.0",
+        "eslint": "^5.5.0",
         "eslint-config-recommended": "^3.0.0",
         "eslint-plugin-babel": "^5.1.0",
         "eslint-plugin-flowtype": "^2.50.0",

chapter11/src/adaptiveApp/actions.js

@@ -0,0 +1,22 @@
+/* @flow */
+
+import { getDeviceData } from "./device";
+
+import type { deviceDataType } from "./device";
+
+export const DEVICE_DATA = "device:data";
+
+export type deviceDataAction = {
+    type: string,
+    deviceData: deviceDataType
+};
+
+export const setDevice = (deviceData?: object) =>
+    ({
+        type: DEVICE_DATA,
+        deviceData: deviceData || getDeviceData()
+    }: deviceDataAction);
+
+/*
+    A real app would have many more actions!
+*/

chapter11/src/adaptiveApp/adaptiveView.component.js

@@ -0,0 +1,56 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { View, Text, StyleSheet } from "react-native";
+
+import type { deviceDataType } from "./device";
+
+const textStyle = StyleSheet.create({
+    bigText: {
+        fontWeight: "bold",
+        fontSize: 24
+    }
+});
+
+export class AdaptiveView extends React.PureComponent<{
+    deviceData: deviceDataType
+}> {
+    static propTypes = {
+        deviceData: PropTypes.object.isRequired
+    };
+
+    renderHandset() {
+        return (
+            <View>
+                <Text style={textStyle.bigText}>
+                    I believe I am a HANDSET currently in
+                    {this.props.deviceData.isPortrait
+                        ? " PORTRAIT "
+                        : " LANDSCAPE "}
+                    orientation
+                </Text>
+            </View>
+        );
+    }
+
+    renderTablet() {
+        return (
+            <View>
+                <Text style={textStyle.bigText}>
+                    I think I am a
+                    {this.props.deviceData.isPortrait
+                        ? " PORTRAIT "
+                        : " LANDSCAPE "}
+                    TABLET
+                </Text>
+            </View>
+        );
+    }
+
+    render() {
+        return this.props.deviceData.isTablet
+            ? this.renderTablet()
+            : this.renderHandset();
+    }
+}

chapter11/src/adaptiveApp/adaptiveView.connected.js

@@ -0,0 +1,11 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { AdaptiveView } from "./adaptiveView.component";
+
+const getProps = state => ({
+    deviceData: state.deviceData
+});
+
+export const ConnectedAdaptiveView = connect(getProps)(AdaptiveView);

chapter11/src/adaptiveApp/device.js

@@ -0,0 +1,25 @@
+/* @flow */
+
+import { Dimensions } from "react-native";
+
+export type deviceDataType = {
+    isTablet: boolean,
+    isPortrait: boolean,
+    height: number,
+    width: number,
+    scale: number,
+    fontScale: number
+};
+
+export const getDeviceData = (): deviceDataType => {
+    const { height, width, scale, fontScale } = Dimensions.get("screen");
+
+    return {
+        isTablet: Math.max(height, width) / Math.min(height, width) <= 1.6,
+        isPortrait: height > width,
+        height,
+        width,
+        scale,
+        fontScale
+    };
+};

chapter11/src/adaptiveApp/deviceHandler.component.js

@@ -0,0 +1,21 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { View } from "react-native";
+
+class DeviceHandler extends React.PureComponent<{
+    setDevice: () => any
+}> {
+    static propTypes = {
+        setDevice: PropTypes.func.isRequired
+    };
+
+    onLayoutHandler = () => this.props.setDevice();
+
+    render() {
+        return <View hidden onLayout={this.onLayoutHandler} />;
+    }
+}
+
+export { DeviceHandler };

chapter11/src/adaptiveApp/deviceHandler.connected.js

@@ -0,0 +1,15 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { DeviceHandler } from "./deviceHandler.component";
+import { setDevice } from "./actions";
+
+const getDispatch = dispatch => ({
+    setDevice: () => dispatch(setDevice())
+});
+
+export const ConnectedDeviceHandler = connect(
+    null,
+    getDispatch
+)(DeviceHandler);

chapter11/src/adaptiveApp/main.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import React from "react";
+import { View, StatusBar } from "react-native";
+
+import { ConnectedAdaptiveView } from "./adaptiveView.connected";
+import { ConnectedDeviceHandler } from "./deviceHandler.connected";
+
+export class Main extends React.PureComponent<> {
+    render() {
+        return (
+            <View>
+                <StatusBar hidden />
+                <ConnectedDeviceHandler />
+                <ConnectedAdaptiveView />
+            </View>
+        );
+    }
+}

chapter11/src/adaptiveApp/reducer.js

@@ -0,0 +1,31 @@
+/* @flow */
+
+import { getDeviceData } from "./device";
+
+import { DEVICE_DATA } from "./actions";
+
+import type { deviceAction } from "./actions";
+
+export const reducer = (
+    state: object = {
+        // initial state: more app data, plus
+        deviceData: getDeviceData()
+    },
+    action: deviceAction
+) => {
+    switch (action.type) {
+        case DEVICE_DATA:
+            return {
+                ...state,
+                deviceData: action.deviceData
+            };
+
+        /*
+            In a real app, here there would
+            be plenty more "case"s
+        */
+
+        default:
+            return state;
+    }
+};

chapter11/src/adaptiveApp/store.js

@@ -0,0 +1,8 @@
+/* @flow */
+
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+import { reducer } from "./reducer";
+
+export const store = createStore(reducer, applyMiddleware(thunk));

chapter11/src/regionsApp/regionsTable.component.js

@@ -33,7 +33,7 @@ render() {
         return (
             <View>
                 {ordered.map(x => (
-                    <View key={`${x.countryCode}-${x.regionCode}`>
+                    <View key={`${x.countryCode}-${x.regionCode}`}>
                         <Text>{x.regionName}</Text>
                     </View>
                 ))}