unicorn-demo-app 7.46.2-snapshot.7306 → 7.46.2-snapshot.7316

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.46.2-snapshot.7306",
+  "version": "7.46.2-snapshot.7316",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/componentScreens/ButtonsScreen.tsx

@@ -1,6 +1,17 @@
 import React, {Component} from 'react';
-import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
-import {Text, View, Assets, Constants, Button, Colors, Typography, ButtonProps} from 'react-native-ui-lib';
+import {ScrollView, StyleSheet, Alert} from 'react-native';
+import {
+  Text,
+  View,
+  Assets,
+  Constants,
+  Button,
+  Colors,
+  Typography,
+  ButtonProps,
+  Incubator,
+  Image
+} from 'react-native-ui-lib';
 
 const ButtonSpace = 20;
 const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -267,6 +278,34 @@ export default class ButtonsScreen extends Component {
             <Button label="hyperlink button" hyperlink style={{marginBottom: ButtonSpace}}/>
 
             <Button label="Icon on right" iconSource={plusIcon} iconOnRight/>
+
+            <Text style={styles.header}>Custom Backgrounds</Text>
+            <Button
+              label="Gradient Background"
+              customBackground={
+                <Incubator.Gradient
+                  colors={[Colors.$backgroundPrimaryHeavy, Colors.$backgroundPrimaryMedium]}
+                  type="rectangle"
+                  width={200}
+                  height={50}
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+            />
+            <Button
+              label="Image Background"
+              customBackground={
+                <Image
+                  source={{
+                    uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
+                  }}
+                  style={{width: 200, height: 50}}
+                  resizeMode="cover"
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+              $textNeutralHeavy
+            />
           </View>
 
           <View marginT-20>