Merge pull request #931 from lightninglabs/expo-32

Expo 32

mobile/.babelrc

-{
-  "presets": ["babel-preset-expo"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
-    }
-  }
-}

mobile/.gitignore

@@ -16,6 +16,10 @@ ios/Pods/**/*
 npm-debug.*
 yarn-debug.log*
 yarn-error.log*
+*.jks
+*.p12
+*.key
+*.mobileprovision
 
 # Xcode
 build/

mobile/App.js

 import 'node-libs-react-native/globals';
-import Storybook from './storybook';
 
 import App from '../src/view/main-mobile';
 
-module.exports = !Storybook ? Storybook : App;
+module.exports = App;

mobile/app.json

@@ -4,8 +4,8 @@
     "version": "0.0.1",
     "description": "An easy-to-use Lightning wallet.",
     "slug": "lightning-app",
-    "privacy": "public",
-    "sdkVersion": "30.0.0",
+    "privacy": "unlisted",
+    "sdkVersion": "32.0.0",
     "platforms": ["ios", "android"],
     "orientation": "portrait",
     "primaryColor": "#57038D",
@@ -16,7 +16,8 @@
       "backgroundColor": "#57038D"
     },
     "updates": {
-      "fallbackToCacheTimeout": 0
+      "fallbackToCacheTimeout": 0,
+      "enabled": false
     },
     "assetBundlePatterns": [
       "**/*"

mobile/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

mobile/package.json

@@ -2,13 +2,9 @@
   "name": "LightningApp",
   "private": true,
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.11",
-    "@storybook/addon-links": "^3.4.11",
-    "@storybook/addons": "^3.4.11",
-    "@storybook/react-native": "^3.4.11",
-    "expo-cli": "^2.2.4",
-    "expokit": "^1.7.1",
-    "prop-types": "15.6.1",
+    "expo-cli": "^2.9.0",
+    "expokit": "^32.0.6",
+    "prop-types": "^15.6.2",
     "protobufjs": "^6.8.8",
     "sinon": "^6.1.5"
   },
@@ -18,18 +14,17 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "eject": "expo eject",
-    "storybook": "storybook start -p 7007",
-    "publish": "expo publish"
+    "publish": "expo publish --release-channel expo-32"
   },
   "dependencies": {
-    "expo": "^30.0.2",
+    "expo": "^32.0.4",
     "locale-currency": "0.0.2",
     "mobx": "^4.5.0",
     "mobx-react": "^5.2.8",
     "node-libs-react-native": "^1.0.2",
     "qr-image": "^3.2.0",
-    "react": "16.3.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-navigation": "^3.0.9"
   }
 }

