/
App.tsx
63 lines (60 loc) · 1.96 KB
/
App.tsx
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
import { GreetingController } from 'vovk-client';
import { useState } from 'react';
import { StyleSheet, Text, View, Button, Platform, Pressable } from 'react-native';
import type { VovkReturnType, VovkYieldType } from 'vovk';
if(Platform.OS !== 'web') {
import('react-native-polyfill-globals/auto');
import('@azure/core-asynciterator-polyfill');
}
export default function App() {
const [greetingResponse, setGreetingResponse] = useState<VovkReturnType<typeof GreetingController.getGreeting>>();
const [streamTokens, setStreamTokens] = useState<VovkYieldType<typeof GreetingController.streamGreeting>[]>([])
return (
<View style={styles.container}>
<View>
<Pressable
style={styles.pressable}
onPress={async () => {
setGreetingResponse(await GreetingController.getGreeting());
}}
>
<Text>Get Greeting</Text>
</Pressable>
<Text style={styles.text}>{greetingResponse?.greeting}</Text>
</View>
<View style={styles.streamView}>
<Pressable
style={styles.pressable}
onPress={async () => {
setStreamTokens([]);
for await (const token of await GreetingController.streamGreeting({
// https://www.npmjs.com/package/react-native-fetch-api
reactNative: { textStreaming: true }
})) {
setStreamTokens(prev => [...prev, token]);
}
}}
>
<Text>Get Streamed Greeting</Text>
</Pressable>
<Text style={styles.text}>{streamTokens.map((token, i) => token.message).join('')}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
streamView: { marginTop: 20 },
text: { textAlign: 'center' },
pressable: {
padding: 10,
backgroundColor: 'lightblue',
margin: 10,
borderRadius: 6
}
});