react-native-paper#Title JavaScript Examples

function JobDetail(props) {

    const { id, title, snippet, author, body, post_date } = props.route.params.data;
    const { width } = useWindowDimensions();
    var date = new Date(`${post_date}`)

    const source = {
        html: `
      ${body}`
    };
    const tagsStyles = {
        body: {
            marginLeft: 20,
            marginRight: 20,
        },

    };

    return (
        <View>
            <ScrollView style={styles.Top}>
                <View style={styles.headerStyle}>
                    <Title style={{ fontSize: 31, marginLeft: 10, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}>  -  ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
                </View>
                <View>
                    <RenderHtml
                        tagsStyles={tagsStyles}
                        contentWidth={width}
                        source={source}
                    />
                </View>

            </ScrollView>
        </View >

    )
}

Payout = ({
  theme,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <ScrollView style={styling.root}>
      <Title style={styling.title}>{t('Starting March of 2019')}</Title>
      <Subheading style={styling.title}>{t('Current Payout Per ?View')}.</Subheading>

      <View style={styling.amount}>
        <Title>{t('{{amount}}', '$0.11')}</Title>
      </View>
      
      <Paragraph style={styling.paragraph}>{t('We feel there are many influencers on Social Media getting paid to promote products that they don’t actually use or care about in real life')}. {t('On REAL, you’ll get paid to be yourself')}.</Paragraph>
      <Paragraph style={styling.paragraph}>{t('For every view you get from another diamond member, you’ll be paid the current payout per view rate (above)')}. {t('We explain how it’s calculated below')}.</Paragraph>
      <Paragraph style={styling.paragraph}>{t('Tips to earning big on REAL')}:</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('You can restrict your account to only allow followers who have a diamond membership to ensure you’re getting paid for every view')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('You can add an additional “Charge Users Monthly” fee, which requires followers to pay you each month')}.</Paragraph>

      <Title style={styling.title}>{t('Is Calculated')}:</Title>
      <Paragraph style={styling.paragraph}>{t('How “Current Payout Per ?View” Is Calculated')}.</Paragraph>
      <Paragraph style={styling.paragraph}>{t('This rate changes slightly throughout the day and is calculated in real time by our platform learning from the previous day’s views and revenues')}.</Paragraph>

      <View style={styling.formula}>
        <Formula />
      </View>

      <Caption style={styling.paragraph}>* <Caption style={styling.bold}>{t('Total Revenue')}</Caption>: {t('The amount of money {{comapny}} earned over the past 30 days from all global REAL subscribers', { company: '“REAL.app, Inc.“' })}.</Caption>
      <Caption style={styling.paragraph}>* <Caption style={styling.bold}>{t('Processing Fees')}</Caption>: {t('Fees taken by our providers to operate our business')} (e.g Apple Pay, AWS)</Caption>
      <Caption style={styling.paragraph}>* <Caption style={styling.bold}>{t('Total ?Views')}</Caption>: {t('Total views over the past 30 days of diamond member posts by other REAL diamond members')}.</Caption>
    </ScrollView>
  )
}

Notifications = ({
  theme,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <Title style={styling.title}>{t('Notifications Coming Soon')}</Title>
      <Paragraph style={styling.paragraph}>{t('REAL is fully Open Source & built by the people')}. {t('Help us move faster by contributing code')}.</Paragraph>
    </View>
  )
}

Forms = ({
  puenteForms, navigateToNewRecord, surveyee, setView
}) => (
  <View style={styles.container}>
    <Title style={styles.title}>{I18n.t('findResident.residentPage.forms.completedForms')}</Title>
    <Text style={styles.category}>{I18n.t('findResident.residentPage.forms.formCategory')}</Text>
    <View
      style={styles.horizontalLine}
    />
    <ComingSoonSVG width={200} height={200} />
    <Text>{I18n.t('findResident.residentPage.forms.comingSoon')}</Text>
    <Title style={styles.title}>{I18n.t('findResident.residentPage.forms.suggestedForms')}</Title>
    <SmallCardsCarousel
      puenteForms={puenteForms}
      navigateToNewRecord={navigateToNewRecord}
      surveyee={surveyee}
      setView={setView}
      setUser
    />
  </View>
)

SelectedAsset = ({ selectedMarker, switchAssetPage }) => (
  <TouchableWithoutFeedback
    onPress={switchAssetPage ? () => switchAssetPage('assetSupplementary', selectedMarker) : (e) => e}
    style={layout.resCardContainer}
  >
    <View
      style={layout.resCardNameContainer}
    >
      <Title style={layout.resCardName}>{selectedMarker.name || selectedMarker.Name}</Title>
    </View>

    <View style={layout.resCardCityLicenseContainer}>
      <View style={layout.resCardLicenseContainer}>
        <Text style={layout.resCardFont}>{I18n.t('findResident.residentCard.community')}</Text>
        <Text style={layout.resCardLicense}>{selectedMarker.communityName}</Text>
      </View>
      {selectedMarker.relatedPeople && selectedMarker.relatedPeople.map((person) => (
        <View key={`${person.lastName}_${person.firstName}`} style={layout.resCardLicenseContainer}>
          <Text style={layout.resCardFont}>Related People</Text>
          <Text style={layout.resCardFont}>
            {person.firstName}
            ,
            {' '}
            {person.lastName}
            {' '}
          </Text>
        </View>
      ))}
    </View>
  </TouchableWithoutFeedback>
)

