API tools faq
paste
Advertisement
maneesf

Homepage

maneesf
Oct 11th, 2022
1,015
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 41.98 KB | None | 0 0
raw download clone embed print report
  1. import React from "react";
  2. import {
  3.   ImageBackground,
  4.   SafeAreaView,
  5.   Text,
  6.   View,
  7.   Dimensions,
  8.   ScrollView,
  9.   Image,
  10.   TouchableOpacity,
  11.   StyleSheet,
  12.   FlatList,
  13.   Alert,
  14.   Modal,
  15.   // Customizable Area Start
  16.   ActivityIndicator,
  17.   TextInput
  18.   // Customizable Area End
  19. } from "react-native";
  20. // Customizable Area Start
  21. import VideoPlayer from "react-native-video-player";
  22. import Loader from "../../../components/src/Loader";
  23. import moment from "moment";
  24. import { Formik } from "formik";
  25. import * as yup from "yup";
  26. import { articlesBlog, articlesArticle, audioIcon, pause } from "./assets";
  27. import ModalWrapper from "../../../components/src/ModalWrapper";
  28. import Typography from "../../../components/src/Typography";
  29. import Input from "../../../components/src/Input";
  30. import Button from "../../../components/src/Button";
  31. import CalendarStrip from "../../../components/src/CalendarStrip";
  32. import DateTimePicker from "../../../components/src/DateTimePicker";
  33. import { BASE_URL, Colors, dimensions } from "../../../components/src/utils";
  34. import GoalModal from "../../../components/src/GoalModal";
  35. import GoalCalendarStrip from "../../../components/src/GoalCalendarStrip";
  36. // Customizable Area End
  37. //@ts-ignore
  38. import Drawer from "react-native-drawer";
  39. import * as IMG_CONST from './assets'
  40. // Customizable Area End
  41. import Scale from "../../../framework/src/Scale";
  42. const { height, width } = Dimensions.get('window');
  43. import HomePageController, { Props } from "./HomePageController";
  44. import ModalPage from "./ModalPage";
  45.  
  46. export default class HomePage extends HomePageController {
  47.  
  48.   constructor(props: Props) {
  49.     super(props);
  50.  
  51.   }
  52.   // Customizable Area Start
  53.   actionSchema = yup.object().shape({
  54.     title: yup.string().min(5, "Please enter 5 characters").required("This field is mandatory")
  55.   });
  56.  
  57.   renderDashboardFocuseAreaItems = (itm: any) => {
  58.     return (
  59.       <>
  60.         <View style={[styles.boxHeader, { backgroundColor: '#FFF5F4', borderColor: '#FFB8B0', }]} >
  61.           <View style={{ alignSelf: 'center' }}>
  62.             <View style={styles.exportText}>
  63.               <Text style={[styles.TextHeader, { color: '#000', fontSize: 14, textAlign: 'center', marginLeft: 15 }]}>Top Focus Areas</Text>
  64.             </View>
  65.             <View style={{ alignSelf: 'center', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', marginEnd: 2, flex: 1 }}>
  66.  
  67.               {itm.assesment_test_type_answers.map((opt: any) => {
  68.                 return (
  69.                   <View style={styles.exportText2}>
  70.                     <Image source={require('../assets/view_circle.png')} style={styles.exportImage} />
  71.  
  72.                     <Text style={[styles.TextPoints, { color: '#DF2A2A', flexWrap: 'wrap', flex: 1, marginRight: 10 }]} >{opt.answers}</Text>
  73.                   </View>
  74.  
  75.                 )
  76.               })}
  77.             </View>
  78.  
  79.           </View>
  80.           <TouchableOpacity style={{ justifyContent: 'flex-end', alignItems: 'center', flex: 1 }}>
  81.             <Image style={{ alignSelf: 'center', justifyContent: 'center', alignItems: 'center' }} source={require('../assets/imagenav_down.png')} />
  82.           </TouchableOpacity>
  83.         </View>
  84.  
  85.  
  86.  
  87.       </>
  88.     );
  89.   };
  90.  
  91.   renderTopStrenght = (itm: any) => {
  92.     return (
  93.       <>
  94.  
  95.         <View style={styles.boxHeader} >
  96.           <View style={{ alignSelf: 'center', }}>
  97.             <View style={styles.exportText}>
  98.               <Text style={[styles.TextHeader, { color: '#000', fontSize: 14, textAlign: 'center', marginLeft: 15 }]}>Top Strengths</Text>
  99.             </View>
  100.             <View style={{ alignSelf: 'center', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', marginEnd: 2, flex: 1 }}>
  101.  
  102.               {itm.assesment_test_type_answers.map((opt: any) => {
  103.                 return (
  104.                   <View style={styles.exportText2}>
  105.                     <Image source={require('../assets/view_circle2.png')} style={styles.exportImage} />
  106.                     <Text style={[styles.TextPoints, { flex: 1, flexWrap: 'wrap' }]}>{opt.answers}</Text>
  107.                     {/* <Text style={[styles.TextPoints,{flexWrap: 'wrap',flex:1,marginRight:10 }]} >{opt.answers}</Text> */}
  108.  
  109.                   </View>
  110.                 )
  111.               })}
  112.             </View>
  113.  
  114.  
  115.           </View>
  116.           <TouchableOpacity style={{ justifyContent: 'flex-end', alignItems: 'center', flex: 1 }}>
  117.             <Image style={{ alignSelf: 'center', justifyContent: 'center', alignItems: 'center' }} source={require('../assets/imagenav_up.png')} />
  118.           </TouchableOpacity>
  119.         </View>
  120.  
  121.       </>
  122.     )
  123.   }
  124.  
  125.  
  126.   getList(item: any) {
  127.     const { full_name, email, phone_number } = item.item.attributes.coach_details;
  128.     return (
  129.       <View style={styles.tableBox}>
  130.  
  131.         <View style={{ flexDirection: 'row', margin: 10, alignItems: 'flex-start', marginTop: 5 }}>
  132.           <Image style={{ height: 70, width: 70, }} source={require('../assets/view_picture.png')} ></Image>
  133.  
  134.           <View style={{ marginLeft: 10 }}>
  135.             <Text style={{ color: '#2F2F2F', fontSize: 15, fontStyle: 'normal', fontWeight: 'bold', margin: 5, marginTop: -1 }}> {full_name}</Text>
  136.  
  137.             <Text style={[styles.TextHeader, { color: '#6B5AED', margin: 5, marginTop: -2 }]}> {"Expert advisor"}</Text>
  138.  
  139.             <View style={{ flexDirection: 'row', marginTop: -20 }}>
  140.  
  141.  
  142.               <Image style={{ height: 20, width: 20, resizeMode: 'contain' }} source={require('../assets/clock.png')} ></Image>
  143.  
  144.               <Text style={[{ color: '#6D6D6D', margin: 5, marginTop: 2, fontSize: 12, fontWeight: 'bold' }]}>{moment(item.item.attributes.start_time, 'DD/MM/YYYY HH').format("hh:mm A ")}</Text>
  145.               <Text style={[{ color: '#6D6D6D', margin: 5, marginTop: 2, fontSize: 12, marginLeft: 0 }]}>{moment(item.item.attributes.start_time, 'DD/MM/YYYY HH').format("DD MMM YYYY")}</Text>
  146.  
  147.               <View style={{ height: Scale(35), marginTop: -10, width: Scale(95), marginLeft: 5, backgroundColor: '#FFFFFF', borderRadius: 10, borderWidth: 1, borderColor: '#3682FF', alignItems: 'center', justifyContent: 'center', alignSelf: 'center', }}>
  148.                 <TouchableOpacity>
  149.                   <Text style={{ color: '#3682FF', fontSize: 10, fontWeight: '500', alignSelf: 'center' }}>{"Connect now"}</Text>
  150.                 </TouchableOpacity>
  151.               </View>
  152.             </View>
  153.  
  154.  
  155.           </View>
  156.           <View style={{ flexDirection: 'row', marginLeft: Scale(-55), right: 10 }}>
  157.             <Image style={{ right: 5, top: 2 }} source={require('../assets/imagenav_image6.png')} />
  158.             <Text>{"4.5"}</Text>
  159.           </View>
  160.         </View>
  161.       </View>
  162.     );
  163.   }
  164.  
  165.   renderActions = () => {
  166.     if(this.state.loading){
  167.       return null;
  168.     }
  169.  
  170.     return this.state.actionData.map((item: any) => {
  171.       const completed = moment(item?.attributes?.date).isSame(moment(), "day");
  172.       return(
  173.         <View style={[styles.actionRow, completed? styles.activeActionRow: styles.inActiveActionRow]}>
  174.           <TouchableOpacity
  175.             disabled={completed}
  176.             onPress={() => this.completeAction(item.id, { date: moment().format("DD/MM/YYYY") })}
  177.             style={[styles.actionCheckbox, completed? styles.activeActionCheckbox : styles.inactiveActionCheckbox]}
  178.           />
  179.           <View>
  180.             <Typography font="MED" size={14} style={styles.actionText}>{item?.attributes?.action_item}</Typography>
  181.           </View>
  182.         </View>
  183.       );
  184.     });
  185.   }
  186.  
  187.   renderArticles = () => {
  188.     return this.state.articleData.map((item: any) => {
  189.       return (
  190.         <TouchableOpacity
  191.           key={item.id}
  192.           style={styles.article}
  193.         >
  194.           <Image
  195.             source={articlesBlog}
  196.             style={styles.articleImage}
  197.           />
  198.           <Typography>Article title</Typography>
  199.         </TouchableOpacity>
  200.       );
  201.     });
  202.   }
  203.  
  204.   renderAudio = () => {
  205.     return this.state.audioData.map((item: any) => {
  206.       return (
  207.         <View
  208.           key={item.id}
  209.           style={styles.audioWrapper}
  210.         >
  211.           <View style={styles.audio}>
  212.             <TouchableOpacity
  213.               onPress={() => {
  214.                 if(this.state.nowPlaying === item.id){
  215.                   this.pauseAudio();
  216.                 }
  217.                 this.playAudio(`${BASE_URL}${item?.attributes?.file?.[0]}`, item.id)
  218.               }}
  219.               style={styles.audioPlay}
  220.             >
  221.               <Image source={(this.state.nowPlaying === item.id)? pause: audioIcon} style={styles.audioIcon} />
  222.             </TouchableOpacity>
  223.           </View>
  224.           <Typography font="MED" align="center">Audio title</Typography>
  225.         </View>
  226.       );
  227.     });
  228.   }
  229.  
  230.   renderVideo = () => {
  231.     return this.state.videoData.map((item: any) => {
  232.       return (
  233.         <View
  234.           key={item.id}
  235.           style={styles.videoBlock}
  236.         >
  237.           {/* <ImageBackground
  238.             source={{ uri: "https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772242_1280.jpg" }}
  239.             style={styles.thumbnail}
  240.           >
  241.             <TouchableOpacity style={styles.videoPlay}>
  242.               <Image source={audioIcon} style={styles.audioIcon} />
  243.             </TouchableOpacity>
  244.           </ImageBackground> */}
  245.           <VideoPlayer
  246.             video={{ uri: `${BASE_URL}${item?.attributes?.file?.[0]}` }}
  247.             videoHeight={dimensions.wp(45)}
  248.             videoWidth={dimensions.wp(70)}
  249.             thumbnail={{ uri: "https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772242_1280.jpg" }}
  250.           />
  251.         </View>
  252.       );
  253.     });
  254.   }
  255.  
  256.   renderGaolBoardFocuseAreas(item: any) {
  257.  
  258.     return (
  259.       <>
  260.         {item.assesment_test_type_answers.map((ansOpt: any) => {
  261.           return (<View style={styles.innerContainer}>
  262.             <TouchableOpacity style={[styles.checkIpSytle, { backgroundColor: '#fff', alignItems: "center", }]} onPress={() => { this.setState({ checked: ansOpt.id }) }}>
  263.               {this.state.checked == ansOpt.id ?
  264.                 <Image style={{ height: 25, width: 25, alignSelf: 'center', marginLeft: 20 }}{...this.btnShowImageProps} /> :
  265.                 <Image style={{ height: 25, width: 25, alignSelf: 'center', marginLeft: 20 }}
  266.  
  267.                   {...this.btnHideImageProps} />}
  268.  
  269.  
  270.               <Text style={[styles.title, { color: '#4D4D4D', textAlign: 'left', fontSize: 18, marginLeft: 10, flexWrap: 'wrap', flex: 1, marginRight: 10 }]}>{ansOpt.answers}</Text>
  271.  
  272.             </TouchableOpacity>
  273.  
  274.           </View>)
  275.         })}
  276.       </>
  277.     )
  278.   }
  279.  
  280.   renderGaolBoardData(item: any, id: any) {
  281.  
  282.     return (
  283.  
  284.       <View style={{ marginBottom: 10 }}>
  285.         <TouchableOpacity style={{ marginTop: 10, alignItems: 'flex-start', backgroundColor: 'transparent', flex: 1 }}
  286.           onPress={() => {
  287.  
  288.             this.markasCompetGoalModal(item.attributes.goal, item.id)
  289.           }
  290.           }
  291.         >
  292.  
  293.           <View style={{ height: Scale(30), width: '70%', backgroundColor: '#FFFFFF', left: 10, flexDirection: 'row', alignItems: 'center', borderRadius: 10, right: 10, }}>
  294.             <Image style={{ top: 2, left: 5 }} source={require('../assets/view_circle1.png')} />
  295.             <Text style={{ flexWrap: 'wrap', textAlign: 'center', fontSize: 9, left: 10 }}>{item.attributes.goal}</Text>
  296.  
  297.           </View>
  298.         </TouchableOpacity>
  299.       </View>
  300.     )
  301.  
  302.   }
  303.   renderGoalCureentItm = () => {
  304.     return (
  305.       <View style={{ width: '75%', left: 10, top: 10 }}>
  306.         <View style={styles.container}>
  307.           <ImageBackground source={require('../assets/imagenav_image2.png')} style={{ height: Scale(180), width: '77%', borderRadius: 10, }} imageStyle={{ borderRadius: 16 }}>
  308.  
  309.             <View style={{ height: Scale(45), width: '75%', left: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  310.               <Text style={{ fontWeight: '500', fontSize: 11, lineHeight: 16.5, }}>Current Goals</Text>
  311.               <Image style={{ marginRight: 10 }} source={require('../assets/imagenav_image3.png')} />
  312.             </View>
  313.  
  314.  
  315.             <ScrollView nestedScrollEnabled={true} style={{ marginBottom: 20, }} >
  316.               {this.state.goalData.map((goal) => {
  317.                 return (
  318.  
  319.                   this.renderGaolBoardData(goal, goal.id)
  320.  
  321.                 )
  322.               })}
  323.             </ScrollView>
  324.  
  325.  
  326.           </ImageBackground>
  327.         </View>
  328.       </View>
  329.     )
  330.  
  331.   }
  332.   renderCompetedGoal = () => {
  333.     // return this.state.completedGoalData.map((item: any) => {
  334.     // console.log("render current goal",item);
  335.     return (
  336.  
  337.       <View style={{ right: 102 }}>
  338.         <ImageBackground source={require('../assets/imagenav_image.png')} style={{ height: Scale(180), width: '77%' }} imageStyle={{ borderRadius: 16 }}>
  339.           <View style={{ height: Scale(45), width: '62%', left: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  340.             <Text style={{ fontWeight: '500', fontSize: 11, lineHeight: 16.5, }}>Completed Goals</Text>
  341.             <Image style={{}} source={require('../assets/imagenav_image4.png')} />
  342.           </View>
  343.           {this.state.completedGoalData.map((item: any) => {
  344.             return (<View style={{ height: Scale(30), width: '70%', backgroundColor: '#FFFFFF', left: 10, flexDirection: 'row', alignItems: 'center', borderRadius: 10, right: 10,marginBottom: 10  }}>
  345.               <Image style={{ top: 2, left: 5 }} source={require('../assets/view_circle3.png')} />
  346.               <Text style={{ left: 10, color: '#3F3F3F', fontSize: 9, fontWeight: '500', flex: 1 }}>{item.attributes.goal}</Text>
  347.             </View>)
  348.           })}
  349.  
  350.  
  351.  
  352.         </ImageBackground>
  353.       </View>
  354.  
  355.     );
  356.     // });
  357.   }
  358.  
  359.   renderDrawer() {
  360.     return (
  361.       <SafeAreaView style={styles.containerFilter}>
  362.         <View style={styles.HomeContainer}>
  363.           <View style={styles.headerImage}>
  364.             <Image style={styles.ProfileImage} source={IMG_CONST.PROFILE_ICON} />
  365.             <View style={styles.ProfileTextHeader}>
  366.               <Text style={styles.profileFirstText}>Reaecca Caala</Text>
  367.               <Text style={styles.profileText}>US engineer</Text>
  368.             </View>
  369.           </View>
  370.           <View style={styles.line}></View>
  371.           <TouchableOpacity style={styles.accoutHeader} onPress={() => this.props.navigation.navigate("UserProfileBasicBlock")}>
  372.             <Image style={styles.account} source={IMG_CONST.ACCOUNT_ICON} />
  373.             <Text style={styles.AccountText}>Account Settings</Text>
  374.           </TouchableOpacity>
  375.           <TouchableOpacity style={styles.accoutHeader} onPress={() => this.props.navigation.navigate("PrivacyPolicy")}>
  376.             <Image style={styles.account} source={IMG_CONST.PRIVACY_ICON} />
  377.             <Text style={styles.AccountText}>Privacy Policy</Text>
  378.           </TouchableOpacity>
  379.           <TouchableOpacity style={styles.accoutHeader} onPress={() => this.props.navigation.navigate("ContactUsScreen")}>
  380.             <Image style={styles.account} source={IMG_CONST.CONTACT_US_ICON} />
  381.             <Text style={styles.AccountText}>Contact Us</Text>
  382.           </TouchableOpacity>
  383.           <TouchableOpacity style={styles.accoutHeader} onPress={() => this.logOut()}>
  384.             <Image style={styles.account} source={IMG_CONST.LOGOUT_ICON} />
  385.             <Text style={styles.AccountText}>Logout</Text>
  386.           </TouchableOpacity>
  387.         </View>
  388.  
  389.  
  390.       </SafeAreaView>
  391.     );
  392.   }
  393.  
  394.  
  395.   // Customizable Area End
  396.   // Customizable Area Start
  397.   render() {
  398.     const { navigation } = this.props;
  399.     const _this = this;
  400.     return (
  401.       <Drawer ref={(ref: any) => { this.drawer = ref; }}
  402.         type="overlay"
  403.         tapToClose={true}
  404.         openDrawerOffset={0.35}
  405.         content={this.renderDrawer()}
  406.         style={{ flex: 1 }}
  407.       >
  408.         <ScrollView nestedScrollEnabled={true}>
  409.  
  410.           <SafeAreaView style={{ flex: 1 }}>
  411.  
  412.             {this.state.loading == false && <ImageBackground
  413.               //  blurRadius={this.state.isVisible ? 4 : 0}
  414.               source={require("../assets/view_bg.png")} style={{ width: '100%', height: '53%', }}>
  415.               <View style={styles.Header}>
  416.                 <TouchableOpacity onPress={this.openDrawer.bind(this)}>
  417.                   <Image source={require('../assets/imagenav_menu.png')} />
  418.                 </TouchableOpacity>
  419.                 <View style={{ flexDirection: 'row', right: '10%' }}>
  420.                   <Text style={styles.Text1}>Welcome</Text>
  421.                   <Text style={styles.Text2}>Sam!</Text>
  422.                 </View>
  423.                 <TouchableOpacity >
  424.                   <Image source={require("../assets/view_profile_pic.png")} style={{}} />
  425.                 </TouchableOpacity>
  426.                 <Image source={require("../assets/imagenav_ring3.png")} style={{ position: 'absolute', left: '74%' }} />
  427.               </View>
  428.  
  429.               <View style={{ flexDirection: 'row', height: height / 13, width: '92%', alignSelf: 'center', justifyContent: 'space-between' }}>
  430.                 <View style={styles.boxContainer}>
  431.                   <View style={styles.box1}>
  432.                     <TouchableOpacity style={styles.btn}
  433.                     // {...this.wellBeingAssessPessProps}
  434.                     >
  435.                       <Image source={require("../assets/edit.png")} style={styles.edit} />
  436.                       <Text style={styles.editText}> Well-being Assessment</Text>
  437.  
  438.                     </TouchableOpacity>
  439.  
  440.                   </View>
  441.  
  442.  
  443.                 </View>
  444.  
  445.                 <View style={styles.box2}>
  446.                   <TouchableOpacity style={styles.btn} {...this.asessYourselfPressProps}>
  447.                     <Image source={require("../assets/task-square.png")} style={styles.taskSquare} />
  448.                     <Text style={styles.taskSquareText}> Assess Yourself</Text>
  449.                   </TouchableOpacity>
  450.  
  451.                 </View>
  452.               </View>
  453.               <View style={{ flexDirection: 'row', height: height / 13, width: '90%', alignSelf: 'center', justifyContent: 'space-between' }}>
  454.                 <View style={styles.boxContainer}>
  455.                   <View style={styles.box1}>
  456.                     <TouchableOpacity style={styles.btn}
  457.                       onPress={() => this.props.navigation.navigate('Appointments')}
  458.                     >
  459.                       <Image source={require("../assets/edit.png")} style={styles.edit} />
  460.                       <Text style={styles.editText}>Book Appointment</Text>
  461.  
  462.                     </TouchableOpacity>
  463.  
  464.                   </View>
  465.  
  466.  
  467.                 </View>
  468.  
  469.  
  470.               </View>
  471.  
  472.  
  473.               <View style={{ alignSelf: 'center', height: height / 16, width: '92%', }}>
  474.                 <Text style={{ color: '#fff', fontSize: 16, fontWeight: '500', }}> Insights</Text>
  475.               </View>
  476.               <Image source={require("../assets/imagenav_ring3.png")} style={{ position: 'absolute', top: '40%', left: '33%' }} />
  477.               <View style={styles.mainexportBox}>
  478.                 {this.state.topStrenghts.map((item) => (
  479.                   this.renderTopStrenght(item.data.attributes)
  480.                 ))}
  481.  
  482.  
  483.                 {this.state.focusAreaData.map((item) => (
  484.                   this.renderDashboardFocuseAreaItems(item.data.attributes)
  485.                 ))}
  486.               </View>
  487.               {/* Add Goal  */}
  488.               <View style={styles.actionItemContainer}>
  489.                 <View style={styles.row}>
  490.                   <View style={styles.rowItem}>
  491.                     <Text style={{ fontSize: 16, fontWeight: '500', lineHeight: 24, color: '#3F3F3F' }}>Goal Board</Text>
  492.                     <Text style={{ fontSize: 11, fontWeight: '400', lineHeight: 24, color: '#878787' }}>Tap to view the listed goals status</Text>
  493.  
  494.                     {/* <Text style={styles.Text1}>These are the action items for you</Text> */}
  495.                   </View>
  496.  
  497.                   <Button
  498.                     mode="outlined"
  499.                     onPress={this.toggleAddGoalModal}
  500.                     style={styles.actionButton}
  501.                     textColor="primary"
  502.                   >
  503.                     Add Goals +
  504.                   </Button>
  505.                 </View>
  506.               </View>
  507.               {this.state.isGoalModal && (
  508.                 <GoalModal
  509.                   visible={this.state.isGoalModal}
  510.                   onClose={this.toggleAddGoalModal}
  511.                   title={this.state.isAddGoal ? `Add your goal` : this.state.iscompeteGaol ? `When do you wish to complete it?` : `On which focus area do you want \n to add goals?`}
  512.                   font="center"
  513.                   fontsize={20}
  514.                   titlecolor="#484848"
  515.                 // marginleft={10}
  516.  
  517.                 >
  518.  
  519.                   {this.state.goalstepmodal == 0 && this.state.focusAreaData.map((item) => (
  520.                     this.renderGaolBoardFocuseAreas(item.data.attributes)
  521.                   ))}
  522.                   {this.state.isAddGoal && <>
  523.                     <View
  524.                       style={[styles.mobileInput, { marginBottom: 20 }]}
  525.                     >
  526.                       <TextInput
  527.                         testID={"txtInputFirstName"}
  528.                         style={styles.Input}
  529.                         placeholderTextColor="#7CBBFF"
  530.                         placeholder={""}
  531.                         value={this.state.goalnm}
  532.                         {...this.txtInputGoalNamePrpos} //Merge Engine::From BDS - {...this.testIDProps}
  533.                       />
  534.                     </View>
  535.                   </>}
  536.                   {this.state.iscompeteGaol && <View style={{ margin: Scale(10) }}>
  537.                     <GoalCalendarStrip onSelect={(m) => {
  538.                       if (m.isBefore(moment()) || moment(m).format("DD/MM/YYYY") === moment().format("DD/MM/YYYY")) {
  539.                         this.showAlert("Alert", "Please choose a future date.", "");
  540.                       } else {
  541.                         this.setState({ goalCompetionDate: m })
  542.                       }
  543.                     }} />
  544.                   </View>}
  545.                   {this.state.goalstepmodal < 2 && <Button {...this.btnNxtModal}
  546.  
  547.                   >
  548.                     Next
  549.                   </Button>}
  550.                   {this.state.iscompeteGaol && <Button
  551.                     {...this.btnSubmitModal}
  552.                   >
  553.                     Submit
  554.                   </Button>}
  555.                 </GoalModal>
  556.               )}
  557.  
  558.               <View style={{ backgroundColor: '#fff', height: Scale(200), flexDirection: 'row', width: '92%', alignItems: 'center', justifyContent: 'space-between', borderRadius: 10, borderColor: '#979797', alignSelf: 'center' }}>
  559.  
  560.  
  561.                 {this.renderGoalCureentItm()}
  562.  
  563.                 {this.renderCompetedGoal()}
  564.  
  565.  
  566.                 {/* <View style={{ width: '72%', right: 62 }}>
  567.      {this.renderCompetedGoal()}
  568.   </View> */}
  569.  
  570.  
  571.               </View>
  572.  
  573.               {this.state.competeGoalModal && (
  574.                 <GoalModal
  575.                   visible={this.state.competeGoalModal}
  576.                   onClose={() => this.setState({
  577.                     competeGoalModal: true
  578.                   })}
  579.                   title={`Edit your goal`}
  580.                   font="center"
  581.                   fontsize={20}
  582.                   titlecolor="#484848"
  583.                 // marginleft={10}
  584.  
  585.                 >
  586.  
  587.  
  588.  
  589.                   <View
  590.                     style={[styles.mobileInput, { marginBottom: 20 }]}
  591.                   >
  592.                     <TextInput
  593.                       testID={"txtInputFirstName"}
  594.                       style={styles.Input}
  595.                       placeholderTextColor="#7CBBFF"
  596.                       placeholder={""}
  597.                       value={this.state.editgoal}
  598.                       {...this.txtInputEditGoalNamePrpos} //Merge Engine::From BDS - {...this.testIDProps}
  599.                     />
  600.                   </View>
  601.  
  602.  
  603.                   <Button {...this.btnSaveCompeteGoalModal}
  604.  
  605.                   >
  606.                     Save
  607.                   </Button>
  608.                   <Button {...this.btnDeleteGoal}
  609.                     mode="outlined"
  610.                     textColor="bluemagenta"
  611.                   >
  612.                     Delete
  613.                   </Button>
  614.                   <Button
  615.                     {...this.btnMarkasCompeteGoal}
  616.                   >
  617.                     Mark as Complete
  618.                   </Button>
  619.                 </GoalModal>
  620.               )}
  621.               <View style={{ height: Scale(80), width: '92%', alignSelf: 'center' }}>
  622.                 <Text style={{ justifyContent: 'center', color: '#454545', fontSize: 18, fontWeight: '400', alignSelf: 'center', marginTop: Scale(25) }}>How are you feeling today?</Text>
  623.               </View>
  624.  
  625.  
  626.               <View style={{ height: Scale(290), width: '92%', alignSelf: 'center' }}>
  627.                 <View style={{ height: Scale(180), width: Scale(180), backgroundColor: '#fff', borderRadius: 180, alignSelf: 'center', justifyContent: "center", borderWidth: 4, borderColor: "#F1AB99" }}>
  628.                   <Image style={{ alignSelf: 'center', justifyContent: 'center' }} source={require('../assets/imagenav_niya.png')} />
  629.                 </View>
  630.                 <View>
  631.                   <Text style={{ justifyContent: 'center', alignSelf: 'center', fontSize: 16, fontWeight: '500', color: '#171717', top: 6 }}>Bad</Text>
  632.                   <Image style={{ tintColor: '#979797', alignSelf: 'center', justifyContent: 'center', bottom: 250 }} source={require('../assets/imagenav_slider.png')} />
  633.                 </View>
  634.               </View>
  635.  
  636.               <View style={{ height: Scale(60), width: '92%', alignSelf: 'center' }}>
  637.                 <Text style={{ justifyContent: 'center', color: '#3F3F3F', fontSize: 16, fontWeight: '500', }}>Upcoming Appointments</Text>
  638.                 <Text style={{ justifyContent: 'center', color: '#878787', fontSize: 11, fontWeight: '400', marginTop: Scale(5) }}>Tap to view the appointment details</Text>
  639.               </View>
  640.             </ImageBackground>}
  641.             {this.state.loading && <Loader loading={this.state.loading} />}
  642.  
  643.           </SafeAreaView>
  644.  
  645.           {this.state.appointmentData?.length > 0 &&
  646.             <FlatList
  647.               data={this.state.appointmentData}
  648.               renderItem={(item) => this.getList(item)}
  649.               extraData={this.state.appointmentData}
  650.               keyExtractor={(item: any) => item.id}
  651.  
  652.             />
  653.           }
  654.  
  655.           {/* Action Items - Start */}
  656.           {(!this.state.loading) && (<View style={styles.actionItemContainer}>
  657.             <View style={styles.row}>
  658.               <View style={styles.rowItem}>
  659.                 {/* <Text style={styles.titleText}>These are the action items for you</Text> */}
  660.                 <Typography color="text" size={16} font="MED">These are the action items for you</Typography>
  661.               </View>
  662.               <Button
  663.                 onPress={this.toggleActionModal}
  664.                 textColor="primary"
  665.                 mode="outlined"
  666.                 textStyle={styles.actionButtonText}
  667.                 style={styles.actionButton}
  668.               >
  669.                 Add Action Item +
  670.               </Button>
  671.             </View>
  672.           </View>)}
  673.           {this.renderActions()}
  674.           {this.state.showActionModal && (
  675.             <ModalWrapper
  676.               visible={this.state.showActionModal}
  677.               onClose={this.toggleActionModal}
  678.               title={this.state.selectActionDuration ? "When do you wish to complete?" : "Add action item"}
  679.             >
  680.               <Formik
  681.                 initialValues={{
  682.                   title: "",
  683.                   time: moment("10:00", "hh:mm"),
  684.                   date: moment()
  685.                 }}
  686.                 onSubmit={(data) => {
  687.                   if (data.date.isBefore(moment())) {
  688.                     Alert.alert("", "Please select a future date");
  689.                     return;
  690.                   }
  691.                   this.createAction({
  692.                     date: data.date.format("DD/MM/YYYY"),
  693.                     action_item: data.title,
  694.                     time_slot: data.time.format("hh:mm a")
  695.                   });
  696.                 }}
  697.                 validationSchema={this.actionSchema}
  698.               >
  699.                 {({ values, errors, touched, handleChange, handleBlur, setFieldValue, handleSubmit, validateForm }) => (
  700.                   <>
  701.                     {!this.state.selectActionDuration ? (
  702.                       <>
  703.                         <Input
  704.                           value={values.title}
  705.                           onChange={handleChange("title")}
  706.                           onBlur={handleBlur("title")}
  707.                           errorText={errors.title}
  708.                           touched={touched.title}
  709.                           mb={4}
  710.                         />
  711.                         <Button
  712.                           onPress={this.selectDuration}
  713.                           mode="outlined"
  714.                           textColor="accent"
  715.                           disabled={values.title.length < 5}
  716.                         >
  717.                           Next
  718.                         </Button>
  719.                       </>
  720.                     ) : (
  721.                       <>
  722.                         <CalendarStrip
  723.                           initDate={values.date}
  724.                           onSelect={(m) => {
  725.                             if (m.isBefore(moment())) {
  726.                               Alert.alert("", "Please select a future date");
  727.                             }
  728.                             setFieldValue("date", m);
  729.                           }}
  730.                         />
  731.                         <DateTimePicker value={values.time} mode="time" onSelect={(t) => setFieldValue("time", t)} />
  732.                         <Button onPress={handleSubmit} loading={this.state.actionLoader}>
  733.                           Submit
  734.                         </Button>
  735.                       </>
  736.                     )}
  737.                   </>
  738.                 )}
  739.               </Formik>
  740.             </ModalWrapper>
  741.           )}
  742.           {/* Action Items - End */}
  743.  
  744.           {/* Suggesrions - Start */}
  745.           <View style={styles.block}>
  746.             <View style={styles.row}>
  747.               <Typography color="text" size={16} font="MED" mb={2}>Articles</Typography>
  748.               <TouchableOpacity onPress={() => this.props.navigation.navigate("AudioLibrary", { type: "articles" })}>
  749.                 <Typography style={styles.moreLink} color="text" size={14} font="MED" mb={2}>View more</Typography>
  750.               </TouchableOpacity>
  751.             </View>
  752.           </View>
  753.           <ScrollView
  754.             horizontal
  755.             showsHorizontalScrollIndicator={false}
  756.             style={styles.horizontalScroll}
  757.           >
  758.             {this.renderArticles()}
  759.           </ScrollView>
  760.  
  761.           <View style={styles.block}>
  762.             <View style={styles.row}>
  763.               <Typography color="text" size={16} font="MED" mb={2}>Audios</Typography>
  764.               <TouchableOpacity onPress={() => this.props.navigation.navigate("AudioLibrary", { type: "audio" })}>
  765.                 <Typography style={styles.moreLink} color="text" size={14} font="MED" mb={2}>View more</Typography>
  766.               </TouchableOpacity>
  767.             </View>
  768.           </View>
  769.           <ScrollView
  770.             horizontal
  771.             showsHorizontalScrollIndicator={false}
  772.             style={styles.horizontalScroll}
  773.           >
  774.             {this.renderAudio()}
  775.           </ScrollView>
  776.  
  777.           <View style={styles.block}>
  778.             <View style={styles.row}>
  779.               <Typography color="text" size={16} font="MED" mb={2}>Care Videos</Typography>
  780.               <TouchableOpacity onPress={() => this.props.navigation.navigate("AudioLibrary", { type: "video" })}>
  781.                 <Typography style={styles.moreLink} color="text" size={14} font="MED" mb={2}>View more</Typography>
  782.               </TouchableOpacity>
  783.             </View>
  784.           </View>
  785.           <ScrollView
  786.             horizontal
  787.             showsHorizontalScrollIndicator={false}
  788.             style={styles.horizontalScroll}
  789.           >
  790.             {this.renderVideo()}
  791.           </ScrollView>
  792.           {/* Suggestions - End */}
  793.  
  794.         </ScrollView >
  795.  
  796.  
  797.  
  798.  
  799.       </Drawer >
  800.     );
  801.   }
  802. }
  803. // Customizable Area End
  804.  
  805. // Customizable Area Start
  806. const styles = StyleSheet.create({
  807.   scrollView: {
  808.     flexGrow: 1,
  809.     // height: Platform.OS === "web" ? '100vh' : 'auto',
  810.     backgroundColor: "#F5FCFF",
  811.   },
  812.   Header: {
  813.     flexDirection: 'row',
  814.     justifyContent: 'space-between',
  815.     width: '92%',
  816.     height: height / 7,
  817.     alignItems: 'center',
  818.     alignSelf: 'center'
  819.   },
  820.   Text1: {
  821.     fontSize: 20,
  822.     fontWeight: '500',
  823.     lineHeight: 30,
  824.     color: '#FFFFFF'
  825.   },
  826.   Text2: {
  827.     fontSize: 20,
  828.     fontWeight: '700',
  829.     lineHeight: 30,
  830.     color: '#FFFFFF',
  831.     left: '10%'
  832.   },
  833.   boxContainer: {
  834.     height: Scale(45),
  835.     width: '58%',
  836.     // backgroundColor: '#9D90D0',
  837.     borderRadius: 10,
  838.     bottom: 4,
  839.     alignItems: 'center',
  840.     borderWidth: 0
  841.   },
  842.   box1: {
  843.     height: Scale(32),
  844.     width: '85%',
  845.     backgroundColor: '#ffff',
  846.     borderRadius: 10,
  847.     borderColor: '#0080BE',
  848.     borderWidth: 1,
  849.     flexDirection: 'row',
  850.     justifyContent: 'flex-start',
  851.     alignItems: 'center',
  852.     position: 'absolute',
  853.  
  854.     top: 7.5,
  855.     left: 9
  856.   },
  857.   btn: {
  858.     flexDirection: 'row',
  859.     justifyContent: 'flex-start',
  860.     alignItems: 'center',
  861.     margin: 10,
  862.   },
  863.   edit: {
  864.     tintColor: '#0080BE',
  865.     height: height / 33,
  866.     width: width / 20,
  867.   },
  868.   editText: {
  869.     color: '#0080BE',
  870.     left: 7,
  871.     fontWeight: '700',
  872.     fontSize: 12,
  873.     flex: 1,
  874.     flexWrap: 'wrap'
  875.   },
  876.   box2: {
  877.     height: Scale(32),
  878.     width: '40%',
  879.     backgroundColor: '#ffff',
  880.     borderRadius: 10,
  881.     borderColor: '#0080BE',
  882.     borderWidth: 1,
  883.     flexDirection: 'row',
  884.     // justifyContent: 'center',
  885.     alignItems: 'center',
  886.     justifyContent: 'flex-start',
  887.     // top: 7.5,
  888.     right: 5,
  889.     top: 4,
  890.  
  891.  
  892.   },
  893.   taskSquare: {
  894.     tintColor: '#0080BE',
  895.     height: height / 33,
  896.     width: width / 20
  897.   },
  898.  
  899.   taskSquareText: {
  900.     color: '#0080BE',
  901.     fontWeight: '700',
  902.     fontSize: 12,
  903.     left: 5
  904.   },
  905.   mainexportBox: {
  906.     flexDirection: 'row',
  907.     justifyContent: 'space-between',
  908.     height: height / 3.5,
  909.     width: '92%',
  910.     alignSelf: 'center',
  911.  
  912.   },
  913.   boxHeader: {
  914.     height: Scale(185),
  915.     width: '46%',
  916.     backgroundColor: '#EAF9FF',
  917.     borderRadius: 12,
  918.     borderColor: '#95D5F4',
  919.     borderWidth: 3,
  920.     elevation: 5,
  921.  
  922.   },
  923.   exportText: {
  924.     flexDirection: 'row',
  925.     height: Scale(35),
  926.     top: 10
  927.   },
  928.   exportText2: {
  929.     flexDirection: 'row',
  930.     // height: Scale(25),
  931.     marginLeft: 10,
  932.     marginEnd: 1
  933.   },
  934.   TextHeader: {
  935.     fontSize: 14,
  936.     fontWeight: '500',
  937.     lineHeight: 21,
  938.     color: '#484848',
  939.     height: Scale(40)
  940.   },
  941.   TextPoints: {
  942.     fontSize: 11,
  943.     fontWeight: '500',
  944.     lineHeight: 21,
  945.     color: '#0080BE'
  946.   },
  947.   exportImage: {
  948.     top: 4,
  949.     right: 3
  950.   },
  951.   centeredView: {
  952.     flex: 1,
  953.     justifyContent: "center",
  954.     alignItems: "center",
  955.     backgroundColor: "#fff",
  956.   },
  957.   modalView: {
  958.     margin: 20,
  959.     backgroundColor: "#fff",
  960.     borderRadius: 20,
  961.     padding: 35,
  962.     alignItems: "center",
  963.     height: '40%',
  964.     borderWidth: 1,
  965.     width: '90%'
  966.  
  967.   },
  968.   buttonClose: {
  969.     backgroundColor: "#2196F3",
  970.     width: '90%',
  971.     height: 40
  972.   },
  973.   textStyle: {
  974.     color: "#fff",
  975.     fontWeight: "bold",
  976.     textAlign: "center"
  977.   },
  978.   buttonStyle: {
  979.     backgroundColor: "#2196F3",
  980.     width: '95%',
  981.     height: 40,
  982.     borderRadius: 10,
  983.     alignItems: 'center',
  984.     justifyContent: 'center',
  985.     top: 15
  986.   },
  987.   modalText: {
  988.     marginBottom: 15,
  989.     textAlign: "center",
  990.     fontSize: 18,
  991.     fontWeight: '700'
  992.   },
  993.   tableBox: {
  994.     borderWidth: 0.1,
  995.     borderRadius: 18,
  996.     borderColor: "#979797",
  997.     // padding: 15,
  998.     // marginVertical: 10,
  999.     backgroundColor: "#fff",
  1000.     margin: 10,
  1001.     padding: 10,
  1002.     elevation: 10,
  1003.     // height: Scale(90),
  1004.  
  1005.  
  1006.   },
  1007.   actionItemContainer: {
  1008.     padding: "4%"
  1009.   },
  1010.   row: {
  1011.     flexDirection: "row",
  1012.     alignItems: "center",
  1013.     justifyContent: "space-between",
  1014.     width: "100%"
  1015.   },
  1016.   rowItem: {
  1017.     width: "50%"
  1018.   },
  1019.   actionButton: {
  1020.     width: "45%",
  1021.     paddingVertical: Scale(8),
  1022.     height: dimensions.hp(5),
  1023.     marginBottom: 0
  1024.   },
  1025.   actionButtonText: {
  1026.     fontSize: Scale(14)
  1027.   },
  1028.   actionRow: {
  1029.     padding: dimensions.wp(5),
  1030.     borderWidth: 1,
  1031.     borderRadius: dimensions.wp(3),
  1032.     flexDirection: "row",
  1033.     alignItems: "center",
  1034.     marginHorizontal: dimensions.wp(4),
  1035.     elevation: 5,
  1036.     marginBottom: dimensions.hp(2)
  1037.   },
  1038.   activeActionRow: {
  1039.     backgroundColor: "#DFFEDF",
  1040.     borderColor: Colors.green
  1041.   },
  1042.   inActiveActionRow: {
  1043.     borderColor: `${Colors.red}66`,
  1044.     backgroundColor: Colors.white
  1045.   },
  1046.   actionCheckbox: {
  1047.     height: dimensions.hp(2.5),
  1048.     width: dimensions.hp(2.5),
  1049.     borderRadius: dimensions.hp(1.25),
  1050.     marginRight: dimensions.wp(4)
  1051.   },
  1052.   activeActionCheckbox: {
  1053.     backgroundColor: Colors.green
  1054.   },
  1055.   inactiveActionCheckbox: {
  1056.     backgroundColor: Colors.borderColor
  1057.   },
  1058.   actionText: {
  1059.     width: dimensions.wp(72)
  1060.   },
  1061.   moreLink: {
  1062.     borderBottomColor: Colors.text,
  1063.     borderBottomWidth: 1
  1064.   },
  1065.   block: {
  1066.     paddingHorizontal: "4%"
  1067.   },
  1068.   horizontalScroll: {
  1069.     paddingLeft: dimensions.wp(4),
  1070.     paddingRight: 0
  1071.   },
  1072.   article: {
  1073.     elevation: 4,
  1074.     marginRight: dimensions.wp(3),
  1075.     width: dimensions.wp(30),
  1076.     height: dimensions.wp(50),
  1077.     position: "relative"
  1078.   },
  1079.   articleImage: {
  1080.     position: "absolute",
  1081.     top: "-10%",
  1082.     left: "-10%",
  1083.     width: "120%",
  1084.     height: "120%",
  1085.     resizeMode: "contain"
  1086.   },
  1087.   audioWrapper: {
  1088.     marginRight: dimensions.wp(5),
  1089.     marginBottom: dimensions.hp(2)
  1090.   },
  1091.   audio: {
  1092.     width: dimensions.wp(28),
  1093.     height: dimensions.wp(28),
  1094.     borderRadius: dimensions.wp(3),
  1095.     borderWidth: 3,
  1096.     borderColor: "#c9c2f2",
  1097.     alignItems: "center",
  1098.     justifyContent: "center",
  1099.     marginBottom: dimensions.hp(1),
  1100.     backgroundColor: Colors.white
  1101.   },
  1102.   audioPlay: {
  1103.     width: dimensions.wp(12),
  1104.     height: dimensions.wp(12),
  1105.     borderRadius: dimensions.wp(6),
  1106.     alignItems: "center",
  1107.     justifyContent: "center",
  1108.     backgroundColor: Colors.accent,
  1109.     borderWidth: 3,
  1110.     borderColor: "#c6c6c6"
  1111.   },
  1112.   audioIcon: {
  1113.     width: dimensions.wp(5),
  1114.     height: dimensions.wp(5),
  1115.     resizeMode: "contain",
  1116.     tintColor: Colors.white
  1117.   },
  1118.   videoBlock: {
  1119.     width: dimensions.wp(70),
  1120.     height: dimensions.wp(45),
  1121.     borderRadius: dimensions.wp(3),
  1122.     borderWidth: 3,
  1123.     borderColor: "#c9c2f2",
  1124.     marginRight: dimensions.wp(4),
  1125.     marginBottom: dimensions.hp(1),
  1126.     overflow: "hidden"
  1127.   },
  1128.   thumbnail: {
  1129.     width: "100%",
  1130.     height: "100%",
  1131.     alignItems: "center",
  1132.     justifyContent: "center",
  1133.   },
  1134.   videoPlay: {
  1135.     width: dimensions.wp(15),
  1136.     height: dimensions.wp(15),
  1137.     borderRadius: dimensions.wp(7.5),
  1138.     alignItems: "center",
  1139.     justifyContent: "center",
  1140.     backgroundColor: "#867CCA",
  1141.     borderWidth: 3,
  1142.     borderColor: "#c6c6c6"
  1143.   },
  1144.   innerContainer: {
  1145.     justifyContent: "space-between",
  1146.     // justifyContent:'flex-end',
  1147.     alignItems: "center",
  1148.     flexDirection: "row",
  1149.  
  1150.   },
  1151.   checkIpSytle: {
  1152.     flexDirection: "row",
  1153.     backgroundColor: '#4793E0',
  1154.     //  margin:10,
  1155.     flex: 1,
  1156.     justifyContent: 'flex-end',
  1157.     alignItems: "center",
  1158.  
  1159.   },
  1160.   title: {
  1161.     fontSize: 17,
  1162.     color: '#3E3E3E',
  1163.     textAlign: 'left',
  1164.     margin: 20,
  1165.     opacity: 1,
  1166.     backgroundColor: 'transparent',
  1167.     fontStyle: 'normal',
  1168.     fontWeight: 'normal',
  1169.     borderRadius: 19,
  1170.     marginLeft: 40,
  1171.     textAlignVertical: 'top',
  1172.  
  1173.   },
  1174.   Input: {
  1175.  
  1176.     color: Colors.text,
  1177.     fontSize: Scale(17)
  1178.   },
  1179.   mobileInput: {
  1180.     flexDirection: "column",
  1181.     alignItems: "stretch",
  1182.     fontSize: 16,
  1183.     textAlign: "left",
  1184.     backgroundColor: "#00000000",
  1185.     marginTop: 20,
  1186.     borderWidth: 1,
  1187.     borderColor: "#979797", //"#767676",
  1188.     borderRadius: 2,
  1189.     includeFontPadding: true,
  1190.     margin: 10
  1191.   },
  1192.   // drawer styling
  1193.  
  1194.   containerFilter: {
  1195.     flex: 1,
  1196.     backgroundColor: "#ffffff",
  1197.   },
  1198.   HomeContainer: {
  1199.     flex: 1,
  1200.     padding: 20,
  1201.     backgroundColor: "#ffffff",
  1202.   },
  1203.   headerImage: {
  1204.     flexDirection: "row",
  1205.     alignItems: "center"
  1206.   },
  1207.   ProfileImage: {
  1208.     width: Scale(80),
  1209.     height: Scale(80),
  1210.     borderRadius: Scale(40),
  1211.     resizeMode: "cover",
  1212.     borderColor: "#c2b2d8"
  1213.   },
  1214.   profileText: {
  1215.     fontSize: Scale(15),
  1216.     color: "#000",
  1217.     marginTop: Scale(10)
  1218.   },
  1219.   AccountText: {
  1220.     fontSize: Scale(15),
  1221.     color: "#000",
  1222.     marginLeft: Scale(20),
  1223.   },
  1224.   profileFirstText: {
  1225.     color: "gray",
  1226.     fontSize: Scale(15)
  1227.   },
  1228.   ProfileTextHeader: {
  1229.     marginLeft: Scale(20)
  1230.   },
  1231.   line: {
  1232.     width: Scale(210),
  1233.     height: Scale(1),
  1234.     borderWidth: Scale(0.3),
  1235.     borderColor: "#DDD",
  1236.     marginTop: Scale(30),
  1237.     alignSelf: "center"
  1238.   },
  1239.   account: {
  1240.     width: Scale(20),
  1241.     height: Scale(20),
  1242.     resizeMode: "contain",
  1243.     tintColor: "#8c69c6"
  1244.   },
  1245.   accoutHeader: {
  1246.     flexDirection: "row",
  1247.     alignItems: "center",
  1248.     marginTop: Scale(20)
  1249.   },
  1250.   scrollViewstyle: {
  1251.     marginTop: 20,
  1252.     width: 120 * 2,
  1253.     height: 120,
  1254.   },
  1255.   contentContainer: {
  1256.     justifyContent: 'center',
  1257.     alignItems: 'center',
  1258.     // backgroundColor: 'lightgrey',
  1259.     paddingBottom: 50
  1260.   },
  1261.   container: {
  1262.     flex: 1,
  1263.  
  1264.     // justifyContent: 'center',
  1265.     // alignItems: 'center',
  1266.     // backgroundColor: '#F5FCFF',
  1267.   },
  1268.  
  1269.   SquareShapeView: {
  1270.  
  1271.     width: 120 * 2,
  1272.     height: 120,
  1273.     backgroundColor: '#00BCD4'
  1274.  
  1275.   },
  1276.   paragraph: {
  1277.     margin: 24,
  1278.     fontSize: 18,
  1279.     fontWeight: 'bold',
  1280.     textAlign: 'center',
  1281.   },
  1282. });
  1283. // Customizable Area End
  1284.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!