Patch/button (#371)

Altough there are more `styles` to decorate inside the `TouchableOpacity`, we did not have the `style` of its own component. Here is where you should place styles like margin.

Bump ver to `0.0.28`.

CHANGELOGS.md

@@ -1,5 +1,9 @@
 ## Changelogs
 
+## 0.0.28
+
+- Added `TouchableOpacity` style prop to [Button] [#37`](https://github.com/dooboolab/dooboo-ui/pull/371`).
+
 ## 0.0.27
 
 - Updated packages and applied new linting rules [#370](https://github.com/dooboolab/dooboo-ui/pull/370).

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooboo-ui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "dooboolab",

main/Button.tsx

@@ -1,12 +1,14 @@
 import {
   ActivityIndicator,
   LayoutRectangle,
+  StyleProp,
   StyleSheet,
   Text,
   TextProps,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
+  ViewStyle,
 } from 'react-native';
 import React, { useRef, useState } from 'react';
 
@@ -55,6 +57,7 @@ interface Props {
   indicatorColor?: string;
   loading?: boolean;
   disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
   styles?: StylesType;
   leftElement?: React.ReactElement;
   rightElement?: React.ReactElement;

stories/dooboo-ui/Button.stories.tsx

@@ -36,9 +36,9 @@ function Default(): React.ReactElement {
           loading={false}
           text="😀 😎 👍 💯"
           onPress={action('Clicked')}
+          style={{ marginVertical: 40 }}
           styles={{
             container: {
-              marginVertical: 40,
               borderWidth: 0.5,
             },
           }}
@@ -57,9 +57,9 @@ function Default(): React.ReactElement {
         />
 
         <Button
+          style={{ marginVertical: 40 }}
           styles={{
             container: {
-              marginVertical: 40,
               borderWidth: 0.5,
             },
             text: {
@@ -81,9 +81,9 @@ function Default(): React.ReactElement {
           }
           loading={googleLoading}
           indicatorColor="#023059"
+          style={{ marginVertical: 20 }}
           styles={{
             container: {
-              marginVertical: 20,
               backgroundColor: '#ccc',
             },
           }}