react-native-paper#Subheading JavaScript Examples

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

  return (
    <View style={styling.root}>
      <Subheading style={styling.itemTitle}>{path(['data', 'fullName'])(usersGetProfile)}</Subheading>
      <Paragraph style={styling.itemText}>{path(['data', 'bio'])(usersGetProfile)}</Paragraph>
    </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>
  )
}

Auth = ({
  navigation,
  theme,
  authFacebook,
  authFacebookRequest,
  authGoogle,
  authGoogleRequest,
  authSignin,
  authSigninRequest,
  authSigninIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView contentContainerStyle={styling.wrapper} extraScrollHeight={160}>
      <NativeError
        handleCancelPress={authSigninIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authSignin))}
        actionText={t('Try again')}
        status={authSignin.status}
        triggerOn="failure"
        hidden={(
          t(path(['message', 'code'])(authSignin)) === 'GENERIC' ||
          t(path(['message', 'code'])(authSignin)) === 'USER_NOT_FOUND'
        )}
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('One Tap')} {t('Login / Signup')}</Subheading>
        </View>
        <View style={styling.footer}>
          <Federated
            authFacebook={authFacebook}
            authFacebookRequest={authFacebookRequest}
            authGoogle={authGoogle}
            authGoogleRequest={authGoogleRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => {},
            title: t('Or Login / Signup'),
          }]} />
        </View>
        <View style={styling.form}>
          <UsernameForm
            authSignin={authSignin}
            authSigninRequest={authSigninRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => navigation.navigate('AuthForgot'),
            title: t('Forgot Password'),
          }]} />
        </View>
      </View>
    </KeyboardAwareScrollView>
  )
}

