Support rn 0.56, add PureComponent container for TopView, rilyu#259, rilyu#260, rilyu#263, rilyu#264

Author: rilyu

components/Label/Label.js

@@ -8,7 +8,7 @@ import {Text} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class Label extends Text {
+export default class Label extends Component {
 
   static propTypes = {
     ...Text.propTypes,
@@ -60,11 +60,13 @@ export default class Label extends Text {
 
     if (text || text === '' || text === 0) children = text;
 
-    this.props = {type, size, style, text, children, ...others};
+    return {type, size, style, text, children, ...others};
   }
 
   render() {
-    this.buildProps();
-    return super.render();
+    let props = this.buildProps();
+    return (
+      <Text {...props} />
+    );
   }
 }

components/ModalIndicator/ModalIndicatorView.js

@@ -15,8 +15,8 @@ export default class ModalIndicatorView extends Overlay.View {
     ...Overlay.View.propTypes,
     text: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
     position: PropTypes.oneOf(['top', 'bottom', 'center']),
-    size: ActivityIndicator.propTypes.size,
-    color: ActivityIndicator.propTypes.color,
+    size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'large']), PropTypes.number]),
+    color: PropTypes.string,
   };
 
   static defaultProps = {

components/NavigationBar/NavigationTitle.js

@@ -8,7 +8,7 @@ import {Text} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 
-export default class NavigationTitle extends Text {
+export default class NavigationTitle extends Component {
 
   static propTypes = {
     ...Text.propTypes,
@@ -40,12 +40,14 @@ export default class NavigationTitle extends Text {
 
     if (text || text === '' || text === 0) children = text;
 
-    this.props = {style, text, children, ...others};
+    return {style, text, children, ...others};
   }
 
   render() {
-    this.buildProps();
-    return super.render();
+    let props = this.buildProps();
+    return (
+      <Text {...props} />
+    );
   }
 
 }

components/Overlay/TopView.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-import React, {Component} from "react";
+import React, {Component, PureComponent} from "react";
 import {StyleSheet, AppRegistry, DeviceEventEmitter, View, Animated} from 'react-native';
 //import {Symbol} from 'core-js';
 
@@ -162,7 +162,9 @@ export default class TopView extends Component {
     return (
       <View style={{backgroundColor: Theme.screenColor, flex: 1}}>
         <Animated.View style={{flex: 1, transform: transform}}>
-          {this.props.children}
+          <PureView>
+            {this.props.children}
+          </PureView>
         </Animated.View>
         {elements.map((item, index) => {
           return (
@@ -188,6 +190,16 @@ var styles = StyleSheet.create({
   },
 });
 
+class PureView extends PureComponent {
+  render() {
+    return (
+      <View style={{flex: 1}}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
 if (!AppRegistry.registerComponentOld) {
   AppRegistry.registerComponentOld = AppRegistry.registerComponent;
 }

components/Toast/ToastView.js

@@ -33,7 +33,7 @@ export default class ToastView extends Overlay.View {
   buildProps() {
     super.buildProps();
 
-    let {style, contentStyle, text, icon, position, ...others} = this.props;
+    let {style, contentStyle, text, icon, position, overlayPointerEvents, modal, ...others} = this.props;
 
     style = [{
       paddingLeft: Theme.toastScreenPaddingLeft,
@@ -93,7 +93,9 @@ export default class ToastView extends Overlay.View {
       );
     }
 
-    this.props = {style, contentStyle, text, icon, position, ...others};
+    if (modal) overlayPointerEvents = 'auto';
+
+    this.props = {style, contentStyle, text, icon, position, overlayPointerEvents, modal, ...others};
   }
 
   renderContent() {

example/views/NavigationBarExample.js

@@ -25,7 +25,7 @@ export default class NavigationBarExample extends NavigationPage {
     this.rightViewItems = ['None', 'Link button', 'Icon button', 'Two icon button'];
     this.bgColorItems = ['Default', 'Custom'];
     this.tintColorItems = ['Default', 'Custom'];
-    this.statusBarStyleItems = ['Default', 'Light Content'];
+    this.statusBarStyleItems = ['Default', 'Light Content', 'Dark Content'];
 
     Object.assign(this.state, {
       type: 'iOS',
@@ -67,6 +67,7 @@ export default class NavigationBarExample extends NavigationPage {
     switch(this.state.statusBarStyle) {
       case 'Default': return 'default';
       case 'Light Content': return 'light-content';
+      case 'Dark Content': return 'dark-content';
     }
   }
 

example/views/ToastExample.js

@@ -15,6 +15,17 @@ export default class ToastExample extends NavigationPage {
     showBackButton: true,
   };
 
+  showModal() {
+    Toast.show({
+      text: 'Toast modal',
+      icon: <ActivityIndicator size='large' color={Theme.toastIconTintColor} />,
+      position: 'center',
+      duration: 5000,
+      overlayOpacity: 0.4,
+      modal: true,
+    });
+  }
+
   static customKey = null;
 
   showCustom() {
@@ -46,6 +57,8 @@ export default class ToastExample extends NavigationPage {
         <ListRow title='Info' onPress={() => Toast.info('Toast info')} />
         <ListRow title='Stop' onPress={() => Toast.stop('Toast stop')} bottomSeparator='full' />
         <View style={{height: 20}} />
+        <ListRow title='Modal' onPress={() => this.showModal()} topSeparator='full' bottomSeparator='full' />
+        <View style={{height: 20}} />
         <ListRow title='Show custom' onPress={() => this.showCustom()} topSeparator='full' />
         <ListRow title='Hide custom' onPress={() => this.hideCustom()} bottomSeparator='full' />
       </ScrollView>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teaset",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "A UI library for react native.",
   "main": "index.js",
   "scripts": {