From 867e57a7462fea19cab28998313721d1619b7433 Mon Sep 17 00:00:00 2001
From: Alexandr Priezzhev <priezz@users.noreply.github.com>
Date: Tue, 24 Apr 2018 12:17:03 +0200
Subject: [PATCH] Allow Label to accept any styling props

This allows Label to accept any styling props. However, this piece of code does not follow the prev style (no semicolons) and does not depend on styled components. Hope, it does not matter.
---
 src/Label.js | 75 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/Label.js b/src/Label.js
index 43b5717..cd647a7 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -1,40 +1,55 @@
 import React from 'react'
-import { Text, View, Platform } from 'react-native'
+import {Text, View, Platform} from 'react-native'
 import PropTypes from 'prop-types'
-import styled from 'styled-components/native'
 import defaultTheme from './Theme'
 
-const LabelWrapper = styled.View`
-  flex: ${props => props.inlineLabel ? 0.5 : 1};
-  flex-direction: ${props => props.inlineLabel ? 'row' : 'column'};
-  flex-direction: column;
-  justify-content: center;
-  padding-left: ${Platform.OS === 'android' ? 5 : 0};
-  marginTop: ${props => props.inlineLabel ? 0 : 5};
-`
-
-const LabelText = styled.Text`
-  color: ${props => props.theme.Label.color};
-  font-size: ${props => props.theme.Label.fontSize};
-`
-
-LabelText.defaultProps = {
-  theme: defaultTheme,
-  componentName: 'Label',
-}
 
-const Label = props => {
-  const { children, inlineLabel, theme } = props
+const NON_TEXT_PROPS = ['stackedHeight']
+const NON_VIEW_PROPS = ['color', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'includeFontPadding', 'letterSpacing', 'lineHeight', 'stackedHeight', 'textAlign', 'textAlignVertical', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'writingDirection']
 
-  return (
-    <LabelWrapper inlineLabel={inlineLabel} theme={theme}>
-      <LabelText inlineLabel={inlineLabel} theme={theme} >{ children }</LabelText>
-    </LabelWrapper>
-  )
+
+class LabelWrapper extends React.PureComponent {
+  render() {
+    const {children, inlineLabel, theme} = this.props
+    const style = {
+      flex: inlineLabel ? 0.5 : 1,
+      flexDirection: inlineLabel ? 'row' : 'column',
+      justifyContent: 'flex-start',
+      paddingLeft: Platform.OS === 'android' ? 5 : 0,
+      marginTop: inlineLabel ? 0 : 5,
+      ...theme.Label,
+    }
+    NON_VIEW_PROPS.forEach(p => delete style[p])
+    return <View children={children} style={style} />
+  }
 }
 
-Label.propTypes = {
-  children: PropTypes.string.isRequired
+class LabelText extends React.PureComponent {
+  static defaultProps = {
+    theme: defaultTheme,
+    componentName: 'Label',
+  }
+
+  render() {
+    const {children, theme} = this.props
+    const style = {
+      ...theme.Label,
+      ...theme.LabelText,
+    }
+    NON_TEXT_PROPS.forEach(p => delete style[p])
+    return <Text children={children} style={style} />
+  }
 }
 
-export default Label
+export default class Label extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.string.isRequired
+  }
+
+  render() {
+    const {children, inlineLabel, theme} = this.props
+    return <LabelWrapper inlineLabel={inlineLabel} theme={theme}>
+      <LabelText inlineLabel={inlineLabel} theme={theme}>{children}</LabelText>
+    </LabelWrapper>
+  }
+}