render() {
    const {state} = this.context;
    const {enrolledBoxes, newBoxName, btnLoading} = this.state;
    return (
      <View style={styles.listCircleContainer}>
        <Text style={[Styles.fontSmall, styles.helpText]}>
          Boxes are your personal Friend/Family/Work groups where you share
          relevant posts which interest a perticular group. You can either join
          an existing group or create a new group.
        </Text>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Create New Box</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Box Name"
            maxLength={30}
            dense={true}
            value={newBoxName}
            onChangeText={(nb) => this.setNewBoxName(nb)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleCreateBox()}>
            Create Box
          </Button>
        </View>
        <Divider />
        <FlatList
          ListHeaderComponent={() => {
            return <Text style={Styles.fontSmall}>Enrolled Boxes</Text>;
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return (
              <View style={styles.emptyComponentContainer}>
                <Planet
                  size={width / 2.5}
                  mood={newBoxName.length !== 0 ? 'lovestruck' : 'blissful'}
                  color="#FCCB7E"
                />
                <Headline style={[Styles.fontMedium, styles.noBoxesYet]}>
                  Here you create new Boxes and see what boxes you are enrolled
                  in. To switch boxes you just tap on them from the given list.
                  To get started create a New Box, don't forget to give it
                  exciting name.
                </Headline>
              </View>
            );
          }}
          data={enrolledBoxes}
          keyExtractor={(item) => item}
          renderItem={({item}) => {
            return (
              <Card
                onPress={() => this.handleSelectBox(item)}
                style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Subheading styles={Styles.fontMedium}>{item}</Subheading>
                  {state.box === item ? (
                    <Icons
                      name="check"
                      size={20}
                      color={DarkTheme.colors.primary}
                    />
                  ) : null}
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
      </View>
    );
  }

render() {
    const {enrolledBy, btnLoading, isBottomSheetOpen} = this.state;

    return (
      <View style={styles.boxScreenContainer}>
        <View style={styles.authorContainer}>
          <Headline style={Styles.fontMedium}>
            Author: {this.state.auth[0]}
          </Headline>
        </View>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Add Participant</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Email"
            maxLength={50}
            value={this.state.email}
            dense={true}
            onChangeText={(email) => this.setAddParticipant(email)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleAddUser()}>
            Add Member
          </Button>
        </View>
        <FlatList
          ListHeaderComponent={() => {
            return (
              <Text style={Styles.fontSmall}>
                Enrolled Users: {enrolledBy.length}
              </Text>
            );
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return <ActivityIndicator />;
          }}
          data={enrolledBy}
          keyExtractor={(item) => item.uid}
          renderItem={({item, index}) => {
            return (
              <Card
                style={styles.card}
                onPress={() => this.handleOptions(index)}>
                <Card.Content>
                  <Subheading style={Styles.fontMedium}>{item.name}</Subheading>
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
        <BottomSheet
          isOpen={isBottomSheetOpen}
          closeBottomSheet={() => this.setBottomSheet(false)}
          options={[{text: 'Remove User', onPress: this.handleRemoveUser}]}
        />
      </View>
    );
  }

SignupConfirm = ({
  theme,
  navigation,
  authSignin,
  authSignup,
  authSignupRequest,
  authSignupConfirm,
  authSignupConfirmRequest,
  authSignupConfirmIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.wrapper}>
      <NativeError
        handleCancelPress={authSignupConfirmIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authSignupConfirm))}
        actionText={t('Try again')}
        status={authSignupConfirm.status}
        triggerOn="failure"
      />

      <NativeError
        handleCancelPress={authSignupConfirmIdle}
        titleText={t('All good!')}
        messageText={t(path(['message', 'text'])(authSignupConfirm))}
        actionText={t('Done')}
        status={authSignupConfirm.status}
        triggerOn="success"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          {authSignup.payload.usernameType === 'email' ?
            <Subheading>{t('Enter the code we sent to')} {authSignup.payload.email}</Subheading>
          : null}
          {authSignup.payload.usernameType === 'phone' ?
            <Subheading>{t('Enter the code we sent to')} {authSignup.payload.phone}</Subheading>
          : null}
        </View>
        <View style={styling.form}>
          <ConfirmForm
            authSignin={authSignin}
            authSignupConfirm={authSignupConfirm}
            authSignupConfirmRequest={authSignupConfirmRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => navigation.navigate('Auth'),
            title: t('Change Email Address'),
          }, {
            onPress: null,
            title: t('or'),
          }, {
            onPress: () => authSignupRequest(),
            title: t('Resend Email'),
          }]} />
        </View>
      </View>
    </View>
  )
}

Signup = ({
  theme,
  navigation,
  authSignin,
  authSignup,
  authSignupRequest,
  authSignupIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.wrapper}>
      <NativeError
        handleCancelPress={authSignupIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authSignup))}
        actionText={t('Try again')}
        status={authSignup.status}
        triggerOn="failure"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{`${t('Would you like sign up & verify your email')} ${authSignin.payload.username} ?`}</Subheading>
        </View>
        <View style={styling.form}>
          <SignupForm
            authSignin={authSignin}
            authSignup={authSignup}
            authSignupRequest={authSignupRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => Linking.openURL('https://real.app/real-eula-html-english.html').catch(() => {}),
            title: t('By tapping to continue, you are indicating that you have read the EULA and agree to the Terms of Service'),
          }, {
            onPress: () => navigation.navigate('Auth'),
            title: t('Change Email Address'),
          }]} />
        </View>
      </View>
    </View>
  )
}

