react-native-paper#Caption JavaScript Examples

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

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

  return (
    <View style={styling.root}>
      <View style={[{ left: '0%' }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={[styling.caption, styling.captionStart]}>{t('Day')}</Caption>
      </View>
      <View style={[{ left: '25%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Week')}</Caption>
      </View>
      <View style={[{ left: '50%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Month')}</Caption>
      </View>
      <View style={[{ left: '75%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Year')}</Caption>
      </View>
      <View style={[{ left: '100%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={[styling.caption, styling.captionEnd]}>{t('Forever')}</Caption>
      </View>
    </View>
  )
}

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

  return (
    <View style={styling.root}>
      <TouchableOpacity onPress={() => navigation.navigate('Payout')}>
        <Text>
          <Caption>{t('You will be paid {{amount}} dollars per view from other diamond members', { amount: '$0.11' })} </Caption>
          <Caption style={styling.link}>{t('learn more')}</Caption>
        </Text>
      </TouchableOpacity>
    </View>
  )
}

renderScreen(item, index) {
    return (
      <View style={styles.innerView}>
        <View style={{width: width, height: width / 1.5}}>
          <LottieView source={item.source} autoPlay />
        </View>
        <Caption style={Styles.fontSmall}>{item.madeBy}</Caption>
        <Headline style={Styles.fontLarge}>{item.header}</Headline>
        <Text
          style={[{textAlign: 'justify', marginTop: 10}, Styles.fontMedium]}>
          {item.body}
        </Text>
        <Button
          mode="contained"
          labelStyle={Styles.fontSmall}
          style={styles.googleBtn}
          onPress={
            index === data.length - 1
              ? () => this.continueWithGoogle()
              : () =>
                  this.flatList.scrollToIndex({
                    animated: true,
                    index: index + 1,
                  })
          }>
          {index === data.length - 1 ? 'Continue With Google' : 'Next'}
        </Button>
      </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>
  );
}

Action = ({
  theme,
  navigation,
  post,
  postsOnymouslyLikeRequest,
  postsDislikeRequest,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const handleCommentPress = () => navigation.navigate('Modal', ({
    cancelAction: () => navigation.goBack(null),
    cancelLabel: t('Cancel'),
    confirmLabel: t('OK'),
    confirmAction: () => navigation.goBack(null),
    text: `${t('REAL is fully Open Source & built by the people')}. ${t('Help us move faster by contributing code')}.`,
    title: t('Comments Coming Soon'),
  }))

  return (
    <View style={styling.action}>
      <View style={styling.actionLeft}>

        {!path(['postedBy', 'likesDisabled'])(post) && !post.likesDisabled && post.likeStatus === 'NOT_LIKED' ?
          <TouchableOpacity style={styling.actionLeftIcon} onPress={() => postsOnymouslyLikeRequest({ postId: path(['postId'])(post), userId: path(['postedBy', 'userId'])(post) })}>
            <LikeIcon fill={theme.colors.primaryIcon} />
          </TouchableOpacity>
        : null}

        {!path(['postedBy', 'likesDisabled'])(post) && !post.likesDisabled && post.likeStatus !== 'NOT_LIKED' ?
          <TouchableOpacity style={styling.actionLeftIcon} onPress={() => postsDislikeRequest({ postId: path(['postId'])(post), userId: path(['postedBy', 'userId'])(post) })}>
            <UnlikeIcon fill={theme.colors.primary} />
          </TouchableOpacity>
        : null}
        
        {!post.commentsDisabled && !path(['postedBy', 'commentsDisabled'])(post) ?
          <TouchableOpacity style={styling.actionLeftIcon} onPress={handleCommentPress}>
            <BubbleIcon fill={theme.colors.primaryIcon} />
          </TouchableOpacity>
        : null}

        <TouchableOpacity style={styling.actionLeftIcon} onPress={() => navigation.navigate('PostShare', { post })}>
          <DirectIcon fill={theme.colors.primaryIcon} />
        </TouchableOpacity>
      </View>
      <View style={styling.actionRight}>
        <View style={styling.time}>
          <Caption style={styling.timeAgo}>{dayjs(post.postedAt).from(dayjs())}</Caption>
        </View>
      </View>
    </View>
  )
}

Uploading = ({
  theme,
  navigation,
  post,
  postsCreateRequest,
  postsCreateIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  if (!['loading', 'failure', 'success'].includes(post.status)) {
    return null
  }

  return (
    <View style={styling.root}>
      <Avatar
        active={false}
        thumbnailSource={{ uri: path(['payload', 'images', '0'])(post) }}
        imageSource={{ uri: path(['payload', 'images', '0'])(post) }}
      />

      {post.status === 'loading' ?
        <View style={styling.status}>
          <TouchableOpacity style={styling.content} onPress={() => navigation.navigate('Verification')}>
            <Text style={styling.title}>Uploading {post.meta.progress || 0}%</Text>
            <View style={styling.caption}>
              <Caption style={styling.subtitle}>{t('Pending Verification')} - {t('Learn More')}</Caption>
              <VerificationIcon fill="#676767" />
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styling.icon} onPress={() => postsCreateIdle(post.payload)}>
            <CloseIcon fill="#ffffff" />
          </TouchableOpacity>
        </View>
      : null}

      {post.status === 'failure' ?
        <View style={styling.status}>
          <TouchableOpacity style={styling.content} onPress={() => postsCreateRequest(post.payload)}>
            <Text style={styling.title}>{t('Failed to create your post')}</Text>
            <Caption style={styling.subtitle}>{t('Tap here to reupload')}</Caption>
          </TouchableOpacity>
          <TouchableOpacity style={styling.icon} onPress={() => postsCreateIdle(post.payload)}>
            <CloseIcon fill="#ffffff" />
          </TouchableOpacity>
        </View>
      : null}
      
      {post.status === 'success' ?
        <View style={styling.status}>
          <TouchableOpacity style={styling.content} onPress={() => postsCreateIdle(post.payload)}>
            <Text style={styling.title}>Done</Text>
            <Caption style={styling.subtitle}>{t('Successfuly created')}</Caption>
          </TouchableOpacity>
          <TouchableOpacity style={styling.icon} onPress={() => postsCreateIdle(post.payload)}>
            <TickIcon fill="#ffffff" />
          </TouchableOpacity>
        </View>
      : null}
    </View>
  )
}

PostsPreview = ({
  theme,
  selectedPost,
  handlePostClose,
}) => {
  const styling = styles(theme)

  return (
    <Modal visible={selectedPost.length > 0} transparent>
      <ImageViewer
        imageUrls={selectedPost}
        saveToLocalByLongPress={false}
        renderIndicator={() => null}
        enableSwipeDown
        backgroundColor="#000000"
        onSwipeDown={handlePostClose}
        onCancel={handlePostClose}
        loadingRender={() => <ActivityIndicator size="small" color="#ffffff" />}
        swipeDownThreshold={120}
        renderHeader={() => (
          <View style={styling.header}>
            <TouchableOpacity onPress={handlePostClose}>
              <CloseIcon
                fill="#ffffff"
              />
            </TouchableOpacity>
          </View>
        )}
        renderFooter={() => (
          <Animatable.View animation="bounce" easing="ease-out" iterationCount={2}>
            <TouchableOpacity onPress={handlePostClose} style={styling.footer}>
              <SwipeIcon
                fill="#ffffff"
              />

              <Caption style={styling.helper}>Swipe to close</Caption>
            </TouchableOpacity>
          </Animatable.View>
        )}
      />
    </Modal>
  )
}

Privacy = ({
  theme,
  navigation,
  user,
  togglePrivacyStatus,
  toggleFollowCountsHidden,
  toggleLikesDisabled,
  toggleCommentsDisabled,
  toggleVerificationHidden,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <RowsComponent items={[{
        label: t('Private Account'),
        caption: t('Approve followers'),
        onPress: togglePrivacyStatus,
        enabled: user.privacyStatus === 'PRIVATE',
      }, {
        label: t('Hide Total Followers'),
        caption: t('Followers can\'t view a list of your total followers'),
        onPress: toggleFollowCountsHidden,
        enabled: user.followCountsHidden,
      }, {
        label: t('Likes'),
        caption: t('Followers can like posts'),
        onPress: toggleLikesDisabled,
        enabled: !user.likesDisabled,
      }, {
        label: t('Comments'),
        caption: t('Followers can comment on posts'),
        onPress: toggleCommentsDisabled,
        enabled: !user.commentsDisabled,
      }, {
        label: t('Verification hidden'),
        caption: t('Verification label is hidden'),
        onPress: toggleVerificationHidden,
        enabled: !user.verificationHidden,
      }]}>
        {(privacy) => (
          <RowsItemComponent hasBorders>
            <UserRowComponent
              onPress={path(['onPress'])(privacy)}
              content={
                <View>
                  <Text style={styling.username}>{path(['label'])(privacy)}</Text>
                  <Caption>{path(['caption'])(privacy)}</Caption>
                </View>
              }
              action={
                <Switch
                  value={path(['enabled'])(privacy)}
                  onValueChange={privacy.onPress}
                />
              }
            />
          </RowsItemComponent>
        )}
      </RowsComponent>
    </View>
  )
}

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

  const userId = path(['data', 'userId'])(usersGetProfile)

  const handleProfileFollowerPress = () => navigation.navigate({
    routeName: 'ProfileFollower',
    params: { userId },
    key: `ProfileFollower-userId${userId}`,
  })
  const handleProfileFollowedPress = () => navigation.navigate({
    routeName: 'ProfileFollowed',
    params: { userId },
    key: `ProfileFollowed-userId${userId}`,
  })
  
  const followerCount = path(['data', 'followerCount'])(usersGetProfile)
  const followedCount = path(['data', 'followedCount'])(usersGetProfile)

  return (
    <View style={styling.root}>
      <View style={styling.item}>
        <Headline style={styling.itemTitle}>{path(['data', 'postCount'])(usersGetProfile)}</Headline>
        <Caption style={styling.itemText} numberOfLines={1}>{t('Posts')}</Caption>
      </View>
      
      <TouchableOpacity style={styling.item} onPress={handleProfileFollowerPress}>
        {!path(['data', 'followCountsHidden'])(usersGetProfile) && is(Number)(followerCount) ?
          <Headline style={styling.itemTitle}>{followerCount}</Headline>
        :
          <Headline style={styling.itemTitle}>•</Headline>
        }
        <Caption style={styling.itemText} numberOfLines={1}>{t('Followers')}</Caption>
      </TouchableOpacity>

      
      <TouchableOpacity style={styling.item} onPress={handleProfileFollowedPress}>
        {!path(['data', 'followCountsHidden'])(usersGetProfile) && is(Number)(followedCount) ?
          <Headline style={styling.itemTitle}>{followedCount}</Headline>
        :
          <Headline style={styling.itemTitle}>•</Headline>
        }
        <Caption style={styling.itemText} numberOfLines={1}>{t('Following')}</Caption>
      </TouchableOpacity>
    </View>
  )
}

Stories = ({
  theme,
  navigation,
  authUser,
  usersGetFollowedUsersWithStories,
  usersStoriesGet,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const handleUserStoryPress = (user) => () => navigation.push('Story', user)

  return (
    <ScrollView
      style={styling.root}
      horizontal
      showsHorizontalScrollIndicator={false}
    >
      <TouchableOpacity
        key={authUser.userId}
        onPress={!path(['data', 'length'])(usersStoriesGet) ? () => navigation.navigate('Camera') : handleUserStoryPress(authUser)}
        style={styling.story}
      >
        <Avatar
          active
          size="medium"
          thumbnailSource={{ uri: path(['photoUrl64p'])(authUser) }}
          imageSource={{ uri: path(['photoUrl480p'])(authUser) }}
          icon={!path(['data', 'length'])(usersStoriesGet)}
        />
        <Caption style={styling.username}>{path(['username'])(authUser)}</Caption>
      </TouchableOpacity>

      {(usersGetFollowedUsersWithStories.data || []).map((user, key) => (
        <TouchableOpacity
          key={key}
          onPress={handleUserStoryPress(user)}
          style={styling.story}
        >
          <Avatar
            active
            size="medium"
            thumbnailSource={{ uri: path(['photoUrl64p'])(authUser) }}
            imageSource={{ uri: path(['photoUrl480p'])(authUser) }}
            themeCode={path(['themeCode'])(user)}
          />
          <Caption style={styling.username}>{path(['username'])(user)}</Caption>
        </TouchableOpacity>
      ))}
    </ScrollView>
  )
}

/**
 * @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>
  );
}

PostCreateForm = ({
  theme,
  navigation,
  handleSubmit,
  values,
  loading,
  handlePostPress,
  setFieldValue,
  cameraCapture,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  const uri = path(['data', 'uri'])(cameraCapture) || navigation.getParam('base64')

  return (
    <View style={styling.root}>
      <View style={styling.header}>
        <TouchableOpacity onPress={() => handlePostPress({ mediaObjects: [{ 'url4k': uri }] })}>
          <Avatar
            size="bigger"
            thumbnailSource={{ uri }}
            imageSource={{ uri }}
          />
        </TouchableOpacity>

        <View style={styling.text}>
          <Field name="text" component={TextDemo} placeholder={t('Write a caption')} multiline={true} />
        </View>
      </View>

      <View style={styling.sliderWrapper}>
        <Slider
          style={styling.slider}
          minimumValue={1}
          step={1}
          maximumValue={5}
          minimumTrackTintColor={theme.colors.primary}
          maximumTrackTintColor={theme.colors.disabled}
          value={getIndexByValue(values.lifetime)}
          onValueChange={(value) => setFieldValue('lifetime', getValueByIndex(value))}
        />
        
        <View style={styling.sliderIndicator}>
          <LifetimeIndicator />
        </View>
        
        <Text>{t('Post will be available {{lifetime}}', { lifetime: getTextByValue(t)(values.lifetime) })}</Text>
        <Caption>{t('All posts become stories when they are 24 hours from expiring')}</Caption>
      </View>

      <View style={styling.input}>
        <RowsComponent items={[{
          label: t('Comments'),
          caption: t('Followers can comment on posts'),
          onPress: () => setFieldValue('commentsDisabled', !values.commentsDisabled),
          type: 'action',
          enabled: !values.commentsDisabled,
        }, {
          label: t('Likes'),
          caption: t('Followers can like posts'),
          onPress: () => setFieldValue('likesDisabled', !values.likesDisabled),
          type: 'action',
          enabled: !values.likesDisabled,
        }, {
          label: t('Verification hidden'),
          caption: t('Verification label is hidden'),
          onPress: () => setFieldValue('verificationHidden', !values.verificationHidden),
          type: 'action',
          enabled: !values.verificationHidden,
        }]}>
          {(settings) => (
            <RowsItemComponent hasBorders>
              <UserRowComponent
                onPress={path(['onPress'])(settings)}
                content={
                  <View style={styling.user}>
                    <Text style={styling.username}>{path(['label'])(settings)}</Text>
                    <Caption>{path(['caption'])(settings)}</Caption>
                  </View>
                }
                action={
                  path(['type'])(settings) === 'navigation' ? (
                    <NextIcon fill={theme.colors.text} />
                  ) : (
                    <Switch
                      value={path(['enabled'])(settings)}
                      onValueChange={settings.onPress}
                    />
                  )
                }
              />
            </RowsItemComponent>
          )}
        </RowsComponent>
      </View>

      <View style={styling.input}>
        <DefaultButton label={t('Create Post')} onPress={handleSubmit} loading={loading} disabled={!uri} />
      </View>
    </View>
  )
}

PostEditForm = ({
  theme,
  navigation,
  handleSubmit,
  values,
  loading,
  setFieldValue,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <View style={styling.header}>
        <View style={styling.avatar}>
          <Avatar
            size="bigger"
            thumbnailSource={{ uri: values.uri }}
            imageSource={{ uri: values.uri }}
          />
        </View>

        <View style={styling.text}>
          <Field name="text" component={TextDemo} placeholder={t('Write a caption')} multiline={true} />
        </View>
      </View>

      <View style={styling.sliderWrapper}>
        <Slider
          style={styling.slider}
          minimumValue={1}
          step={1}
          maximumValue={5}
          minimumTrackTintColor={theme.colors.primary}
          maximumTrackTintColor={theme.colors.disabled}
          value={getIndexByValue(values.lifetime)}
          onValueChange={(value) => {
            setFieldValue('lifetime', getValueByIndex(value))
            const expiryArguments = getArgumentsByIndex(value)

            if (expiryArguments) {
              setFieldValue('expiresAt', dayjs().add(...getArgumentsByIndex(value) || null).toJSON())
            } else {
              setFieldValue('expiresAt', null)
            }
          }}
        />
        
        <View style={styling.sliderIndicator}>
          <LifetimeIndicator />
        </View>
        
        <Text>{t('Post availability')}</Text>
        <Caption>{values.expiresAt ?
            t('This post will expire {{expiresAt}}', { expiresAt: dayjs(values.expiresAt).from(dayjs()) }) :
            t('This post will be available forever')}</Caption>
      </View>

      <View style={styling.input}>
        <RowsComponent items={[{
          label: t('Comments are disabled'),
        }, {
          label: t('Likes are enabled'),
        }]}>
          {(settings) => (
            <RowsItemComponent hasBorders>
              <UserRowComponent
                onPress={path(['onPress'])(settings)}
                content={
                  <View style={styling.user}>
                    <Text style={styling.username}>{path(['label'])(settings)}</Text>
                  </View>
                }
              />
            </RowsItemComponent>
          )}
        </RowsComponent>
      </View>

      <View style={styling.input}>
        <DefaultButton label={t('Edit Post')} onPress={handleSubmit} loading={loading} />
      </View>
    </View>
  )
}

Header = ({
  theme,
  navigation,
  authUser,
  post,
  postsArchiveRequest,
  postsFlagRequest,
  postsDeleteRequest,
  postsShareRequest,
  postsRestoreArchivedRequest,
  handleProfilePress,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  const actionSheetRef = useRef(null)

  const handleOptionsPress = () => actionSheetRef.current.show()
  const archived = path(['mediaObjects', '0', 'mediaStatus'])(post) === 'ARCHIVED'

  return (
    <View style={styling.header}>
      <TouchableOpacity onPress={handleProfilePress(post.postedBy)}>
        <Avatar
          active
          thumbnailSource={{ uri: path(['postedBy', 'photoUrl64p'])(post) }}
          imageSource={{ uri: path(['postedBy', 'photoUrl64p'])(post) }}
          themeCode={path(['postedBy', 'themeCode'])(post)}
        />
      </TouchableOpacity>

      <View style={styling.headerText}>
        <TouchableOpacity onPress={handleProfilePress(post.postedBy)}>
          <Text style={styling.headerUsername}>{post.postedBy.username}</Text>
        </TouchableOpacity>

        {path(['mediaObjects', '0', 'isVerified'])(post) && post.expiresAt ?
          <View style={styling.verification}>
            <Caption style={styling.headerStatus}>{t('Expires {{expiry}}', { expiry: dayjs(post.expiresAt).from(dayjs()) })}</Caption>
          </View>
        : null}

        {!path(['mediaObjects', '0', 'isVerified'])(post) ?
          <TouchableOpacity onPress={() => navigation.navigate('Verification')} style={styling.verification}>
            <Caption style={styling.verificationStatus}>{t('Failed Verification')} - {t('Learn More')}</Caption>
            <VerificationIcon fill="#DC3644" />
          </TouchableOpacity>
        : null}
      </View>

      {path(['userId'])(authUser) === path(['postedBy', 'userId'])(post) && archived ?
        <React.Fragment>
          <TouchableOpacity style={styling.headerAction} onPress={handleOptionsPress}>
            <MoreIcon fill={theme.colors.primaryIcon} />
          </TouchableOpacity>

          <ActionSheet
            ref={actionSheetRef}
            options={[t('Restore from Archived'), t('Cancel')]}
            cancelButtonIndex={1}
            onPress={(index) => {
              if (index === 0) {
                postsRestoreArchivedRequest({ postId: post.postId })
              }
            }}
          />
        </React.Fragment>
      : null}

      {path(['userId'])(authUser) === path(['postedBy', 'userId'])(post) && !archived ?
        <React.Fragment>
          <TouchableOpacity style={styling.headerAction} onPress={handleOptionsPress}>
            <MoreIcon fill={theme.colors.primaryIcon} />
          </TouchableOpacity>

          <ActionSheet
            ref={actionSheetRef}
            options={[t('Share'), t('Edit'), t('Archive'), t('Other'), t('Delete'), t('Cancel')]}
            cancelButtonIndex={5}
            destructiveButtonIndex={4}
            onPress={(index) => {
              if (index === 0) {
                navigation.navigate('PostShare', { post })
              }
              if (index === 1) {
                navigation.navigate('PostEdit', { post })
              }
              if (index === 2) {
                postsArchiveRequest({ postId: post.postId })
              }
              if (index === 3) {
                postsShareRequest({
                  photoUrl: path(['mediaObjects', '0', 'url'])(post),
                  type: 'global',
                  title: 'Share',
                })
              }
              if (index === 4) {
                postsDeleteRequest({ postId: post.postId })
              }
            }}
          />
        </React.Fragment>
      : null}

      {path(['userId'])(authUser) !== path(['postedBy', 'userId'])(post) ?
        <React.Fragment>
          <TouchableOpacity style={styling.headerAction} onPress={handleOptionsPress}>
            <MoreIcon fill={theme.colors.primaryIcon} />
          </TouchableOpacity>

          <ActionSheet
            ref={actionSheetRef}
            options={[t('Share'), t('Report'), t('Other'), t('Cancel')]}
            cancelButtonIndex={3}
            onPress={(index) => {
              if (index === 0) {
                navigation.navigate('PostShare', { post })
              }
              if (index === 1) {
                postsFlagRequest({ postId: post.postId })
              }
              if (index === 2) {
                postsShareRequest({
                  photoUrl: path(['mediaObjects', '0', 'url'])(post),
                  type: 'global',
                  title: 'Share',
                })
              }
            }}
          />
        </React.Fragment>
      : null}
    </View>
  )
}

Settings = ({
  theme,
  navigation,
  authSignoutRequest,
  user,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <ScrollView style={styling.root}>
      <TouchableOpacity onPress={() => navigation.navigate('ProfilePhoto')}>
        <Avatar
          size="large"
          thumbnailSource={{ uri: path(['photoUrl64p'])(user) }}
          imageSource={{ uri: path(['photoUrl480p'])(user) }}
        />
      </TouchableOpacity>

      <RowsComponent items={[{
        label: t('Join Diamond'),
        onPress: () => navigation.navigate('Membership'),
        icon: <DiamondIcon fill={theme.colors.text} />,
      }, {
        label: t('Edit Profile'),
        onPress: () => navigation.navigate('ProfileEdit'),
        icon: <EditIcon fill={theme.colors.text} />,
      }, {
        label: t('Change Profile Photo'),
        onPress: () => navigation.navigate('ProfilePhoto'),
        icon: <PhotoIcon fill={theme.colors.text} />,
      }, {
        label: t('Change Language'),
        onPress: () => navigation.navigate('Translation'),
        icon: <LanguageIcon fill={theme.colors.text} />,
      }, {
        label: t('Choose Theme'),
        onPress: () => navigation.navigate('Theme'),
        icon: <ThemeIcon fill={theme.colors.text} />,
      }, {
        label: t('Archived Photos'),
        onPress: () => navigation.navigate('ProfileArchivedPhoto'),
        icon: <ArchiveIcon fill={theme.colors.text} />,
      }, {
        label: t('Mental Health & Privacy Settings'),
        onPress: () => navigation.navigate('Privacy'),
        icon: <PrivacyIcon fill={theme.colors.text} />,
      }, {
        label: t('Diamond Payout'),
        onPress: () => navigation.navigate('Payout'),
        icon: <CashIcon fill={theme.colors.text} />,
      }, {
        label: t('Signout'),
        onPress: () => authSignoutRequest(),
        icon: <SignoutIcon fill={theme.colors.text} />,
      }]}>
        {(settings) => (
          <RowsItemComponent hasBorders>
            <UserRowComponent
              onPress={path(['onPress'])(settings)}
              avatar={
                <SettingsAvatar icon={path(['icon'])(settings)} />
              }
              content={
                <View>
                  <Text style={styling.username}>{path(['label'])(settings)}</Text>
                </View>
              }
              action={
                <SettingsAvatar icon={<NextIcon fill={theme.colors.text} />} />
              }
            />
          </RowsItemComponent>
        )}
      </RowsComponent>

      <View style={styling.helper}>
        <Caption>Version: {getReadableVersion()}</Caption>
      </View>
    </ScrollView>
  )
}