update Text component to use ThemeProps to enable defining global behaviour for Text component

Author: ethanshar

demo/src/demoApp.js

@@ -1,5 +1,5 @@
 import {Navigation} from 'react-native-navigation';
-import {Typography, Colors, Assets, Button, Badge, ThemeManager} from 'react-native-ui-lib'; //eslint-disable-line
+import {Typography, Colors, Assets, Button, Badge, ThemeManager, Text} from 'react-native-ui-lib'; //eslint-disable-line
 import * as Animatable from 'react-native-animatable';
 import './screens';
 
@@ -23,21 +23,25 @@ import './screens';
 //   subtitleColor: Colors.blue40,
 // });
 
+// ThemeManager.setComponentTheme('Text', {
+//   dark10: true,
+// });
+
 Assets.loadAssetsGroup('icons.general', {
   camera: require('./assets/icons/cameraSelected.png'),
 });
 
 Animatable.initializeRegistryWithDefinitions({
   gridListEntrance: {
-    from: {opacity: 0, ['translateY']: 15},
-    to: {opacity: 1, ['translateY']: 0},
+    from: {opacity: 0, translateY: 15},
+    to: {opacity: 1, translateY: 0},
   },
 });
 
 Animatable.initializeRegistryWithDefinitions({
   basicListEntrance: {
-    from: {opacity: 0, ['translateY']: 20},
-    to: {opacity: 1, ['translateY']: 0},
+    from: {opacity: 0, translateY: 20},
+    to: {opacity: 1, translateY: 0},
   },
 });
 
@@ -51,4 +55,3 @@ export function startApp() {
     },
   });
 }
-

src/commons/BaseComponent.js

@@ -100,8 +100,9 @@ export default class BaseComponent extends Component {
 
   extractColorValue() {
     let color;
+    const props = this.getThemeProps();
     _.forEach(Colors, (value, key) => {
-      if (this.props[key] === true) {
+      if (props[key] === true) {
         color = value;
       }
     });

src/components/text/index.js

@@ -40,7 +40,7 @@ export default class Text extends BaseComponent {
   render() {
     const color = this.props.color || this.extractColorValue();
     const typography = this.extractTypographyValue();
-    const {style, center, ...others} = this.props;
+    const {style, center, ...others} = this.getThemeProps();
     const {margins} = this.state;
     const textStyle = [
       this.styles.container,