SearchComponent = ({
  theme,
  authUser,
  usersSearchRequest,
  usersSearch,
  usersFollow,
  usersFollowRequest,
  usersUnfollow,
  usersUnfollowRequest,
  handleProfilePress,
  usersGetTrendingUsers,
  postsGetTrendingPosts,
  handleFormFocus,
  formFocus,
  handleFormChange,
  formChange,
  themeFetch,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <HeaderComponent>
        <FormComponent
          usersSearch={usersSearch}
          usersSearchRequest={usersSearchRequest}
          handleFormFocus={handleFormFocus}
          handleFormChange={handleFormChange}
        />
      </HeaderComponent>

      {!formFocus && (path(['status'])(postsGetTrendingPosts) === 'loading' && !path(['data', 'length'])(postsGetTrendingPosts)) ?
        <PostsLoadingComponent />
      : null}

      {!formFocus ?
        <ScrollView>
          <PostsGridComponent
            postsGet={postsGetTrendingPosts}
            themeFetch={themeFetch}
            themeCode={path(['themeCode'])(authUser)}
          />
        </ScrollView>
      : null}

      {formFocus && formChange ?
        <ScrollView refreshControl={<RefreshControl tintColor={theme.colors.border} refreshing={usersSearch.status === 'loading'} />}>
          <Subheading style={styling.subheading}>{t('Search Result')}</Subheading>
          <ResultComponent
            usersSearch={usersSearch}
            usersFollow={usersFollow}
            usersFollowRequest={usersFollowRequest}
            usersUnfollow={usersUnfollow}
            usersUnfollowRequest={usersUnfollowRequest}
            handleProfilePress={handleProfilePress}
          />
        </ScrollView>
      : null}

      {formFocus && !formChange ?
        <ScrollView refreshControl={<RefreshControl tintColor={theme.colors.border} refreshing={usersGetTrendingUsers.status === 'loading'} />}>
          <Subheading style={styling.subheading}>{t('Trending Users')}</Subheading>
          <ResultComponent
            usersSearch={usersGetTrendingUsers}
            usersFollow={usersFollow}
            usersFollowRequest={usersFollowRequest}
            usersUnfollow={usersUnfollow}
            usersUnfollowRequest={usersUnfollowRequest}
            handleProfilePress={handleProfilePress}
          />
        </ScrollView>
      : null}
    </View>
  )
}

Fullname = ({
  theme,
  navigation,
  authCheck,
  authOnboard,
  authOnboardRequest,
  authOnboardIdle,
  authSignoutRequest,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView contentContainerStyle={styling.wrapper} extraScrollHeight={160}>
      <NativeError
        handleCancelPress={authOnboardIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authOnboard))}
        actionText={t('Try again')}
        status={authOnboard.status}
        triggerOn="failure"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('Enter your full name & reserve your new username')}</Subheading>
        </View>
        <View style={styling.form}>
          <FullnameForm
            authCheck={authCheck}
            authOnboard={authOnboard}
            authOnboardRequest={authOnboardRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => Linking.openURL('https://real.app/real-eula-html-english.html').catch(() => {}),
            title: t('By tapping to continue, you are indicating that you have read the EULA and agree to the Terms of Service'),
          }, {
            onPress: authSignoutRequest,
            title: t('Signout'),
          }]} />
        </View>
      </View>
    </KeyboardAwareScrollView>
  )
}

ForgotConfirm = ({
  theme,
  navigation,
  authForgot,
  authForgotConfirm,
  authForgotConfirmRequest,
  authForgotConfirmIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.wrapper}>
      <NativeError
        handleCancelPress={authForgotConfirmIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authForgotConfirm))}
        actionText={t('Try again')}
        status={authForgotConfirm.status}
        triggerOn="failure"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('Create new password')}</Subheading>
        </View>
        <View style={styling.form}>
          <ForgotConfirmForm
            authForgot={authForgot}
            authForgotConfirm={authForgotConfirm}
            authForgotConfirmRequest={authForgotConfirmRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => navigation.navigate('Auth'),
            title: t('Change Email Address'),
          }, {
            onPress: null,
            title: t('or'),
          }, {
            onPress: () => navigation.navigate('Auth'),
            title: t('Resend Email'),
          }]} />
        </View>
      </View>
    </View>
  )
}

Forgot = ({
  theme,
  navigation,
  authForgot,
  authForgotRequest,
  authForgotIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.wrapper}>
      <NativeError
        handleCancelPress={authForgotIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authForgot))}
        actionText={t('Try again')}
        status={authForgot.status}
        triggerOn="failure"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('Forgot password ?')}</Subheading>
        </View>
        <View style={styling.form}>
          <ForgotForm
            authForgot={authForgot}
            authForgotRequest={authForgotRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => navigation.navigate('Auth'),
            title: t('Change Email Address'),
          }, {
            onPress: null,
            title: t('or'),
          }, {
            onPress: () => navigation.navigate('Auth'),
            title: t('Resend Email'),
          }]} />
        </View>
      </View>
    </View>
  )
}

