Create an Image example screen to show case the Image capabilities better

Author: ethanshar

demo/src/screens/ExampleScreenPresenter.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {View, Text, Checkbox, RadioGroup, RadioButton, ColorPalette, Colors} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+export function renderBooleanOption(title, key) {
+  const value = this.state[key];
+  return (
+    <View row centerV spread marginB-s4>
+      <Text text70M style={{flex: 1}}>
+        {title}
+      </Text>
+      <Checkbox useCustomTheme textID={key} value={value} onValueChange={value => this.setState({[key]: value})}/>
+    </View>
+  );
+}
+
+export function renderRadioGroup(title, key, options) {
+  const value = this.state[key];
+  return (
+    <View marginB-s2>
+      <Text text70M marginB-s2>
+        {title}
+      </Text>
+      <RadioGroup initialValue={value} onValueChange={value => this.setState({[key]: value})}>
+        {_.map(options, (value, key) => {
+          return <RadioButton useCustomTheme testID={key} key={key} marginB-s2 label={value} value={options[key]}/>;
+        })}
+      </RadioGroup>
+    </View>
+  );
+}
+
+export function renderColorOption(title,
+  key,
+  colors = ['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]) {
+  const value = this.state[key];
+  return (
+    <View marginV-s2>
+      <Text text70M>{title}</Text>
+      <ColorPalette
+        value={value}
+        colors={colors}
+        onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})}
+      />
+    </View>
+  );
+}

demo/src/screens/MenuStructure.js

@@ -33,6 +33,7 @@ export const navigationData = {
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
       {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
+      {title: 'Image', tags: 'image cover overlay', screen: 'unicorn.components.ImageScreen'},
       {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},

demo/src/screens/componentScreens/ImageScreen.js

@@ -0,0 +1,71 @@
+import React, {Component} from 'react';
+import {View, Text, Image, Colors} from 'react-native-ui-lib';
+import {renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
+
+import cameraIcon from '../../assets/icons/cameraSelected.png';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
+
+const DEFAULT_SIZE = 100;
+class ImageScreen extends Component {
+  state = {
+    cover: true,
+    showOverlayContent: false,
+    overlayType: 'none'
+  };
+
+  renderOverlayContent() {
+    const {cover, overlayType, showOverlayContent} = this.state;
+    if (showOverlayContent) {
+      if (cover) {
+        return (
+          <View padding-20 flex bottom={overlayType === Image.overlayTypes.BOTTOM}>
+            <View row centerV>
+              <Image
+                style={{margin: 5, marginRight: 10}}
+                source={cameraIcon}
+                tintColor={overlayType !== 'none' ? Colors.white : undefined}
+              />
+              <Text text30 white={overlayType !== 'none'}>
+                Overlay Content
+              </Text>
+            </View>
+          </View>
+        );
+      } else {
+        return <Image style={{margin: 5}} source={cameraIcon}/>;
+      }
+    }
+  }
+  render() {
+    const {cover, overlayType} = this.state;
+
+    return (
+      <View flex>
+        <View centerH height={250}>
+          <Image
+            source={{uri: IMAGE_URL}}
+            cover={cover}
+            overlayType={overlayType !== 'none' ? overlayType : undefined}
+            style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
+            customOverlayContent={this.renderOverlayContent()}
+          />
+        </View>
+        <View height={2} bg-grey60/>
+        <View useSafeArea flex>
+          <View padding-20 bottom flex>
+            <View flex>
+              {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')}
+              {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')}
+              {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+            </View>
+            <Text text40>Image Screen</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default ImageScreen;

demo/src/screens/componentScreens/index.js

@@ -14,6 +14,7 @@ Navigation.registerComponent('unicorn.components.DialogScreen', () => require('.
 Navigation.registerComponent('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
 Navigation.registerComponent('unicorn.components.TagsInputScreen', () => require('./TagsInputScreen').default);
 Navigation.registerComponent('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
+Navigation.registerComponent('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
 Navigation.registerComponent('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
 Navigation.registerComponent('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
 Navigation.registerComponent('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);