1import { getRandomBytes, getRandomBytesAsync } from 'expo-random';
2import React from 'react';
3import { ScrollView } from 'react-native';
4
5import HeadingText from '../components/HeadingText';
6import MonoText from '../components/MonoText';
7import Colors from '../constants/Colors';
8
9// Placeholder polyfill
10if (!globalThis.crypto) {
11  globalThis.crypto = {
12    // @ts-ignore
13    getRandomValues: (array) => getRandomBytes(array.byteLength),
14  };
15}
16
17type State = {
18  random: any;
19  randomAsync: any;
20  uuid: any;
21};
22
23export default class RandomScreen extends React.Component<object, State> {
24  static navigationOptions = {
25    title: 'Random',
26  };
27
28  readonly state: State = {
29    random: getRandomBytes(10),
30    randomAsync: null,
31    uuid: require('uuid').v4(),
32  };
33
34  async componentDidMount() {
35    this._getRandomAsync();
36  }
37
38  _getRandomAsync = async () => {
39    const randomAsync = await getRandomBytesAsync(10);
40    this.setState({ randomAsync });
41  };
42
43  render() {
44    return (
45      <ScrollView
46        style={{ flex: 1, backgroundColor: Colors.greyBackground }}
47        contentContainerStyle={{ padding: 10 }}>
48        <HeadingText>getRandomBytes:</HeadingText>
49        <MonoText>{JSON.stringify(this.state.random)}</MonoText>
50
51        <HeadingText>getRandomBytesAsync:</HeadingText>
52        <MonoText>{JSON.stringify(this.state.randomAsync)}</MonoText>
53
54        <HeadingText>UUID:</HeadingText>
55        <MonoText>{JSON.stringify(this.state.uuid)}</MonoText>
56      </ScrollView>
57    );
58  }
59}
60