Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Calendar Permissions

Permissions

Request access to device calendars.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { Image, StatusBar, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 React.useEffect(() => {
   StatusBar.setBarStyle('dark-content');
 }, []);
 return (
   <ScreenContainer
     style={styles.screenContainerJa}
     scrollable={false}
     hasSafeArea={true}
   >
     <View accessible={true} hitSlop={{}} pointerEvents=""auto"" />
     <View
       style={styles.view0F}
       accessible={true}
       hitSlop={{}}
       pointerEvents=""auto""
     >
       <Image
         style={styles.imageLT}
         resizeMode=""contain""
         source={Images.PermissionsCalendar}
       />
       <Text
         style={theme.typography.headline4}
         textBreakStrategy=""highQuality""
         accessible={true}
         ellipsizeMode=""tail""
         allowFontScaling={true}
       >
         Enable Calendar
       </Text>
       <Text
         style={theme.typography.subtitle1}
         textBreakStrategy=""highQuality""
         accessible={true}
         ellipsizeMode=""tail""
         allowFontScaling={true}
       >
         Let us help you keep everything in sync.
       </Text>
     </View>
     <View
       style={styles.viewGJ}
       accessible={true}
       hitSlop={{}}
       pointerEvents=""auto""
     >
       <Touchable style={styles.touchableTs}>
         <Text
           style={StyleSheet.flatten([
             styles.textOd,
             theme.typography.button,
             { color: theme.colors.light },
           ])}
           textBreakStrategy=""highQuality""
           accessible={true}
           ellipsizeMode=""tail""
           allowFontScaling={true}
         >
           SKIP
         </Text>
       </Touchable>
       <Button style={styles.buttonGH} type=""solid"">
         ENABLE CALENDAR
       </Button>
     </View>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 textOd: {
   textAlign: 'center',
   textTransform: 'uppercase',
 },
 screenContainerJa: {
   justifyContent: 'space-between',
 },
 touchableTs: {
   marginBottom: 24,
 },
 imageLT: {
   height: 150,
   width: 150,
   marginBottom: 16,
 },
 view0F: {
   alignItems: 'center',
 },
 buttonGH: {
   height: 48,
   width: '100%',
 },
 viewGJ: {
   marginLeft: 16,
   marginRight: 16,
   marginBottom: 32,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.