Issue #79 and #82 resolved

Button.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View,
+    ViewStyle,
+    StyleProp,
+    TextStyle,
+    TouchableOpacityProps
+} from 'react-native';
+
+import coalesceNonElementChildren from './coalesceNonElementChildren';
+
+const systemButtonOpacity = 0.2;
+
+interface propTypes extends TouchableOpacityProps {
+    accessibilityLabel?: string,
+    textID?: string,
+    allowFontScaling?: boolean,
+    disabled?: boolean,
+    containerStyle?: StyleProp<ViewStyle>,
+    disabledContainerStyle?: StyleProp<ViewStyle>,
+    style?: StyleProp<TextStyle>,
+    styleDisabled?: StyleProp<TextStyle>,
+    childGroupStyle?: StyleProp<ViewStyle>,
+    children: React.ReactChild
+}
+
+
+export default function Button({
+                                   disabled,
+                                   activeOpacity,
+                                   style,
+                                   styleDisabled,
+                                   childGroupStyle,
+                                   children,
+                                   allowFontScaling,
+                                   containerStyle,
+                                   disabledContainerStyle,
+                                   onPress,
+                                   onPressIn,
+                                   onPressOut,
+                                   onLongPress,
+                                   delayPressIn,
+                                   delayPressOut,
+                                   delayLongPress,
+                                   testID,
+                                   accessibilityLabel
+                               }: propTypes) {
+    function _computeActiveOpacity() {
+        if (disabled) {
+            return 1;
+        }
+        return activeOpacity != null ?
+            activeOpacity :
+            systemButtonOpacity;
+    }
+
+    function _renderGroupedChildren() {
+        let styleRenderGroup = [
+            styles.text,
+            disabled ? styles.disabledText : null,
+            style,
+            disabled ? styleDisabled : null,
+        ];
+        let childGroupStyleCustom = [
+            styles.group,
+            childGroupStyle,
+        ];
+        const childrenCustom = coalesceNonElementChildren(children, (children: React.ReactNode, index: string | number | undefined) => {
+            return (
+                <Text key={index} style={styleRenderGroup} {...{allowFontScaling}}>
+                    {childrenCustom}
+                </Text>
+            );
+        });
+
+        switch (childrenCustom.length) {
+            case 0:
+                return null;
+            case 1:
+                return childrenCustom[0];
+            default:
+                return <View style={childGroupStyleCustom}>{childrenCustom}</View>;
+        }
+    }
+
+
+    const touchableProps: TouchableOpacityProps = {
+        activeOpacity: _computeActiveOpacity(),
+
+    };
+    const containerStyleCustom = [
+        containerStyle,
+        disabled ? disabledContainerStyle : null
+    ];
+
+    if (!disabled) {
+        touchableProps.onPress = onPress;
+        touchableProps.onPressIn = onPressIn;
+        touchableProps.onPressOut = onPressOut;
+        touchableProps.onLongPress = onLongPress;
+        touchableProps.delayPressIn = delayPressIn;
+        touchableProps.delayPressOut = delayPressOut;
+        touchableProps.delayLongPress = delayLongPress;
+    }
+
+    return (
+        <TouchableOpacity
+            {...{
+                touchableProps, testID, accessibilityLabel
+            }}
+            style={containerStyleCustom}
+            accessibilityRole="button">
+            {_renderGroupedChildren()}
+        </TouchableOpacity>
+    );
+}
+
+
+const styles = StyleSheet.create({
+    text: {
+        color: '#007aff',
+        fontSize: 17,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    disabledText: {
+        color: '#dcdcdc',
+    },
+    group: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+});

coalesceNonElementChildren.js

@@ -1,31 +1,30 @@
-import React, { Children } from 'react';
-
+import React, {Children} from 'react'
 
+// @ts-ignore
 export default function coalesceNonElementChildren(children, coalesceNodes) {
-  var coalescedChildren = [];
+    let coalescedChildren = [];
+    let contiguousNonElements: React.ReactText[] = [];
+    Children.forEach(children, (child: React.ReactChild) => {
+        if (!React.isValidElement(child)) {
+            contiguousNonElements.push(child);
+            return;
+        }
 
-  var contiguousNonElements = [];
-  Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      contiguousNonElements.push(child);
-      return;
-    }
+        if (contiguousNonElements.length) {
+            coalescedChildren.push(
+                coalesceNodes(contiguousNonElements, coalescedChildren.length)
+            );
+            contiguousNonElements = [];
+        }
+
+        coalescedChildren.push(child);
+    });
 
     if (contiguousNonElements.length) {
-      coalescedChildren.push(
-        coalesceNodes(contiguousNonElements, coalescedChildren.length)
-      );
-      contiguousNonElements = [];
+        coalescedChildren.push(
+            coalesceNodes(contiguousNonElements, coalescedChildren.length)
+        );
     }
 
-    coalescedChildren.push(child);
-  });
-
-  if (contiguousNonElements.length) {
-    coalescedChildren.push(
-      coalesceNodes(contiguousNonElements, coalescedChildren.length)
-    );
-  }
-
-  return coalescedChildren;
+    return coalescedChildren;
 }

package.json

@@ -25,6 +25,8 @@
     "react-native": "*"
   },
   "dependencies": {
-    "prop-types": "^15.5.10"
+    "typescript": "^3.5.3"
+    "@types/react": "^16.8.23",
+    "@types/react-native": "^0.60.0",
   }
 }