Independent control for border radius

demo/.expo/packager-info.json

@@ -1,9 +1,9 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": 19000,
-  "packagerPort": 19001,
-  "packagerPid": 1665,
-  "expoServerNgrokUrl": "https://in-qqr.rcaferati.demo.exp.direct",
-  "packagerNgrokUrl": "https://packager.in-qqr.rcaferati.demo.exp.direct",
-  "ngrokPid": 1754
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null
 }

demo/.expo/settings.json

@@ -3,5 +3,5 @@
   "lanType": "ip",
   "dev": false,
   "minify": true,
-  "urlRandomness": "in-qqr"
+  "urlRandomness": "6z-ap6"
 }

demo/app.json

@@ -3,11 +3,8 @@
     "name": "React Native Awesome Button Component",
     "slug": "react-native-really-awesome-button",
     "privacy": "public",
-    "sdkVersion": "32.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
+    "sdkVersion": "33.0.0",
+    "platforms": ["ios", "android"],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
@@ -19,13 +16,11 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": false
     },
     "description": "React Native button component. 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. Source @ https://github.com/rcaferati/react-native-really-awesome-button Author @ https://caferati.me",
     "githubUrl": "https://github.com/rcaferati/react-native-really-awesome-button"
   }
-}
+}

demo/package.json

@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "@expo/samples": "2.1.1",
-    "expo": "^32.0.0",
+    "expo": "^33.0.0",
     "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-really-awesome-button": "1.4.2",
     "react-navigation": "^3.0.9"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.0.0",
-    "jest-expo": "^32.0.0"
+    "jest-expo": "^33.0.0"
   },
   "private": true
 }

src/index.js

@@ -42,6 +42,11 @@ export default class Button extends React.Component {
     backgroundShadow: PropTypes.string,
     borderColor: PropTypes.string,
     borderRadius: PropTypes.number,
+    borderBottomLeftRadius: PropTypes.number,
+    borderBottomRightRadius: PropTypes.number,
+    borderTopLeftRadius: PropTypes.number,
+    borderTopRightRadius: PropTypes.number,
+    borderLeftBottomRadius: PropTypes.number,
     borderWidth: PropTypes.number,
     children: PropTypes.node,
     ExtraContent: PropTypes.node,
@@ -74,6 +79,10 @@ export default class Button extends React.Component {
     backgroundShadow: DEFAULT_BACKGROUND_SHADOW,
     borderColor: null,
     borderRadius: DEFAULT_BORDER_RADIUS,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
     borderWidth: DEFAULT_BORDER_WIDTH,
     children: null,
     disabled: false,

src/styles.js

@@ -11,6 +11,10 @@ const memoized = memoize(
     backgroundShadow,
     borderColor,
     borderRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     borderWidth,
     height,
     paddingBottom,
@@ -27,6 +31,13 @@ const memoized = memoize(
   }) => {
     const calcHeight = height + paddingBottom + paddingTop;
     const calcWidth = stretch ? "100%" : width || stateWidth || null;
+    const borderRadiusObject = {};
+
+    borderRadiusObject.borderRadius = borderRadius;
+    borderRadiusObject.borderBottomLeftRadius = borderBottomLeftRadius;
+    borderRadiusObject.borderBottomRightRadius = borderBottomRightRadius;
+    borderRadiusObject.borderTopLeftRadius = borderTopLeftRadius;
+    borderRadiusObject.borderTopRightRadius = borderTopRightRadius;
 
     const dimensionsDiff = {
       width: calcWidth,
@@ -53,11 +64,11 @@ const memoized = memoize(
       shadow: {
         bottom: -raiseLevel / 2,
         height: height - raiseLevel,
-        borderRadius,
+        ...borderRadiusObject,
         backgroundColor: backgroundShadow
       },
       bottom: {
-        borderRadius,
+        ...borderRadiusObject,
         backgroundColor: backgroundDarker,
         ...dimensionsDiff
       },
@@ -67,7 +78,7 @@ const memoized = memoize(
       },
       content: {
         ...dimensionsDiff,
-        borderRadius
+        ...borderRadiusObject
       },
       activeBackground: {
         ...dimensionsDiff,
@@ -76,7 +87,7 @@ const memoized = memoize(
       text: {
         borderColor,
         borderWidth,
-        borderRadius,
+        ...borderRadiusObject,
         backgroundColor
       }
     });
@@ -92,6 +103,10 @@ export const getStyles = ({
   backgroundShadow,
   borderColor,
   borderRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
   borderWidth,
   height,
   paddingBottom,
@@ -115,6 +130,10 @@ export const getStyles = ({
     backgroundShadow,
     borderColor,
     borderRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     borderWidth,
     height,
     paddingBottom,
@@ -137,7 +156,7 @@ export const styles = StyleSheet.create({
     zIndex: 10
   },
   container__text: {
-    width: '100%',
+    width: "100%",
     fontWeight: "bold",
     zIndex: 10,
     textAlign: "center"