1import React from 'react';
2import { ScrollView, StyleSheet, View } from 'react-native';
3
4import HeadingText from '../components/HeadingText';
5import MonoText from '../components/MonoText';
6
7// Custom JSON replacer that can stringify functions.
8const customJsonReplacer = (_: string, value: any) => {
9  return typeof value === 'function' ? value.toString().replace(/\s+/g, ' ') : value;
10};
11
12export default class ExpoModulesScreen extends React.PureComponent<any, any> {
13  render() {
14    const modules = { ...globalThis.expo?.modules };
15    const moduleNames = Object.keys(modules);
16
17    return (
18      <ScrollView style={styles.scrollView}>
19        <HeadingText>Host object is installed</HeadingText>
20        <MonoText>{`'ExpoModules' in global => ${'ExpoModules' in globalThis}`}</MonoText>
21
22        <HeadingText>Available Expo modules</HeadingText>
23        <MonoText>
24          {`Object.keys(global.expo.modules) => [\n  ${moduleNames.join(',\n  ')}\n]`}
25        </MonoText>
26
27        {moduleNames.map((moduleName) => {
28          return (
29            <View key={moduleName}>
30              <HeadingText>Module: {moduleName}</HeadingText>
31              <MonoText>{JSON.stringify(modules[moduleName], customJsonReplacer, 2)}</MonoText>
32            </View>
33          );
34        })}
35      </ScrollView>
36    );
37  }
38}
39
40const styles = StyleSheet.create({
41  scrollView: {
42    paddingHorizontal: 10,
43  },
44});
45