-- 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);