react-native-gallery/src/examples/WinRTExamplePage.tsx at 6fdb3b42b42a05a75c86d215f46e085b053fb652 · 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
117
118
119
120
121
'use strict';
import React, {useState} from 'react';
import {Example} from '../components/Example';
import {Page} from '../components/Page';
import {
  Image,
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Platform,
  PlatformColor,
  Pressable,
  Linking,
} from 'react-native';

import {useTheme} from '@react-navigation/native';

import {showNotification} from '../components/Notifications';

export const WinRTExamplePage: React.FunctionComponent<{}> = () => {
  const {colors} = useTheme();
  const example1jsx = `
  <View
    style={{
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
    }}>
    <Pressable
      style={{
        width: 200,
        height: 50,
        borderRadius: 2,
        backgroundColor:
          Platform.OS === 'windows'
            ? PlatformColor('SystemColorButtonFaceColor')
            : 'silver',
      }}
      onPress={() => {
        showNotification({
          template:
            Windows.UI.Notifications.ToastTemplateType
              .toastImageAndText01,
          // The template schema can be found at https://docs.microsoft.com/previous-versions/windows/apps/hh761494(v=win.10)
          text: 'hello world',
          image: {
            src: 'https://microsoft.github.io/react-native-windows/img/header_logo.svg',
            alt: 'React logo',
          },
        });
      }}>
      <Text
        style={{
          textAlign: 'center',
          paddingVertical: 15,
          color: colors.text,
        }}>
        Press Me
      </Text>
    </Pressable>
  </View>`;

  return (
    <Page
      title="WinRT"
      description="A React Native Windows module that allows use of native (non-XAML) WinRT APIs"
      componentType="Community"
      pageCodeUrl="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/WinRTExamplePage.tsx"
      documentation={[
        {
          label: 'WinRT Source Code',
          url: 'https://github.com/asklar/react-native-winrt',
        },
      ]}>
      <Example title="A Windows Notification example" code={example1jsx}>
        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'center',
          }}>
          <Pressable
            style={{
              width: 200,
              height: 50,
              borderRadius: 2,
              backgroundColor:
                Platform.OS === 'windows'
                  ? PlatformColor('SystemColorButtonFaceColor')
                  : 'silver',
            }}
            onPress={() => {
              showNotification({
                template:
                  Windows.UI.Notifications.ToastTemplateType
                    .toastImageAndText01,
                // The template schema can be found at https://docs.microsoft.com/previous-versions/windows/apps/hh761494(v=win.10)
                text: 'hello world',
                image: {
                  src: 'https://microsoft.github.io/react-native-windows/img/header_logo.svg',
                  alt: 'React logo',
                },
              });
            }}>
            <Text
              style={{
                textAlign: 'center',
                paddingVertical: 15,
                color: colors.text,
              }}>
              Press Me
            </Text>
          </Pressable>
        </View>
      </Example>
    </Page>
  );
};