@widergy/mobile-ui 1.13.5 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.14.0](https://github.com/widergy/mobile-ui/compare/v1.13.5...v1.14.0) (2024-07-17)
+
+
+### Features
+
+* add background gradient to UTRoundView ([#301](https://github.com/widergy/mobile-ui/issues/301)) ([b56dc81](https://github.com/widergy/mobile-ui/commit/b56dc81bfec89696048e7e7bf8e5458c08300203))
+
 ## [1.13.5](https://github.com/widergy/mobile-ui/compare/v1.13.4...v1.13.5) (2024-07-17)
 
 

package/lib/components/UTRoundView/index.js

@@ -1,25 +1,38 @@
-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 Surface from '../Surface';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
+import { generateBackgroundGradient } from './utils';
 
-const UTRoundView = ({ children, styles, withShadow = false }) => {
+const UTRoundView = ({ children, styles, withShadow = false, startColor, endColor }) => {
   const theme = useTheme();
-  const themedStyles = _.merge({}, theme?.roundView, styles);
+  const themedStyles = merge({}, theme?.roundView, styles);
+  const withBackgroundGradient = !!startColor && !!endColor;
 
   const ChildrenContainer = withShadow ? Surface : View;
 
   return (
-    <Animated.View style={[ownStyles.container, themedStyles?.outerContainer]}>
-      <ChildrenContainer position="top" style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>
-        {children}
-      </ChildrenContainer>
-    </Animated.View>
+    <Fragment>
+      {withBackgroundGradient && (
+        <View style={ownStyles.backgroundGradient}>{generateBackgroundGradient(startColor, endColor)}</View>
+      )}
+      <Animated.View
+        style={[
+          ownStyles.container,
+          themedStyles?.outerContainer,
+          withBackgroundGradient && ownStyles?.outerWithBackground
+        ]}
+      >
+        <ChildrenContainer position="top" style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>
+          {children}
+        </ChildrenContainer>
+      </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
-  })
+  }),
+  startColor: string,
+  endColor: string
 };

package/lib/components/UTRoundView/styles.js

@@ -3,6 +3,11 @@ 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
   },
@@ -13,6 +18,9 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: ROUND_VIEW_BORDER_RADIUS,
     borderTopRightRadius: ROUND_VIEW_BORDER_RADIUS,
     paddingTop: ROUND_VIEW_BORDER_RADIUS
+  },
+  outerWithBackground: {
+    backgroundColor: 'transparent'
   }
 });
 

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": "1.13.5",
+  "version": "1.14.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -45,8 +45,9 @@
     "react-native-collapsible": "^1.6.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-pager-view": "^6.2.1"
+    "react-native-pager-view": "^6.2.1",
+    "react-native-svg": "^13.13.0",
+    "react-native-safe-area-context": "^4.5.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",