Dating = ({
  theme,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <Title style={styling.title}>{t('REAL Dating Coming Soon')}</Title>
      <Paragraph style={styling.paragraph}>{t('REAL is fully Open Source & built by the people')}. {t('Help us move faster by contributing code')}.</Paragraph>
    </View>
  )
}

/**
 * @param props
 * @returns {*}
 * @constructor
 */
function ShadowHeadline(props) {
  return (
    <Title {...props} style={[props.style, styles.shadow]}>
      {props.children}
    </Title>
  );
}

Chat = ({
  theme,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <Title style={styling.title}>{t('REAL Chat Coming Soon')}</Title>
      <Paragraph style={styling.paragraph}>{t('REAL is fully Open Source & built by the people')}. {t('Help us move faster by contributing code')}.</Paragraph>
    </View>
  )
}

SubHeading = () => {
  const { colors } = useTheme();
  return (
    <View style={{ marginHorizontal: 20 }}>
      <Title
        theme={{ colors: { text: colors.primary } }}
        style={{ textAlign: 'center' }}
      >
        {i18n.t('Astrology guides')}
      </Title>
      <View style={{ height: 10 }} />
      <Text style={{ textAlign: 'center' }}>{i18n.t('Learn paragraph')}</Text>
    </View>
  );
}

