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
10// @ts-ignore
11if (!global.crypto) {
12  // @ts-ignore
13  global.crypto = {
14    // @ts-ignore
15    getRandomValues: array => getRandomBytes(array.byteLength),
16  };
17}
18
19type State = {
20  random: any;
21  randomAsync: any;
22  uuid: any;
23};
24
25// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
26// eslint-disable-next-line @typescript-eslint/ban-types
27export default class RandomScreen extends React.Component<{}, State> {
28  static navigationOptions = {
29    title: 'Random',
30  };
31
32  readonly state: State = {
33    random: getRandomBytes(10),
34    randomAsync: null,
35    uuid: require('uuid').v4(),
36  };
37
38  async componentDidMount() {
39    this._getRandomAsync();
40  }
41
42  _getRandomAsync = async () => {
43    const randomAsync = await getRandomBytesAsync(10);
44    this.setState({ randomAsync });
45  };
46
47  render() {
48    return (
49      <ScrollView
50        style={{ flex: 1, backgroundColor: Colors.greyBackground }}
51        contentContainerStyle={{ padding: 10 }}>
52        <HeadingText>getRandomBytes:</HeadingText>
53        <MonoText>{JSON.stringify(this.state.random)}</MonoText>
54
55        <HeadingText>getRandomBytesAsync:</HeadingText>
56        <MonoText>{JSON.stringify(this.state.randomAsync)}</MonoText>
57
58        <HeadingText>UUID:</HeadingText>
59        <MonoText>{JSON.stringify(this.state.uuid)}</MonoText>
60      </ScrollView>
61    );
62  }
63}
64