Add Examples to Image (#144)

microsoft · Jun 7, 2021 · e0d73cf · e0d73cf
1 parent 016ba3a
commit e0d73cf
Showing 1 changed file with 33 additions and 6 deletions.
diff --git 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>