-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Button,
 Container,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import { Image, StatusBar, StyleSheet, Text } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 React.useEffect(() => {
   StatusBar.setBarStyle('dark-content');
 }, []);
 return (
   <ScreenContainer
     style={styles.screenContainerSn}
     scrollable={false}
     hasSafeArea={true}
   >
     <Container elevation={0} useThemeGutterPadding={true} />
     <Container
       style={styles.containerMf}
       elevation={0}
       useThemeGutterPadding={true}
     >
       <Image
         style={styles.imageJ5}
         source={Images.PermissionsMicrophone}
         resizeMode=""contain""
       />
       <Text
         style={StyleSheet.flatten([
           theme.typography.headline4,
           { color: theme.colors.strong },
         ])}
       >
         Enable Microphone
       </Text>
       <Text
         style={StyleSheet.flatten([
           styles.textBz,
           theme.typography.subtitle1,
           { color: theme.colors.strong },
         ])}
       >
         To add audio to your recordings, we need access to the microphone.
       </Text>
     </Container>
     <Container
       style={styles.containerEk}
       elevation={0}
       useThemeGutterPadding={true}
     >
       <Touchable style={styles.touchableI0}>
         <Text
           style={StyleSheet.flatten([
             styles.textQx,
             theme.typography.button,
             { color: theme.colors.light },
           ])}
         >
           SKIP
         </Text>
       </Touchable>
       <Button style={styles.buttonVA} type=""solid"">
         ENABLE MICROPHONE
       </Button>
     </Container>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 screenContainerSn: {
   justifyContent: 'space-between',
 },
 textQx: {
   height: 20,
   textAlign: 'center',
 },
 touchableI0: {
   marginBottom: 24,
 },
 imageJ5: {
   width: 150,
   height: 150,
   marginBottom: 16,
 },
 containerMf: {
   alignItems: 'center',
 },
 buttonVA: {
   width: '100%',
   height: 48,
 },
 containerEk: {
   marginBottom: 24,
 },
 textBz: {
   textAlign: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);