react-native-gallery/src/examples/ImageExamplePage.tsx at 47b1dbe8ea298c689881167195692fd0ec9074ed · microsoft/react-native-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
'use strict';
import {Image} from 'react-native';
import * as React from 'react';
import {Example} from '../components/Example';
import {Page} from '../components/Page';
import {useTheme} from '../Navigation';
import {usePageFocusManagement} from '../hooks/usePageFocusManagement';

export const ImageExamplePage: React.FunctionComponent<{navigation?: any}> = ({navigation}) => {
  const firstImageExampleRef = usePageFocusManagement(navigation);
  const {colors} = useTheme();

  const example1jsx = `<Image
  style={{width: 50, height: 50}}
  source={{
    uri: 'https://user-images.githubusercontent.com/33470154/104789118-fa16eb80-5748-11eb-9870-68360eca6fa6.png',
  }}/>`;
  const example2jsx = `<Image
  style={{width: 75, height: 50}}
  source={{
    uri: 'https://user-images.githubusercontent.com/33470154/104789118-fa16eb80-5748-11eb-9870-68360eca6fa6.png',
  }}
  resizeMode='stretch'/>`;
  const example3jsx = `<Image
  style={{width: 300, height: 50}}
  source={require('../assets/tiny_logo.png')}
  resizeMode='repeat'/>`;
  const example4jsx = `<Image
  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
      title="Image"
      description="A component which scales and displays images."
      wrappedNativeControl={{
        control: 'Grid',
        url: 'https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid?view=winrt-19041',
      }}
      componentType="Community"
      pageCodeUrl="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/ImageExamplePage.tsx"
      documentation={[
        {
          label: 'Image',
          url: 'https://reactnative.dev/docs/image',
        },
        {
          label: 'Image Source Code',
          url: 'https://github.com/microsoft/react-native-windows/blob/main/vnext/src-win/Libraries/Image/Image.windows.js',
        },
      ]}>
      <Example ref={firstImageExampleRef} title="A simple Image from web source." code={example1jsx}>
        <Image
          style={{width: 50, height: 50}}
          source={{
            uri: 'https://user-images.githubusercontent.com/33470154/104789118-fa16eb80-5748-11eb-9870-68360eca6fa6.png',
          }}
        />
      </Example>
      <Example
        title="An Image from web source stretched to fill view."
        code={example2jsx}>
        <Image
          style={{width: 75, height: 50}}
          source={{
            uri: 'https://user-images.githubusercontent.com/33470154/104789118-fa16eb80-5748-11eb-9870-68360eca6fa6.png',
          }}
          resizeMode="stretch"
        />
      </Example>
      <Example
        title="An Image from file source repeated to fill view."
        code={example3jsx}>
        <Image
          style={{width: 300, height: 50}}
          source={require('../assets/tiny_logo.png')}
          resizeMode="repeat"
        />
      </Example>
      <Example
        title="An translucent Image from file source scaled uniformly to fill view."
        code={example4jsx}>
        <Image
          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')}
        />
      </Example>
    </Page>
  );
};