/**
 * @param sign {string}
 * @param title {string}
 * @param showTitle {boolean}
 * @param subtitle {string}
 * @param onPress {function}
 * @param style {object}
 * @param signHeight {string|number}
 * @param signWidth {string|number}
 * @param styleTitle {object}
 * @param styleSubtitle {object}
 * @returns {*}
 * @constructor
 */
function Sign({
  sign,
  title,
  showTitle,
  subtitle,
  onPress,
  style,
  signHeight,
  signWidth,
  styleTitle,
  styleSubtitle,
}) {
  const ParsedSign = signs[sign];
  const isAndroid = PlatformUtils.isAndroid;
  return (
    <TouchableRipple
      onPress={() => onPress(sign)}
      underlayColor="#ffffff00"
      rippleColor="#ffffff00"
      style={[{ alignItems: 'center', justifyContent: 'center' }, style]}
    >
      <>
        <View
          style={[
            {
              shadowColor: '#000000',
              width: signWidth,
              height: signHeight,
            },
            {
              elevation: isAndroid ? 0 : 10,
            },
            styles.signContainer,
            styles.signShadow,
          ]}
        >
          <ParsedSign width={signHeight} height={signWidth} />
        </View>
        {showTitle && (
          <Subheading style={styleTitle}>{title ?? i18n.t(sign)}</Subheading>
        )}
        {subtitle && <Caption style={styleSubtitle}>{subtitle}</Caption>}
      </>
    </TouchableRipple>
  );
}

export default function SectionList() {
  const [numberColumns, setNumberColumns] = useState(3);
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <View>
      <TextInput
        label="Number of columns (max 10)"
        value={String(numberColumns)}
        type="numeric"
        keyboardType="numeric"
        onChangeText={(value) => {
          const num = parseInt(value, 10) || "";
          setNumberColumns(num);
        }}
      />
    </View>
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={styles.container}
            data={data}
            numColumns={Math.min(
              Math.max(parseInt(numberColumns, 10) || 1, 1),
              10,
            )}
            // Item
            itemHeight={90}
            renderItem={renderItem}
            renderEmpty={renderEmpty}
            // Header
            headerHeight={90}
            renderHeader={renderHeader}
            // Footer
            footerHeight={100}
            renderFooter={renderFooter}
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function LoadingScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { colors } = useTheme();
  const [phrase, setPhrase] = React.useState(0);
  const phrases = [
    i18n.t('Analyzing name'),
    i18n.t('Analyzing birth date'),
    i18n.t('Analyzing gender'),
    i18n.t('Analyzing relationship status'),
    i18n.t('Analyzing favourite number'),
    i18n.t('Concluding analysis'),
  ];

  React.useEffect(() => {
    const intervalNumber = setInterval(() => {
      if (phrase < 5) {
        setPhrase(phrase + 1);
      } else {
        const preSession = {
          ...session,
          ...{ days: 1, daysRow: 1, basicsDone: true },
        };
        Storer.set(SESSION_KEY, preSession).then(() => {
          dispatch({
            type: 'setSession',
            fields: preSession,
          });
        });
      }
    }, 3000);
    return () => clearInterval(intervalNumber);
  });

  return (
    <DefaultView>
      <SpaceSky />
      <View style={{ flex: 1 }} />
      <View style={styles.loadingContainer}>
        <Rotation style={{ opacity: 0.7 }} rotate>
          <SolarSystem />
        </Rotation>
      </View>
      <View style={{ flex: 3 }}>
        <Subheading style={[styles.textSubheading, { color: colors.primary }]}>
          {phrases[phrase]}
        </Subheading>
      </View>
    </DefaultView>
  );
}

