@widergy/mobile-ui 0.41.1 → 0.42.0

package/lib/components/UTRoundView/index.js

@@ -1,20 +1,27 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { View, Animated } from 'react-native';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 
 import { useTheme } from '../../theming';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
+import { generateBackgroundGradient } from './utils';
 
-const UTRoundView = ({ children, styles }) => {
+const UTRoundView = ({ children, styles, startColor, endColor }) => {
   const theme = useTheme();
-  const themedStyles = _.merge({}, theme?.roundView, styles);
+  const themedStyles = merge({}, theme?.roundView, styles);
+  const withBackgroundGradient = !!startColor && !!endColor;
 
   return (
-    <Animated.View style={[ownStyles.container, themedStyles?.outerContainer]}>
-      <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
-    </Animated.View>
+    <Fragment>
+      {withBackgroundGradient && (
+        <View style={ownStyles.backgroundGradient}>{generateBackgroundGradient(startColor, endColor)}</View>
+      )}
+      <Animated.View style={[ownStyles.container, themedStyles?.outerContainer, withBackgroundGradient && ownStyles?.outerWithBackground]}>
+        <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
+      </Animated.View>
+    </Fragment>
   );
 };
 

package/lib/components/UTRoundView/propTypes.js

@@ -1,9 +1,11 @@
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { shape } from 'prop-types';
+import { shape, string } from 'prop-types';
 
 export default {
   styles: shape({
     outerContainer: ViewPropTypes.style,
-    innerContainer: ViewPropTypes.style
-  })
+    innerContainer: ViewPropTypes.style,
+  }),
+  startColor: string,
+  endColor: string,
 };

package/lib/components/UTRoundView/styles.js

@@ -3,8 +3,13 @@ import { StyleSheet } from 'react-native';
 export const ROUND_VIEW_BORDER_RADIUS = 25;
 
 const styles = StyleSheet.create({
+  backgroundGradient: {
+    height: '100%',
+    position: 'absolute',
+    width: '100%',
+  },
   container: {
-    flex: 1
+    flex: 1,
   },
   innerContainer: {
     height: '100%',
@@ -12,8 +17,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     borderTopLeftRadius: ROUND_VIEW_BORDER_RADIUS,
     borderTopRightRadius: ROUND_VIEW_BORDER_RADIUS,
-    paddingTop: ROUND_VIEW_BORDER_RADIUS
-  }
+    paddingTop: ROUND_VIEW_BORDER_RADIUS,
+  },
+  outerWithBackground: {
+    backgroundColor: 'transparent',
+  },
 });
 
 export default styles;

package/lib/components/UTRoundView/utils.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, { Rect, LinearGradient, Defs, Stop } from 'react-native-svg';
+
+export const generateBackgroundGradient = (startColor, endColor) => (
+  <Svg height="100%" width="100%">
+    <Defs>
+      <LinearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+        <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
+        <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+      </LinearGradient>
+    </Defs>
+    <Rect x="0" y="0" width="100%" height="100%" fill="url(#gradient1)" />
+  </Svg>
+);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -38,7 +38,8 @@
     "numeral": "^2.0.6",
     "pdf-lib": "^1.14.1",
     "react-native-markdown-display": ">=6.1.6",
-    "react-native-modal": "^11.5.6"
+    "react-native-modal": "^11.5.6",
+    "react-native-svg": "^12.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",