1import { Code } from '@expo/html-elements';
2import React, { PropsWithChildren } from 'react';
3import { StyleSheet, View, ViewStyle, TextStyle } from 'react-native';
4
5type Props = PropsWithChildren<{
6  containerStyle?: ViewStyle;
7  textStyle?: TextStyle;
8}>;
9
10const MonoText = ({ children, containerStyle, textStyle }: Props) => (
11  <View style={[styles.container, containerStyle]}>
12    <Code style={[styles.monoText, textStyle]}>{children}</Code>
13  </View>
14);
15
16const styles = StyleSheet.create({
17  container: {
18    backgroundColor: '#fff',
19    padding: 6,
20    marginVertical: 8,
21    borderWidth: 1,
22    borderColor: '#666',
23  },
24  monoText: {
25    fontSize: 10,
26  },
27});
28
29export default MonoText;
30