export default function SectionList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <List.Item
      title="Marco Cesarato"
      description="[email protected]"
      style={styles.container}
      left={(props) => <List.Icon {...props} icon="account" />}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  const renderSectionHeader = (section) => (
    <Appbar style={styles.header}>
      <Appbar.Content
        style={styles.headerContent}
        title={"Section " + (section + 1)}
        subtitle="Below are listed all section items"
      />
    </Appbar>
  );
  const renderSectionFooter = (section) => (
    <Block>
      <Subheading>Footer Section {section}</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList
          style={styles.container}
          sections={sections}
          // Item
          itemHeight={90}
          renderItem={renderItem}
          renderEmpty={renderEmpty}
          // Header
          headerHeight={90}
          renderHeader={renderHeader}
          // Footer
          footerHeight={100}
          renderFooter={renderFooter}
          // Section
          sectionHeaderHeight={75}
          renderSectionHeader={renderSectionHeader}
          // Section footer
          sectionFooterHeight={60}
          renderSectionFooter={renderSectionFooter}
        />
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function SectionList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <List.Item
      title="Marco Cesarato"
      description="[email protected]"
      style={styles.container}
      left={(props) => <List.Icon {...props} icon="account" />}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={styles.container}
            data={data}
            // Item
            itemHeight={90}
            renderItem={renderItem}
            renderEmpty={renderEmpty}
            // Header
            headerHeight={90}
            renderHeader={renderHeader}
            // Footer
            footerHeight={100}
            renderFooter={renderFooter}
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function CompareList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.id + " - " + item.title}
        description={item.description}
        style={styles.item}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;

  const renderBigHeader = () => (
    <List.Item
      title="BigList"
      description="react-native-big-list"
      style={styles.header}
    />
  );
  const renderFlatHeader = () => (
    <List.Item
      title="FlatList"
      description="react-native"
      style={styles.header}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={[
              styles.container,
              Platform.select({ web: { maxHeight: "100vh" }, default: {} }),
            ]}
            data={data}
            renderItem={renderItem}
            getItemLayout={(data, index) => ({
              length: ITEM_HEIGHT,
              offset: ITEM_HEIGHT * index,
              index,
            })}
            ListHeaderComponent={renderBigHeader}
            ListFooterComponent={renderFooter}
            ListEmptyComponent={renderEmpty}
            headerHeight={100} // Default 0, need to specify the header height
            footerHeight={100} // Default 0, need to specify the footer  height
          />
          <FlatList
            style={[
              styles.container,
              Platform.select({ web: { maxHeight: "100vh" }, default: {} }),
            ]}
            data={data}
            renderItem={renderItem}
            getItemLayout={(data, index) => ({
              length: ITEM_HEIGHT,
              offset: ITEM_HEIGHT * index,
              index,
            })} // Replaceable with `itemHeight={ITEM_HEIGHT}`
            ListHeaderComponent={renderFlatHeader} // Replaceable with `renderHeader`
            ListFooterComponent={renderFooter} // Replaceable with `renderFooter`
            ListEmptyComponent={renderEmpty} // Replaceable with `renderEmpty`
            keyExtractor={(item) => String(item.id)} // Removable
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function LearnScreen({ navigation }) {
  const dispatch = useGlobals()[1];
  const { colors } = useTheme();
  const handleViewLesson = async (lesson) => {
    try {
      dispatch({ type: 'toggleLoader' });
    } catch {
    } finally {
      dispatch({ type: 'toggleLoader' });
      navigation.navigate(lesson, { key: 1 });
    }
  };
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SpaceSky />
      <View style={{ marginBottom: 10 }}>
        <MainNav style={{ top: 0 }} />
        <View style={styles.headerContainer}>
          <ShadowHeadline>{i18n.t('Learn')}</ShadowHeadline>
        </View>
      </View>
      <ScrollViewFadeFirst element={<SubHeading />} height={140}>
        <Surface
          style={[
            styles.surfaceRight,
            { backgroundColor: 'transparent', marginTop: 10 },
          ]}
        >
          <View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.8 }]}>
            <Constellation
              color={colors.text + '3D'}
              dotColor={colors.accent}
              width={250}
              height={300}
            />
          </View>
          <LinearGradient
            colors={['transparent', '#4c4c4c' + 'E6', '#4c4c4c' + 'E6']}
            start={[0, 0]}
            end={[1, 0]}
            style={styles.gradientRight}
          >
            <View style={{ flex: 0.8 }} />
            <View style={{ flex: 1 }}>
              <Subheading
                theme={{ colors: { text: '#FFFFFF' } }}
                numberOfLines={1}
                style={{ fontWeight: 'bold' }}
              >
                {i18n.t('About the Zodiac')}
              </Subheading>
              <Caption theme={{ colors: { text: '#FFFFFF' } }}>
                {i18n.t('Older as mankind')}
              </Caption>
              <Caption
                theme={{ colors: { text: '#FFFFFF' } }}
                style={{ marginTop: -3 }}
              >
                {i18n.t('Bind to the sky')}
              </Caption>
              <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                <Button
                  mode="contained"
                  icon="lock-outline"
                  style={{ borderRadius: 25, marginTop: 5 }}
                  theme={{
                    colors: { primary: colors.backdrop, text: '#FFFFFF' },
                  }}
                  labelStyle={{ fontSize: 9, letterSpacing: 0 }}
                  onPress={() => handleViewLesson('AboutZodiac')}
                >
                  {i18n.t('Watch an ad to unblock')}
                </Button>
              </View>
            </View>
          </LinearGradient>
        </Surface>
        <View style={{ height: 20 }} />
        <Surface
          style={[
            styles.surfaceLeft,
            { backgroundColor: 'transparent', height: 140 },
          ]}
        >
          <View style={[StyleSheet.absoluteFill, { right: 150, opacity: 0.4 }]}>
            <ConstellationSimple
              color={colors.text + '3D'}
              dotColor={colors.primary}
              width={200}
              height={150}
            />
          </View>
          <LinearGradient
            colors={['#81411a', '#81411aE6', '#81411a3D', 'transparent']}
            start={[0, 0]}
            end={[1, 0]}
            style={styles.gradientLeft}
          >
            <View style={{ flex: 1 }}>
              <Subheading
                theme={{ colors: { text: '#FFFFFF' } }}
                numberOfLines={1}
                style={{ fontWeight: 'bold' }}
              >
                {i18n.t('The signs')}
              </Subheading>
              <Caption theme={{ colors: { text: '#FFFFFF' } }}>
                {i18n.t('The importance of when')}
              </Caption>
              <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                <Button
                  mode="contained"
                  icon="lock-outline"
                  style={{ borderRadius: 25 }}
                  theme={{
                    colors: { primary: colors.backdrop, text: '#FFFFFF' },
                  }}
                  labelStyle={{ fontSize: 9, letterSpacing: 0 }}
                  onPress={() => handleViewLesson('TheSigns')}
                >
                  {i18n.t('Watch an ad to unblock')}
                </Button>
              </View>
            </View>
            <View style={{ flex: 0.6 }} />
          </LinearGradient>
        </Surface>
        <View style={{ height: 20 }} />
        <Surface
          style={[
            styles.surfaceRight,
            { backgroundColor: 'transparent', height: 130 },
          ]}
        >
          <View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.3 }]}>
            <Leo color={colors.text} width={200} height={200} />
          </View>
          <LinearGradient
            colors={['transparent', '#13366f' + 'E6', '#13366f' + 'E6']}
            start={[0, 0]}
            end={[1, 0]}
            style={styles.gradientRight}
          >
            <View style={{ flex: 0.8 }} />
            <View style={{ flex: 1 }}>
              <Subheading
                theme={{ colors: { text: '#FFFFFF' } }}
                numberOfLines={1}
                style={{ fontWeight: 'bold' }}
              >
                {i18n.t('The elements')}
              </Subheading>
              <Caption theme={{ colors: { text: '#FFFFFF' } }}>
                {i18n.t('The pillars of life')}
              </Caption>
              <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                <Button
                  mode="contained"
                  icon="lock-outline"
                  style={{ borderRadius: 25, marginTop: 5 }}
                  theme={{ colors: { primary: colors.backdrop } }}
                  labelStyle={{ fontSize: 9, letterSpacing: 0 }}
                  onPress={() => handleViewLesson('TheElements')}
                >
                  {i18n.t('Watch an ad to unblock')}
                </Button>
              </View>
            </View>
          </LinearGradient>
        </Surface>
        <View style={{ height: 150 }} />
      </ScrollViewFadeFirst>
    </SafeAreaView>
  );
}

/**
 * @param navigation {object}
 * @returns {*}
 * @constructor
 */
function DailyScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { colors } = useTheme();
  const dataIndex = daily.findIndex(
    (item) =>
      item.day.split('-')[2].toString() === new Date().getDate().toString() &&
      item.sign === session.sign
  );
  const data = daily[dataIndex !== -1 ? dataIndex : 0];
  const d = new Date();

  React.useLayoutEffect(() => {
    if (!session?.sign) {
      Storer.delete(SESSION_KEY).then(() => dispatch({ type: 'setLogOut' }));
    }
  }, [dispatch, session?.sign]);

  const Header = (
    <View>
      <MainNav
        rightButton={
          <MaterialCommunityIcons
            onPress={() => navigation.navigate('Signs', { key: 'Sign' })}
            name="swap-horizontal"
            color={colors.text}
            size={30}
            style={{ opacity: 0.5 }}
          />
        }
      />
      <View style={[styles.headerContainer]}>
        <Sign
          sign={session.sign}
          showTitle={false}
          signWidth={70}
          signHeight={70}
        />
        <ShadowHeadline style={styles.headerHeadline}>
          {i18n.t(session.sign)}
        </ShadowHeadline>
        <Subheading>
          {i18n.t('date_daily', {
            day: d.getDate(),
            month: months[session.language][d.getMonth()],
            year: d.getFullYear(),
          })}
        </Subheading>
      </View>
      <Divider />
    </View>
  );

  return (
    <>
      <SpaceSky />
      <SafeAreaView>
        <ScrollViewFadeFirst element={Header} height={200}>
          <View style={{ height: 20 }} />
          <ShowFromTop>
            <View
              style={[
                styles.defaultContainer,
                {
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginTop: 10,
                },
              ]}
            >
              <TextBold style={styles.textTitles}>
                {i18n.t('Focus of the day')}:
              </TextBold>
              <TextBold
                style={{ fontSize: 16, marginLeft: 5, color: colors.primary }}
              >
                {i18n.t(data.contents.focus)}
              </TextBold>
            </View>
            <View
              style={[
                styles.defaultContainer,
                {
                  marginTop: 25,
                  marginBottom: 5,
                  flexDirection: 'row',
                  justifyContent: 'space-around',
                },
              ]}
            >
              <ProgressItem
                text={i18n.t('Love')}
                percent={data.contents.percents.love}
              />
              <ProgressItem
                text={i18n.t('Career')}
                percent={data.contents.percents.work}
                style={{ marginHorizontal: 5 }}
              />
              <ProgressItem
                text={i18n.t('Health')}
                percent={data.contents.percents.health}
              />
            </View>
            <View style={[styles.defaultContainer]}>
              <View style={styles.horoscopeTodayContainer}>
                <TextBold style={styles.textTitles}>
                  {i18n.t('Your horoscope for today')}:
                </TextBold>
                <View style={styles.iconsHoroscopeToday}>
                  <MaterialCommunityIcons
                    name="heart"
                    size={16}
                    color={colors.text}
                    style={{ marginLeft: 5 }}
                  />
                  <MaterialCommunityIcons
                    name="briefcase"
                    size={16}
                    color={colors.text}
                    style={{ marginLeft: 5 }}
                  />
                  <MaterialCommunityIcons
                    name="food-apple"
                    size={16}
                    color={colors.text}
                    style={{ marginLeft: 5 }}
                  />
                </View>
              </View>
              <Text style={{ marginTop: 15 }}>
                {data.contents.text[Language.filteredLocale()]}
              </Text>
            </View>
            <View style={styles.defaultContainer}>
              <TextBold style={styles.textTitles}>
                {i18n.t('Today you love')}
              </TextBold>
            </View>
            <View
              style={[
                styles.loveContainer,
                {
                  borderColor: colors.text + '0D',
                },
              ]}
            >
              <View
                style={[
                  styles.heartLoveContainer,
                  {
                    backgroundColor: colors.text + '0D',
                  },
                ]}
              >
                <MaterialCommunityIcons
                  name="heart"
                  size={30}
                  color={colors.accent}
                />
              </View>
              <View style={[styles.loveSignsContainer]}>
                {data.contents.compatibility.map((sign, i) => (
                  <Sign
                    key={i}
                    sign={sign}
                    signHeight={40}
                    signWidth={50}
                    styleTitle={{ fontSize: 12 }}
                  />
                ))}
              </View>
            </View>
            <Divider style={{ marginTop: 20 }} />
            <View style={styles.defaultContainer}>
              <TextBold style={styles.textTitles}>
                {i18n.t('Lucky numbers')}
              </TextBold>
            </View>
            <View
              style={[
                styles.defaultContainer,
                {
                  flexDirection: 'row',
                  justifyContent: 'space-evenly',
                },
              ]}
            >
              {data.contents.numbers.map((number, i) => (
                <LuckyNumber key={i} number={number} />
              ))}
            </View>
            <View style={{ paddingVertical: 10 }} />
          </ShowFromTop>
        </ScrollViewFadeFirst>
      </SafeAreaView>
    </>
  );
}

/**
 * @param route
 * @param navigation
 * @returns {*}
 * @constructor
 */
function AstrologerQuestionScreen({ route, navigation }) {
  const dispatch = useGlobals()[1];
  const astrologist = route.params.astrologist;
  const setData = React.useState({
    message: null,
    email: null,
    astrologer: astrologist.name,
  })[1];
  const isDark = useIsDark();
  const isAndroid = PlatformUtils.isAndroid;
  const handleProceed = () => {
    try {
      dispatch({ type: 'toggleLoader' });
    } catch {
    } finally {
      dispatch({ type: 'toggleLoader' });
      navigation.pop();
    }
  };

  return (
    <BlurView
      style={[StyleSheet.absoluteFill, { flex: 1 }]}
      tint={isDark ? 'dark' : 'light'}
      intensity={isAndroid ? 150 : 100}
    >
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
        <ScrollView style={{ paddingBottom: 200 }}>
          <Close position="right" />
          <View style={{ margin: 20, alignItems: 'center' }}>
            <Headline>{astrologist.name}</Headline>
            <Subheading>
              {i18n.t(astrologist.school, { word: i18n.t('Astrology') })}
            </Subheading>
            <Image source={astrologist.photo} style={styles.image} />
          </View>
          <Divider />
          <View style={{ margin: 20 }}>
            <View style={{ height: 5 }} />
            <TextInput
              label={i18n.t('Your question')}
              multiline
              style={{ height: 150 }}
              maxLength={250}
              onChangeText={(text) =>
                setData((data) => ({ ...data, message: text }))
              }
            />
            <View style={{ height: 5 }} />
            <TextInput
              label={i18n.t('Your email')}
              keyboardType="email-address"
              onChangeText={(text) =>
                setData((data) => ({ ...data, email: text }))
              }
            />
          </View>
          <View style={{ marginHorizontal: 20, marginBottom: 20 }}>
            <Button
              onPress={handleProceed}
              mode="contained"
              style={{ borderRadius: 20 }}
              icon="send"
            >
              {i18n.t('Proceed')}
            </Button>
            <Text style={styles.advice}>
              *
              {i18n.t(
                "You'll need to see an ad before you can send the question"
              )}
            </Text>
          </View>
          <Divider />
        </ScrollView>
      </TouchableWithoutFeedback>
    </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>
  );
}