export default function MyAppointments() {
  const appointments = useSelector(
    state => state.appointmentReducer.appointments,
  );

  const localData = [...appointments];
  // Sort data by datetime
  localData.sort((a, b) => {
    return moment(a.date).unix() - moment(b.date).unix();
  });

  // Reduce data for SectionList
  const groupedData = localData.reduce(
    (
      accumulator,
      currentValue,
      currentIndex,
      array,
      key = currentValue.date,
    ) => {
      const keyObjectPosition = accumulator.findIndex(item => item.key == key);
      if (keyObjectPosition >= 0) {
        accumulator[keyObjectPosition].data.push(currentValue);
        return accumulator;
      } else {
        return accumulator.concat({ data: [currentValue], key: key });
      }
    },
    [],
  );

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        style={styles.list}
        sections={groupedData}
        renderItem={({ item }) => <Item item={item} />}
        renderSectionHeader={({ section: { key } }) => <Title>{key}</Title>}
        ListHeaderComponent={() => (
          <Headline style={styles.headline}>My Appointments</Headline>
        )}
        stickySectionHeadersEnabled={false}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

NavigationHeader = ({
  theme,
  title,
  onNavLeftPress,
  rightLabel,
  onNavRightPress,
  onClosePress,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      {onNavLeftPress ?
        <TouchableOpacity style={styling.leftNav} onPress={onNavLeftPress}>
          <BackIcon fill={theme.colors.primaryIcon} />
        </TouchableOpacity>
      : <View style={styling.leftNav} />}

      <View style={styling.title}>
        <Title>{title}</Title>
      </View>
      
      {onClosePress ?
        <TouchableOpacity style={styling.rightNav} onPress={onClosePress}>
          <CloseIcon fill={theme.colors.primaryIcon} />
        </TouchableOpacity>
      : null}

      {onNavRightPress ?
        <TouchableOpacity style={styling.rightNav} onPress={onNavRightPress}>
          <Text>{rightLabel}</Text>
        </TouchableOpacity>
      : null}

      {!onClosePress && !onNavRightPress ?
        <View style={styling.rightNav} />
      : null}
    </View>
  )
}

Modal = ({
  theme,
  navigation,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  
  const cancelAction = props.cancelAction || navigation.getParam('cancelAction')
  const cancelLabel = props.cancelLabel || navigation.getParam('cancelLabel')
  const confirmLabel = props.confirmLabel || navigation.getParam('confirmLabel')
  const confirmAction = props.confirmAction || navigation.getParam('confirmAction')
  const title = props.title || navigation.getParam('title')
  const text = props.text || navigation.getParam('text')

  return (
    <View style={styling.root}>
      <View style={styling.modal}>
        <View style={styling.text}>
          <Title>{title}</Title>
        </View>

        <View style={styling.text}>
          <Text>{text}</Text>
        </View>

        <View style={styling.action}>
          <Button mode="contained" onPress={confirmAction}>
            {confirmLabel}
          </Button>
        </View>

        <View style={styling.action}>
          <Button mode="text" onPress={cancelAction}>
            {cancelLabel}
          </Button>
        </View>
      </View>
    </View>
  )
}

HomeScreen = () => {
  const [tasks, setTasks] = useState(null);
  // const { navigation } = props;

  const showTasks = async () => {
    await getTasksAsync().then((result) => {
      setTasks(result);
    });
  };

  return (
    <View style={layout.screenContainer}>
      <Header />
      <ScrollView>
        <View style={layout.screenRow}>
          <Title>{I18n.t('home.myTasks')}</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />
              <Paragraph>{I18n.t('home.comingSoon')}</Paragraph>
              <Button onPress={showTasks} mode="contained">
                <Text>{I18n.t('home.tasks')}</Text>
              </Button>
              {tasks != null
                && tasks.map((task) => (
                  <View key={task.task_id}>
                    <Text>{task.name}</Text>
                  </View>
                ))}
            </Card.Content>
          </Card>
        </View>
        {/* <View style={layout.screenRow}>
          <Text>My Pinned Forms</Text>
        </View> */}
        {/* <View style={layout.screenRow}>
          <Title>My Community Board</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />

              <Paragraph>Coming Soon</Paragraph>
            </Card.Content>
          </Card>
        </View> */}
      </ScrollView>
    </View>
  );
}

GdprCompliance = ({
  setConsent
}) => {
  const [visible, setVisible] = React.useState(false);
  const [checked, setChecked] = React.useState(false);
  const continueToForm = () => {
    if (checked) {
      setConsent(true);
    } else {
      alert(I18n.t('gdpr.mustConsent')); // eslint-disable-line
    }
  };
  return (
    <View>
      <Title style={{ marginLeft: 15 }}>{I18n.t('gdpr.consentForm')}</Title>
      <View style={styles.container}>
        <Text style={{ flex: 2, padding: 10 }}>
          {I18n.t('gdpr.policy')}
        </Text>
        <Button
          style={styles.policyButton}
          mode="outlined"
          onPress={() => setVisible(true)}
        >
          {I18n.t('gdpr.viewFullPolicy')}
        </Button>
      </View>
      <TermsModal
        visible={visible}
        setVisible={setVisible}
      />
      <View style={styles.checkboxContainer}>
        <View style={styles.checkbox}>
          <Checkbox
            disabled={false}
            // theme={theme}
            color={theme.colors.primary}
            status={checked ? 'checked' : 'unchecked'}
            onPress={() => {
              setChecked(!checked);
            }}
          />
        </View>
        <Text style={styles.checkboxText}>{I18n.t('gdpr.communityMemAgrees')}</Text>
      </View>

      <Button style={{ margin: 15 }} mode="contained" onPress={() => continueToForm()}>{I18n.t('gdpr.continueToForm')}</Button>
    </View>
  );
}

ResidentCard = ({
  resident, onSelectPerson
}) => {
  const {
    fname, lname, nickname, city, picture, communityname, objectId
  } = resident;
  const [pictureUrl, setPictureUrl] = useState();
  useEffect(() => {
    const pic = picture;
    if (pic) {
      setPictureUrl({ uri: pic.url });
    }
  }, []);

  return (
    <View>
      <TouchableOpacity
        style={layout.resCardContainer}
        onPress={() => {
          if (onSelectPerson) onSelectPerson(resident);
        }}
      >
        <View style={layout.resCardNameContainer}>
          <Title style={layout.resCardName}>{`${fname} ${lname}`}</Title>
          {objectId.includes('PatientID-') && (
            <View style={layout.resCardRedCircle} />
          )}
        </View>
        <Text style={layout.resCardNickname}>{`"${nickname}"`}</Text>
        <Image
          style={layout.resCardProfPic}
          source={pictureUrl}
        />
        <View style={layout.resCardCityLicenseContainer}>
          <View style={layout.resCardCityContainer}>
            <Text style={layout.resCardFont}>{I18n.t('findResident.residentCard.city')}</Text>
            <Text style={layout.resCardFont}>{city}</Text>
          </View>
          <View style={layout.resCardLicenseContainer}>
            <Text style={layout.resCardFont}>{I18n.t('findResident.residentCard.community')}</Text>
            <Text style={layout.resCardLicense}>{communityname}</Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
}

function JobDetail(props) {

    const { id, title, snippet, author, Company_image, Job_Description, apply_link, job_type, post_date } = props.route.params.data;
    const { width } = useWindowDimensions();
    var date = new Date(`${post_date}`)

    const source = {
        html: `
      ${Job_Description}`
    };
    const tagsStyles = {
        body: {
            marginLeft: 20,
            marginRight: 20,
        },

    };

    return (
        <View>
            <ScrollView style={styles.Top}>
                <View style={styles.headerStyle}>
                    <Title style={{ fontSize: 31, marginLeft: 20, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}>   -   ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>

                </View>


                <View>
                    <Image
                        source={{ uri: `${Company_image}` }}
                        style={{ width: 300, height: 230, marginLeft: 30, }}
                    />
                </View>
                <View>
                    <RenderHtml
                        tagsStyles={tagsStyles}
                        contentWidth={width}
                        source={source}
                    />
                </View>
                <View style={[{ width: "90%", marginTop: 5, marginBottom: 25, borderRadius: 10, alignItems: 'center' }]}>
                    <Button
                        title="Apply"
                        color="#002223"
                        style={[{ borderRadius: 100, }]}
                        onPress={() => Linking.openURL(apply_link)}
                    />
                </View>

            </ScrollView>
        </View >

    )
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function ProfileScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { name, sign, birthDate, number, relationship, sex } = session;
  const { colors } = useTheme();
  const { setRate } = useRate();
  const { setStartShare } = useShare(
    i18n.t(
      'Try Astrale, the most precise horoscopes app in this existential plain'
    ),
    'https://play.google.com/store/apps/details?id=josep.astrale'
  );
  const isDark = useIsDark();
  const isAndroid = PlatformUtils.isAndroid;
  const _handleDarkThemeChange = () => {
    dispatch({
      type: 'switchTheme',
      theme: isDark ? 'light' : 'dark',
    });
  };
  const _handleLogOut = async () => {
    await Storer.delete(SESSION_KEY);
    dispatch({ type: 'setLogOut' });
  };
  const _handleRatePress = async () => setRate(true);
  const _handleSharePress = async () => setStartShare(true);

  return (
    <BlurView
      style={[StyleSheet.absoluteFill]}
      tint={isDark ? 'dark' : 'light'}
      intensity={isAndroid ? 150 : 100}
    >
      <Backgrounds.Telescope color={colors.text} style={styles.telescope} />
      <Close position="right" />
      <View style={styles.headerContainer}>
        <Avatar.Text label={name.substring(0, 1)} />
        <View style={{ marginLeft: 25 }}>
          <Title>{i18n.t(sign)}</Title>
          <Title>{DateUtils.toEuropean(new Date(birthDate))}</Title>
        </View>
      </View>
      <Divider style={{ marginTop: 25 }} />
      <View style={styles.detailsContainer}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="gender-transgender"
            color={colors.text}
            size={18}
          />
          <Text style={{ marginLeft: 10 }}>{i18n.t(sex)} </Text>
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="heart-circle"
            color={colors.text}
            size={18}
          />
          <Text style={{ marginLeft: 10 }}>{i18n.t(relationship)} </Text>
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons name="dice-6" color={colors.text} size={18} />
          <Text style={{ marginLeft: 10 }}>{number} </Text>
        </View>
      </View>
      <Divider style={{ marginTop: 15 }} />
      <View style={styles.buttonsContainer}>
        <Button
          onPress={_handleSharePress}
          icon="account-multiple"
          style={{ marginTop: 10 }}
          labelStyle={styles.buttonsLabel}
          uppercase={false}
          contentStyle={{ justifyContent: 'flex-start' }}
        >
          {i18n.t('Share with your friends')}
        </Button>
        <Button
          onPress={_handleRatePress}
          icon="message-draw"
          style={{ marginTop: 10 }}
          labelStyle={styles.buttonsLabel}
          uppercase={false}
          contentStyle={{ justifyContent: 'flex-start' }}
        >
          {i18n.t('Rate the app')}
        </Button>
        {__DEV__ && (
          <Button
            onPress={_handleLogOut}
            icon="restart"
            style={{ marginTop: 10 }}
            labelStyle={styles.buttonsLabel}
            uppercase={false}
            contentStyle={{ justifyContent: 'flex-start' }}
          >
            {i18n.t('Restart')}
          </Button>
        )}
      </View>
      <Divider style={{ marginTop: 10 }} />
      <View style={styles.optionsContainer}>
        <View style={styles.optionsOption}>
          <Button
            icon="brightness-6"
            style={styles.optionsButton}
            labelStyle={styles.optionsLabel}
            uppercase={false}
            theme={{ colors: { primary: colors.text } }}
          >
            {i18n.t('Dark theme')}
          </Button>
          <Switch onChange={_handleDarkThemeChange} value={isDark} />
        </View>
      </View>
      <Divider style={{ marginTop: 10 }} />
      <View
        style={[
          {
            position: 'absolute',
            bottom: 20,
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
          },
        ]}
      >
        <Text>v{Constants.manifest.version}</Text>
      </View>
    </BlurView>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function AstrologersScreen({ navigation }) {
  const { colors } = useTheme();
  const [showAdvice, setShowAdvice] = React.useState(true);
  const _handleCloseAdvice = () => setShowAdvice(false);
  const astrologist_colors = {
    Western: '#0f3e6a',
    Vedic: '#3d530d',
    Hellenistic: '#735b13',
    Oriental: '#62230d',
  };
  const dummy_astrologist = [
    {
      id: 1,
      name: 'Marisa',
      school: 'Hellenistic',
      years_exp: 9,
      stars: 4,
      reviews: 125,
      photo: require('./astrologers/marisa.jpg'),
    },
    {
      id: 2,
      name: 'Carter',
      school: 'Western',
      years_exp: 21,
      stars: 5,
      reviews: 120,
      photo: require('./astrologers/carter.jpg'),
    },
    {
      id: 3,
      name: 'Samanta',
      school: 'Oriental',
      years_exp: 12,
      stars: 5,
      reviews: 321,
      photo: require('./astrologers/samanta.jpg'),
    },

    {
      id: 4,
      name: 'Bianca',
      school: 'Vedic',
      years_exp: 45,
      stars: 4,
      reviews: 69,
      photo: require('./astrologers/bianca.jpg'),
    },
    {
      id: 5,
      name: 'George',
      school: 'Western',
      years_exp: 15,
      stars: 5,
      reviews: 198,
      photo: require('./astrologers/george.jpg'),
    },
    {
      id: 6,
      name: 'Meowi',
      school: 'Oriental',
      years_exp: 1,
      stars: 5,
      reviews: 7,
      photo: require('./astrologers/meowi.jpg'),
    },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SpaceSky />
      <View style={{ marginBottom: 10 }}>
        <MainNav style={{ top: 0 }} />
        <View style={styles.headerContainer}>
          <ShadowHeadline>{i18n.t('Astrologers')}</ShadowHeadline>
        </View>
      </View>
      <ScrollView>
        {showAdvice && (
          <View
            style={[
              styles.adviceContainer,
              { borderColor: colors.primary + 'E6' },
            ]}
          >
            <MaterialCommunityIcons
              onPress={_handleCloseAdvice}
              name="close"
              size={20}
              style={styles.adviceClose}
              color={colors.primary + 'E6'}
            />
            <Title style={{ textAlign: 'center' }}>
              {i18n.t('How it works')}
            </Title>
            <View style={{ marginTop: 10 }}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Avatar.Text
                  size={30}
                  label="1"
                  theme={{ colors: { primary: colors.primary + 'E6' } }}
                  labelStyle={{ fontSize: 22 }}
                />
                <Text style={{ marginLeft: 15, fontSize: 12 }}>
                  {i18n.t('Select an astrologer')}
                </Text>
              </View>
              <View
                style={[
                  styles.listDivider,
                  {
                    borderLeftColor: colors.accent + 'E6',
                  },
                ]}
              />
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Avatar.Text
                  size={30}
                  label="2"
                  theme={{ colors: { primary: colors.primary + 'E6' } }}
                  labelStyle={{ fontSize: 22 }}
                />
                <Text
                  style={{
                    marginLeft: 15,
                    fontSize: 12,
                  }}
                >
                  {i18n.t('Introduce your email and question')}
                </Text>
              </View>
              <View
                style={[
                  styles.listDivider,
                  {
                    borderLeftColor: colors.accent + 'E6',
                  },
                ]}
              />
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Avatar.Text
                  size={30}
                  label="3"
                  theme={{ colors: { primary: colors.primary + 'E6' } }}
                  labelStyle={{ fontSize: 22 }}
                />
                <Text
                  style={{
                    marginLeft: 15,
                    fontSize: 12,
                  }}
                >
                  {i18n.t('Wait ~24 hours for the response')}
                </Text>
              </View>
            </View>
          </View>
        )}
        <View style={styles.astrologistContainer}>
          {dummy_astrologist.map(
            ({ id, name, school, years_exp, stars, photo, reviews }, i) => (
              <React.Fragment key={id}>
                <TouchableRipple
                  onPress={() =>
                    navigation.navigate('Question', {
                      key: 'Profile',
                      astrologist: dummy_astrologist[i],
                    })
                  }
                  style={styles.astrologistCard}
                  underlayColor={colors.text + '33'}
                  borderless
                >
                  <>
                    <Image
                      style={styles.astrologistImage}
                      source={photo}
                      resizeMethod="resize"
                      resizeMode="cover"
                    />
                    <LinearGradient
                      colors={['transparent', 'rgba(0,0,0,0.8)']}
                      style={styles.astrologistGradient}
                    >
                      <Title theme={{ colors: { text: '#FFFFFF' } }}>
                        {name}
                      </Title>
                    </LinearGradient>
                    <Subheading
                      theme={{ colors: { text: '#FFFFFF' } }}
                      style={[
                        styles.astrologistSubheading,
                        { backgroundColor: astrologist_colors[school] },
                      ]}
                    >
                      {i18n.t(school, { word: i18n.t('Astrology') })}
                    </Subheading>
                    <View
                      style={[
                        styles.astrologistDetailsContainer,
                        { borderColor: astrologist_colors[school] },
                      ]}
                    >
                      <Text style={{ fontSize: 10 }}>
                        {years_exp} other years experience
                      </Text>
                      <View style={styles.astrologistStars}>
                        <MaterialCommunityIcons name="star" color="gold" />
                        <MaterialCommunityIcons name="star" color="gold" />
                        <MaterialCommunityIcons name="star" color="gold" />
                        <MaterialCommunityIcons name="star" color="gold" />
                        <MaterialCommunityIcons
                          name={stars === 5 ? 'star' : 'star-half'}
                          color="gold"
                        />
                        <Text style={styles.astrologistReview}>{reviews}</Text>
                      </View>
                    </View>
                  </>
                </TouchableRipple>
                {i + (1 % 2) === 0 ? (
                  <View style={{ width: '100%', height: 50 }} />
                ) : null}
              </React.Fragment>
            )
          )}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

FormGallery = ({
  navigateToNewRecord, navigateToCustomForm,
  puenteForms,
  pinnedForms, setPinnedForms,
  setLoading, surveyingOrganization
}) => {
  const [customForms, setCustomForms] = useState([]);
  const [workflowData, setWorkflowData] = useState({});
  const [noWorkflowData, setNoWorkflowData] = useState([]);

  useEffect(() => {
    getData('customForms').then((forms) => {
      setCustomForms(forms || []);
      filterWorkflows(forms || []);
    });
  }, [customForms]);

  const filterWorkflows = (forms) => {
    const tableDataByCategory = {};
    forms.forEach((record) => {
      if (!Array.isArray(record.workflows) || record.workflows.length < 1) {
        if ('No Workflow Assigned' in tableDataByCategory) {
          tableDataByCategory['No Workflow Assigned'] = tableDataByCategory['No Workflow Assigned'].concat([record]);
        } else {
          tableDataByCategory['No Workflow Assigned'] = [record];
        }
      } else if (Array.isArray(record.workflows)) {
        record.workflows.forEach((workflow) => {
          if (workflow in tableDataByCategory) {
            tableDataByCategory[workflow] = tableDataByCategory[workflow].concat([record]);
          } else {
            tableDataByCategory[workflow] = [record];
          }
        });
      }
    });
    setNoWorkflowData(tableDataByCategory['No Workflow Assigned']);
    delete tableDataByCategory['No Workflow Assigned'];
    delete tableDataByCategory.Puente;
    setWorkflowData(tableDataByCategory);
  };

  const refreshCustomForms = () => {
    setLoading(true);
    customFormsQuery(surveyingOrganization).then((forms) => {
      setCustomForms(forms);
      setLoading(false);
    });
  };

  const pinForm = async (form) => {
    setPinnedForms([...pinnedForms, form]);
    storeData(pinnedForms, 'pinnedForms');
  };

  const removePinnedForm = async (form) => {
    const filteredPinnedForms = pinnedForms.filter((pinnedForm) => pinnedForm !== form);
    setPinnedForms(filteredPinnedForms);
    storeData(filteredPinnedForms, 'pinnedForms');
  };

  return (
    <View>
      <View key="pinnedForms" style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.pinnedForms')}</Text>
        <ScrollView horizontal>
          {pinnedForms?.map((form) => (
            <Card
              key={form.objectId ?? form.tag}
              style={layout.cardSmallStyle}
              onPress={() => {
                if (!form.tag) return navigateToCustomForm(form);
                return navigateToNewRecord(form.tag);
              }}
              onLongPress={() => removePinnedForm(form)}
            >

              <View style={styles.cardContainer}>
                {form.image !== undefined && (
                  <form.image height={40} style={styles.svg} />
                )}
                <View style={styles.textContainer}>
                  <Text style={styles.text}>
                    { form.customForm === false ? I18n.t(form.name) : form.name}
                  </Text>
                </View>
              </View>
            </Card>
          ))}
          {pinnedForms?.length < 1 && (
            <View style={layout.screenRow}>
              <Card>
                <Card.Title title={I18n.t('formsGallery.noPinnedForms')} />
              </Card>
            </View>
          )}
        </ScrollView>
      </View>
      <View key="puenteForms" style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.puenteForms')}</Text>
        <SmallCardsCarousel
          puenteForms={puenteForms}
          navigateToNewRecord={navigateToNewRecord}
          pinForm={pinForm}
          setUser={false}
        />
      </View>
      {/* ALL custom forms */}
      <View key="customForms" style={{ marginHorizontal: 20 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={styles.header}>{I18n.t('formsGallery.customForms')}</Text>
          <IconButton
            style={{ bottom: 7 }}
            color={theme.colors.primary}
            size={20}
            icon="refresh"
            onPress={refreshCustomForms}
          />
        </View>
      </View>
      {customForms && (
        <FormsHorizontalView
          forms={customForms}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      )}
      {/* Workflows */}
      <View key="workflows" style={{ marginHorizontal: 20 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={styles.header}>{I18n.t('formsGallery.workflows')}</Text>
          <IconButton
            style={{ bottom: 7 }}
            color={theme.colors.primary}
            size={20}
            icon="refresh"
            onPress={refreshCustomForms}
          />
        </View>
      </View>
      {/* custom forms with workflows */}
      {Object.keys(workflowData).length > 0 && Object.keys(workflowData).map((key) => (
        <FormsHorizontalView
          forms={workflowData[key]}
          header={key}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      ))}
      {/* custom forms with no workflow assigned */}
      {noWorkflowData && noWorkflowData.length > 0 && (
        <FormsHorizontalView
          forms={noWorkflowData}
          header={I18n.t('formsGallery.noWorflowAssigned')}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      )}
      <View style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.marketPlace')}</Text>
      </View>
      <View key="marketplace" style={layout.screenRow}>
        <Card>
          <Card.Content>
            <ComingSoonSVG width={200} height={200} />
            <Title>{I18n.t('formsGallery.ourMarketPlace')}</Title>
            <Paragraph>{I18n.t('formsGallery.discoverForms')}</Paragraph>
            <Button>
              <Text>{I18n.t('formsGallery.exploreForms')}</Text>
            </Button>
          </Card.Content>
        </Card>
      </View>
    </View>
  );
}

function ResourceDetail(props) {

    const width = (useWindowDimensions().width);
    const height = width * 0.6;
    const [active, setActive] = useState(0);

    const change = ({ nativeEvent }) => {
        const slide = Math.ceil(
            nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width,
        );
        if (slide !== active) {
            setActive(slide);
        }
    }

    const { id, title, docs, author, course1_title, course1_Img, course1_link, course2_title, course2_Img, course2_link, course3_title, course3_Img, course3_link, course4_title, course4_Img, course4_link, course5_title, course5_Img, course5_link,
        channel1_title, channel1_Img, channel1_link, channel2_title, channel2_Img, channel2_link, channel3_title, channel3_Img, channel3_link, channel4_title, channel4_Img, channel4_link, channel5_title, channel5_Img, channel5_link,
        Website1_title, Website1_Img, Website1_link, Website2_title, Website2_Img, Website2_link, Website3_title, Website3_Img, Website3_link, Website4_title, Website4_Img, Website4_link, Website5_title, Website5_Img, Website5_link } = props.route.params.data;

    const course = [
        {
            image: `${course1_Img}`,
            title: `${course1_title}`,
            link: `${course1_link}`,
        },
        {
            image: `${course2_Img}`,
            title: `${course2_title}`,
            link: `${course2_link}`,
        },
        {
            image: `${course3_Img}`,
            title: `${course3_title}`,
            link: `${course3_link}`,
        },
        {
            image: `${course4_Img}`,
            title: `${course4_title}`,
            link: `${course4_link}`,
        },
        {
            image: `${course5_Img}`,
            title: `${course5_title}`,
            link: `${course5_link}`,
        },
    ];

    const channel = [
        {
            image: `${channel1_Img}`,
            title: `${channel1_title}`,
            link: `${channel1_link}`,
        },
        {
            image: `${channel2_Img}`,
            title: `${channel2_title}`,
            link: `${channel2_link}`,
        },
        {
            image: `${channel3_Img}`,
            title: `${channel3_title}`,
            link: `${channel3_link}`,
        },
        {
            image: `${channel4_Img}`,
            title: `${channel4_title}`,
            link: `${channel4_link}`,
        },
        {
            image: `${channel5_Img}`,
            title: `${channel5_title}`,
            link: `${channel5_link}`,
        },
    ];
    const website = [
        {
            image: `${Website1_Img}`,
            title: `${Website1_title}`,
            link: `${Website1_link}`,
        },
        {
            image: `${Website2_Img}`,
            title: `${Website2_title}`,
            link: `${Website2_link}`,
        },
        {
            image: `${Website3_Img}`,
            title: `${Website3_title}`,
            link: `${Website3_link}`,
        },
        {
            image: `${Website4_Img}`,
            title: `${Website4_title}`,
            link: `${Website4_link}`,
        },
        {
            image: `${Website5_Img}`,
            title: `${Website5_title}`,
            link: `${Website5_link}`,
        },
    ];

    return (
        <View>
            <ScrollView style={styles.Top}>
                <View style={styles.headerStyle}>
                    <Title style={{ fontSize: 31, fontFamily: 'sans-serif', fontWeight: 'bold' }}>{title}</Title>
                </View>

                <View
                    style={{
                        borderBottomColor: 'grey',
                        borderBottomWidth: 0.5,
                        marginLeft: 70,
                        marginRight: 70,
                    }}
                />
                <View style={[{ width: "90%", margin: 10, alignItems: 'center', }]}>
                    <Button
                        title="docs"
                        color="#002223"
                        style={[{
                            borderRadius: 10,
                        }]}
                        onPress={() => Linking.openURL(docs)}
                    />
                </View>
                <Title style={{ fontSize: 25 }}>Best Courses</Title>
                <View
                    style={{
                        borderBottomColor: 'grey',
                        borderBottomWidth: 0.5,
                        width: "100%",
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: 10,
                    }}
                />
                <View>
                    <ScrollView
                        pagingEnabled
                        horizontal
                        onScroll={change}
                        showHorizontalScrollIndicator={false}
                    >
                        {course.map((image, index) => (

                            <View>
                                <TouchableHighlight key={index} onPress={() => Linking.openURL(image.link)}>
                                    <Image
                                        key={index}
                                        source={{ uri: image.image }}
                                        style={{ width, height, resizeMode: 'cover' }}
                                    />
                                </TouchableHighlight>
                                <View style={styles.backdropView}>
                                    <Text style={styles.headline} key={index} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
                                </View>
                            </View>

                        ))}

                    </ScrollView>

                    <View style={styles.pagination}>
                        {course.map((i, k) => (
                            <Text key={k} style={k == active ? styles.activeDot : styles.dot}>
                                •
                            </Text>
                        ))}
                    </View>
                </View>

                <Title style={{ fontSize: 25 }}>Youtube Channels</Title>
                <View
                    style={{
                        borderBottomColor: 'grey',
                        borderBottomWidth: 0.5,
                        width: "100%",
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: 10,
                    }}
                />
                <View>
                    <ScrollView
                        pagingEnabled
                        horizontal
                        onScroll={change}
                        showHorizontalScrollIndicator={false}
                    >
                        {channel.map((image, index) => (

                            <View>
                                <TouchableHighlight onPress={() => Linking.openURL(image.link)}>
                                    <Image
                                        key={index}
                                        source={{ uri: image.image }}
                                        style={{ width, height, resizeMode: 'cover' }}
                                    />
                                </TouchableHighlight>
                                <View style={styles.backdropView}>
                                    <Text style={styles.headline} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
                                </View>
                            </View>


                        ))}

                    </ScrollView>

                    <View style={styles.pagination1}>
                        {channel.map((i, k) => (
                            <Text key={k} style={k == active ? styles.activeDot : styles.dot}>
                                •
                            </Text>
                        ))}
                    </View>




                </View>
                <Title style={{ fontSize: 25 }}>Useful Websites</Title>
                <View
                    style={{
                        borderBottomColor: 'grey',
                        borderBottomWidth: 0.5,
                        width: "100%",
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: 10,
                    }}
                />
                <View>
                    <ScrollView
                        pagingEnabled
                        horizontal
                        onScroll={change}
                        showHorizontalScrollIndicator={false}
                    >
                        {website.map((image, index) => (

                            <View>
                                <TouchableHighlight onPress={() => Linking.openURL(image.link)}>
                                    <Image
                                        key={index}
                                        source={{ uri: image.image }}
                                        style={{ width, height, resizeMode: 'cover' }}
                                    />
                                </TouchableHighlight>
                                <View style={styles.backdropView}>
                                    <Text style={styles.headline} onPress={() => Linking.openURL(image.link)}>{image.title}</Text>
                                </View>
                            </View>


                        ))}

                    </ScrollView>

                    <View style={styles.pagination2}>
                        {website.map((i, k) => (
                            <Text key={k} style={k == active ? styles.activeDot : styles.dot}>
                                •
                            </Text>
                        ))}
                    </View>
                </View>

            </ScrollView>
        </View >


    )
}

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      navigation,
      title,
      theme: { colors },
    } = this.props;
    return (
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : null}
        style={styles.container}
      >
        <ScrollView
          keyboardShouldPersistTaps="handled"
          keyboardDismissMode="on-drag"
        >
          <IconButton
            icon="chevron-left"
            color={colors.primary}
            size={30}
            accessibilityLabel="Back to sign in"
            onPress={() => navigation.goBack()}
          />
          <Logo />
          <Spacer>
            <Title style={{ alignSelf: 'center', color: colors.primary }}>
              {title}
            </Title>
          </Spacer>
          <Spacer>
            <TextInput
              label="Email"
              mode="outlined"
              dense
              value={this.state.email}
              autoCapitalize="none"
              autoCorrect={false}
              keyboardType="email-address"
              onChangeText={(email) => this.setState({ email })}
              onSubmitEditing={this.onSubmit}
              onFocus={clearErrorMessage}
              disabled={isProcessing || !!this.state.message}
            />
          </Spacer>
          <Spacer vertical={16}>
            <Button
              mode="contained"
              accessibilityLabel="Submit"
              onPress={this.onSubmit}
              loading={isProcessing}
              disabled={isProcessing || !!this.state.message}
            >
              Submit
            </Button>
          </Spacer>
        </ScrollView>
        <Snackbar
          visible={errorMessage}
          onDismiss={clearErrorMessage}
          action={{
            label: 'Dismiss',
            accessibilityLabel: 'Dismiss',
            onPress: () => {},
          }}
        >
          {errorMessage}
        </Snackbar>
        <Snackbar
          visible={this.state.message}
          onDismiss={() => navigation.goBack()}
          action={{
            label: 'Go Back',
            accessibilityLabel: 'Go Back',
            onPress: () => {},
          }}
        >
          {this.state.message}
        </Snackbar>
      </KeyboardAvoidingView>
    );
  }

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      theme: { colors },
      type,
      unloadAuthScreen,
    } = this.props;
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : null}
          style={styles.container}
        >
          <ScrollView
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
          >
            <Logo />
            <Spacer>
              <Title style={{ alignSelf: 'center', color: colors.primary }}>
                Sign In
              </Title>
            </Spacer>
            <Spacer>
              <TextInput
                label="Email"
                mode="outlined"
                dense
                value={this.state.email}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={(email) => this.setState({ email })}
                onSubmitEditing={this.onEmailSignIn}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <TextInput
                label="Password"
                mode="outlined"
                dense
                secureTextEntry
                value={this.state.password}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(password) => this.setState({ password })}
                onSubmitEditing={this.onEmailSignIn}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <View style={styles.navLinks}>
                <NavLink
                  text="Forgot password?"
                  routeName="RequestPasswordReset"
                  disabled={isProcessing}
                />
                <NavLink
                  text="Register instead!"
                  routeName="SignUp"
                  disabled={isProcessing}
                />
              </View>
            </Spacer>
            <Spacer vertical={4}>
              <Button
                mode="contained"
                accessibilityLabel="Sign In"
                onPress={this.onEmailSignIn}
                loading={isProcessing && type === 'email'}
                disabled={isProcessing}
              >
                Sign In
              </Button>
            </Spacer>
            <Spacer vertical={12}>
              <Text style={{ alignSelf: 'center' }}>Or Sign In With</Text>
            </Spacer>
            <Spacer>
              <OAuthButtons />
            </Spacer>
            {errorMessage === 'Email is not verified' && (
              <NavLink
                text="Have not received verification email?"
                routeName="RequestVerificationEmail"
                disabled={isProcessing}
              />
            )}
          </ScrollView>
          <Snackbar
            visible={errorMessage}
            onDismiss={clearErrorMessage}
            action={{
              label: 'Dismiss',
              accessibilityLabel: 'Dismiss',
              onPress: () => {},
            }}
          >
            {errorMessage}
          </Snackbar>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      theme: { colors },
      type,
      unloadAuthScreen,
    } = this.props;
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : null}
          style={styles.container}
        >
          <ScrollView
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
          >
            <Logo />
            <Spacer>
              <Title style={{ alignSelf: 'center', color: colors.primary }}>
                Sign Up
              </Title>
            </Spacer>
            <Spacer>
              <TextInput
                label="Username"
                mode="outlined"
                dense
                value={this.state.username}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(username) => this.setState({ username })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <TextInput
                label="Email"
                mode="outlined"
                dense
                value={this.state.email}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={(email) => this.setState({ email })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <View style={styles.fullName}>
                <TextInput
                  label="First Name"
                  mode="outlined"
                  style={styles.name}
                  dense
                  value={this.state.firstName}
                  autoCorrect={false}
                  onChangeText={(firstName) => this.setState({ firstName })}
                  onSubmitEditing={this.onEmailRegister}
                  onFocus={clearErrorMessage}
                  disabled={isProcessing}
                />
                <TextInput
                  label="Last Name"
                  mode="outlined"
                  style={styles.name}
                  dense
                  value={this.state.lastName}
                  autoCorrect={false}
                  onChangeText={(lastName) => this.setState({ lastName })}
                  onSubmitEditing={this.onEmailRegister}
                  onFocus={clearErrorMessage}
                  disabled={isProcessing}
                />
              </View>
              <Spacer />
              <TextInput
                label="Password"
                mode="outlined"
                dense
                secureTextEntry
                value={this.state.password}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(password) => this.setState({ password })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <View style={styles.navLinks}>
                <NavLink text="Sign in instead!" routeName="SignIn" />
              </View>
            </Spacer>
            <Spacer vertical={4}>
              <Button
                mode="contained"
                accessibilityLabel="Sign In"
                onPress={this.onEmailRegister}
                loading={isProcessing && type === 'email'}
                disabled={isProcessing}
              >
                Sign Up
              </Button>
            </Spacer>
            <Spacer vertical={12}>
              <Text style={{ alignSelf: 'center' }}>Or Sign Up With</Text>
            </Spacer>
            <Spacer>
              <OAuthButtons />
            </Spacer>
          </ScrollView>
          <Snackbar
            visible={errorMessage}
            onDismiss={clearErrorMessage}
            action={{
              label: 'Dismiss',
              accessibilityLabel: 'Dismiss',
              onPress: () => {},
            }}
          >
            {errorMessage}
          </Snackbar>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }