From e0d73cff42e914019813b47d32ca5b4e73f81db8 Mon Sep 17 00:00:00 2001
From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com>
Date: Mon, 7 Jun 2021 08:57:00 -0700
Subject: [PATCH] Add Examples to Image (#144)

---
 src/examples/ImageExamplePage.tsx | 39 ++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/examples/ImageExamplePage.tsx b/src/examples/ImageExamplePage.tsx
index 4571c94d..b6490d59 100644
--- a/src/examples/ImageExamplePage.tsx
+++ b/src/examples/ImageExamplePage.tsx
@@ -3,8 +3,11 @@ import {Image} from 'react-native';
 import React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
+import {useTheme} from '@react-navigation/native';
 
 export const ImageExamplePage: React.FunctionComponent<{}> = () => {
+  const {colors} = useTheme();
+
   const example1jsx = `<Image
   style={{width: 50, height: 50}}
   source={{
@@ -21,9 +24,20 @@ export const ImageExamplePage: React.FunctionComponent<{}> = () => {
   source={require('../assets/tiny_logo.png')}
   resizeMode='repeat'/>`;
   const example4jsx = `<Image
-  style={{width: 75, height: 50}}
+  style={{width: 75, height: 50, opacity: 0.5}}
   source={require('../assets/tiny_logo.png')}
   resizeMode='cover'/>`;
+  const example5jsx = `<Image
+  style={{
+    width: 75,
+    height: 50,
+    borderBottomRightRadius: 20,
+    borderTopLeftRadius: 20,
+    borderColor: colors.primary,
+    borderWidth: 3,
+  }}
+  source={require('../assets/tiny_logo.png')}
+/>`;
 
   return (
     <Page
@@ -64,7 +78,7 @@ export const ImageExamplePage: React.FunctionComponent<{}> = () => {
             uri:
               'https://user-images.githubusercontent.com/33470154/104789118-fa16eb80-5748-11eb-9870-68360eca6fa6.png',
           }}
-          resizeMode='stretch'
+          resizeMode="stretch"
         />
       </Example>
       <Example
@@ -73,16 +87,29 @@ export const ImageExamplePage: React.FunctionComponent<{}> = () => {
         <Image
           style={{width: 300, height: 50}}
           source={require('../assets/tiny_logo.png')}
-          resizeMode='repeat'
+          resizeMode="repeat"
         />
       </Example>
       <Example
-        title="An Image from file source scaled uniformly to fill view."
+        title="An translucent Image from file source scaled uniformly to fill view."
         code={example4jsx}>
         <Image
-          style={{width: 75, height: 50}}
+          style={{width: 75, height: 50, opacity: 0.5}}
+          source={require('../assets/tiny_logo.png')}
+          resizeMode="cover"
+        />
+      </Example>
+      <Example title="An Image with border styling." code={example5jsx}>
+        <Image
+          style={{
+            width: 75,
+            height: 50,
+            borderBottomRightRadius: 20,
+            borderTopLeftRadius: 20,
+            borderColor: colors.primary,
+            borderWidth: 3,
+          }}
           source={require('../assets/tiny_logo.png')}
-          resizeMode='cover'
         />
       </Example>
     </Page>