mobile/rn-cli.config.js

 const path = require('path');
 
 module.exports = {
-  extraNodeModules: {
-    react: path.resolve(__dirname, 'node_modules/react'),
-    'react-native': path.resolve(__dirname, 'node_modules/react-native'),
-    expo: path.resolve(__dirname, 'node_modules/expo'),
-    'prop-types': path.resolve(__dirname, 'node_modules/prop-types'),
-    'react-native-svg': path.resolve(
-      __dirname,
-      'node_modules/react-native-svg'
-    ),
-    'react-navigation': path.resolve(
-      __dirname,
-      'node_modules/react-navigation'
-    ),
-    mobx: path.resolve(__dirname, 'node_modules/mobx'),
-    'mobx-react': path.resolve(__dirname, 'node_modules/mobx-react'),
-    'locale-currency': path.resolve(__dirname, 'node_modules/locale-currency'),
-    '@storybook': path.resolve(__dirname, 'node_modules/@storybook'),
-    'qr-image': path.resolve(__dirname, 'node_modules/qr-image'),
-    stream: path.resolve(__dirname, 'node_modules/readable-stream'),
-    zlib: path.resolve(__dirname, 'node_modules/browserify-zlib'),
-    'base64-js': path.resolve(__dirname, 'node_modules/base64-js'),
-    protobufjs: path.resolve(__dirname, 'node_modules/protobufjs'),
-    sinon: path.resolve(__dirname, 'node_modules/sinon'),
+  resolver: {
+    extraNodeModules: {
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+      expo: path.resolve(__dirname, 'node_modules/expo'),
+      'prop-types': path.resolve(__dirname, 'node_modules/prop-types'),
+      'react-native-svg': path.resolve(
+        __dirname,
+        'node_modules/react-native-svg'
+      ),
+      'react-navigation': path.resolve(
+        __dirname,
+        'node_modules/react-navigation'
+      ),
+      mobx: path.resolve(__dirname, 'node_modules/mobx'),
+      'mobx-react': path.resolve(__dirname, 'node_modules/mobx-react'),
+      'locale-currency': path.resolve(
+        __dirname,
+        'node_modules/locale-currency'
+      ),
+      'qr-image': path.resolve(__dirname, 'node_modules/qr-image'),
+      stream: path.resolve(__dirname, 'node_modules/readable-stream'),
+      zlib: path.resolve(__dirname, 'node_modules/browserify-zlib'),
+      'base64-js': path.resolve(__dirname, 'node_modules/base64-js'),
+      protobufjs: path.resolve(__dirname, 'node_modules/protobufjs'),
+      sinon: path.resolve(__dirname, 'node_modules/sinon'),
+      '@babel/runtime': path.resolve(__dirname, 'node_modules/@babel/runtime'),
+    },
   },
-  getProjectRoots: () => [
-    path.resolve(__dirname),
+  projectRoot: path.resolve(__dirname),
+  watchFolders: [
     path.resolve(__dirname, '../src'),
     path.resolve(__dirname, '../assets'),
     path.resolve(__dirname, '../stories'),

mobile/storybook/addons.js

-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

mobile/storybook/index.js

-import React, { Component } from 'react';
-import { AppRegistry } from 'react-native';
-import {
-  getStorybookUI,
-  configure,
-  addDecorator,
-} from '@storybook/react-native';
-import FontLoader from '../../src/component/font-loader-mobile';
-
-addDecorator(story => <FontLoader>{story()}</FontLoader>);
-
-// import stories
-configure(() => {
-  require('../../stories/screen-story');
-  require('../../stories/component/button-story');
-  require('../../stories/component/card-story');
-  require('../../stories/component/field-story');
-  require('../../stories/component/header-story');
-  require('../../stories/component/icon-story');
-  require('../../stories/component/label-story');
-  require('../../stories/component/list-story');
-  require('../../stories/component/notification-story');
-  require('../../stories/component/qrcode-story');
-  require('../../stories/component/spinner-story');
-  require('../../stories/component/text-story');
-  require('../../stories/color-story');
-  require('../../stories/font-story');
-  require('../../stories/layout-story');
-}, module);
-
-// This assumes that storybook is running on the same host as your RN packager,
-// to set manually use, e.g. host: 'localhost' option
-const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
-
-// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
-// https://github.com/storybooks/storybook/issues/2081
-// eslint-disable-next-line react/prefer-stateless-function
-class StorybookUIHMRRoot extends Component {
-  render() {
-    return <StorybookUIRoot />;
-  }
-}
-
-AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIHMRRoot);
-export default StorybookUIHMRRoot;

src/component/background.js

@@ -4,6 +4,8 @@ import {
   StyleSheet,
   SafeAreaView,
   KeyboardAvoidingView,
+  ViewPropTypes,
+  Platform,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import BackgroundImage from './background-image';
@@ -33,7 +35,7 @@ Background.propTypes = {
   image: PropTypes.string,
   color: PropTypes.string,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -67,7 +69,7 @@ SplitBackground.propTypes = {
   color: PropTypes.string,
   bottom: PropTypes.string,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -77,6 +79,7 @@ SplitBackground.propTypes = {
 const wrapperStyles = StyleSheet.create({
   safe: {
     flex: 1,
+    paddingTop: Platform.OS === 'android' ? 25 : 0,
   },
   avoid: {
     flex: 1,
@@ -96,7 +99,7 @@ export const ContentWrapper = ({ children, style }) => (
 
 ContentWrapper.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default Background;

src/component/button.js

@@ -4,6 +4,7 @@ import {
   TouchableOpacity,
   Text as RNText,
   StyleSheet,
+  ViewPropTypes,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
@@ -41,7 +42,7 @@ Button.propTypes = {
   onPress: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -101,7 +102,7 @@ GlasButton.propTypes = {
   onPress: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
   children: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -119,7 +120,7 @@ export const SmallGlasButton = ({ style, ...props }) => (
 );
 
 SmallGlasButton.propTypes = {
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -155,7 +156,7 @@ PillButton.propTypes = {
   onPress: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
   children: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -230,7 +231,7 @@ SmallButton.propTypes = {
   border: PropTypes.bool,
   alert: PropTypes.string,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -276,7 +277,7 @@ SmallPillButton.propTypes = {
   text: PropTypes.string,
   onPress: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -292,7 +293,7 @@ export const BackButton = ({ onPress, disabled, style }) => (
 BackButton.propTypes = {
   onPress: PropTypes.func,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -308,7 +309,7 @@ export const CancelButton = ({ onPress, disabled, style }) => (
 CancelButton.propTypes = {
   onPress: PropTypes.func,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -324,7 +325,7 @@ export const AddButton = ({ onPress, disabled, style }) => (
 AddButton.propTypes = {
   onPress: PropTypes.func,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -358,7 +359,7 @@ export const QrButton = ({ onPress, disabled, style, children }) => (
 QrButton.propTypes = {
   onPress: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
   children: PropTypes.string,
 };
 
@@ -391,7 +392,7 @@ export const DownButton = ({ onPress, disabled, style, children }) => (
 DownButton.propTypes = {
   onPress: PropTypes.func,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
   children: PropTypes.string,
 };
 
@@ -440,7 +441,7 @@ CopyButton.propTypes = {
   onPress: PropTypes.func,
   icon: PropTypes.node,
   children: PropTypes.string,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -491,7 +492,7 @@ SmallCopyButton.propTypes = {
   onPress: PropTypes.func,
   icon: PropTypes.node,
   children: PropTypes.string,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //

src/component/card.js

 import React from 'react';
-import { View } from 'react-native';
+import { View, ViewPropTypes } from 'react-native';
 import { createStyles, maxWidth } from '../component/media-query';
 import PropTypes from 'prop-types';
 import { color, breakWidth } from './style';
@@ -42,7 +42,7 @@ const Card = ({ children, style }) => (
 
 Card.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default Card;

src/component/container.js

 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
 const styles = StyleSheet.create({
@@ -15,7 +15,7 @@ const Container = ({ children, style }) => (
 
 Container.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default Container;

src/component/field.js

 import React from 'react';
-import { Text as RNText, StyleSheet, View } from 'react-native';
+import { Text as RNText, StyleSheet, View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { createStyles, maxWidth } from './media-query';
 import Text from './text';
@@ -96,7 +96,7 @@ export const NamedField = ({ name, children, style }) => (
 NamedField.propTypes = {
   name: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -151,5 +151,5 @@ export const DetailField = ({ name, children, style }) => (
 DetailField.propTypes = {
   name: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/form.js

 import React from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
+import { View, Text as RNText, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
 import { color, font } from './style';
@@ -25,7 +25,7 @@ export const FormStretcher = ({ children, style }) => (
 
 FormStretcher.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //

src/component/header.js

 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { createStyles, maxWidth } from './media-query';
 import Text from './text';
@@ -60,7 +60,7 @@ export const Header = ({ style, children, color, shadow, separator }) => (
 );
 
 Header.propTypes = {
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
   children: PropTypes.node,
   color: PropTypes.string,
   shadow: PropTypes.bool,

src/component/icon.js

 import React from 'react';
-import { Image, View } from 'react-native';
+import { Image, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
 const Icon = ({ image, style }) => <Image source={image} style={style} />;
 
 Icon.propTypes = {
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default Icon;

src/component/image.js

@@ -3,6 +3,7 @@ import {
   View,
   StyleSheet,
   ImageBackground as RNImageBackground,
+  ViewPropTypes,
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -26,7 +27,7 @@ export const ImageBackground = ({ source, children, style }) => (
 ImageBackground.propTypes = {
   source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -49,5 +50,5 @@ export const SvgBackground = ({ svg, children, style }) => (
 SvgBackground.propTypes = {
   svg: PropTypes.node,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/label.js

 import React from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
+import { View, Text as RNText, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
 import { font } from './style';
@@ -31,7 +31,7 @@ export const BalanceLabel = ({ children, style }) => (
 
 BalanceLabel.propTypes = {
   children: PropTypes.node.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export const BalanceLabelNumeral = ({ children, style }) => (

src/component/list.js

 import React, { PureComponent } from 'react';
-import { View, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ViewPropTypes,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import { createStyles, maxWidth } from './media-query';
 import { color, breakWidth } from './style';
@@ -37,7 +43,7 @@ export const ListContent = ({ children, style }) => (
 
 ListContent.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -89,7 +95,7 @@ export class ListItem extends PureComponent {
 ListItem.propTypes = {
   onSelect: PropTypes.func,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -108,7 +114,7 @@ export const ListHeader = ({ style, children }) => (
 
 ListHeader.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -139,5 +145,5 @@ export class CardItem extends PureComponent {
 }
 
 CardItem.propTypes = {
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/loader.js

 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { color } from './style';
 
@@ -21,5 +21,5 @@ export const Circle = ({ children, style }) => (
 
 Circle.propTypes = {
   children: PropTypes.node.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/main-content.js

 import React from 'react';
-import { ScrollView, View, StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
 const styles = StyleSheet.create({
@@ -17,7 +17,7 @@ const MainContent = ({ children, style }) => (
 
 MainContent.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default MainContent;

src/component/modal.js

 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { Button } from './button';
 import { H4Text } from './text';
@@ -50,7 +50,7 @@ Modal.propTypes = {
   title: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default Modal;

src/component/notification.js

 import React, { Component } from 'react';
-import { Animated, StyleSheet, View, SafeAreaView } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  View,
+  SafeAreaView,
+  ViewPropTypes,
+  Platform,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import { SmallPillButton } from './button';
 import { Text, H4Text } from './text';
@@ -14,6 +21,7 @@ import { color, font } from './style';
 const barStyles = StyleSheet.create({
   safe: {
     backgroundColor: color.blackDark,
+    paddingTop: Platform.OS === 'android' ? 25 : 0,
   },
   bar: {
     alignSelf: 'stretch',
@@ -60,7 +68,7 @@ export const NotificationBar = ({ notification, display, style }) =>
 NotificationBar.propTypes = {
   notification: PropTypes.object,
   display: PropTypes.bool.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -93,7 +101,7 @@ export const Alert = ({ type, style }) => (
 
 Alert.propTypes = {
   type: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -124,7 +132,7 @@ export const CountBubble = ({ children, style }) =>
 
 CountBubble.propTypes = {
   children: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -163,7 +171,7 @@ export const CopiedNotification = ({ display, color, style }) => (
 CopiedNotification.propTypes = {
   display: PropTypes.bool.isRequired,
   color: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -202,5 +210,5 @@ class FadeInView extends Component {
 FadeInView.propTypes = {
   display: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/password-entry.js

 import React, { Component } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  ViewPropTypes,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import { FormSubText, FormStretcher } from './form';
 import { color, font } from './style';
@@ -114,7 +119,7 @@ export class PasswordEntry extends Component {
 
 PasswordEntry.propTypes = {
   success: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //

src/component/pin-entry.js

 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
 import Button from './button';
@@ -30,7 +30,7 @@ export const PinBubbles = ({ pin, style }) => (
 
 PinBubbles.propTypes = {
   pin: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //

src/component/qrcode.js

 import React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View, Image, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import QRImage from 'qr-image';
 import { color } from './style';
@@ -28,7 +28,7 @@ const QRCode = ({ children = '', size = 180, style }) => {
 QRCode.propTypes = {
   children: PropTypes.string.isRequired,
   size: PropTypes.number,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 export default QRCode;

src/component/setting.js

 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { View, ScrollView, StyleSheet, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
 import { ListItem, ListHeader } from './list';
@@ -45,7 +45,7 @@ export const SettingContent = ({ children, style }) => (
 
 SettingContent.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -74,7 +74,7 @@ export const SettingList = ({ children, style }) => (
 
 SettingList.propTypes = {
   children: PropTypes.node,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //
@@ -144,5 +144,5 @@ export const SettingHeader = ({ name, style }) => (
 
 SettingHeader.propTypes = {
   name: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };

src/component/spinner.js

@@ -63,7 +63,7 @@ LoadNetworkSpinner.propTypes = {
   continuous: PropTypes.bool,
   percentage: PropTypes.number.isRequired,
   msg: PropTypes.string.isRequired,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 //