react-native-paper#Paragraph JavaScript Examples

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

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

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

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

  return (
    <View style={styling.root}>
      <View style={styling.output}>
        <View style={styling.divident}>
          <Paragraph style={styling.paragraph}>{t('(Total Revenue) * (Processing Fees)')}</Paragraph>
        </View>

        <View style={styling.line}></View>

        <View style={styling.divisor}>
          <Paragraph style={styling.paragraph}>{t('(Total ?Views)')}</Paragraph>
        </View>
      </View>
    </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>
  )
}

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

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

  return (
    <ScrollView style={styling.root}>
      <Paragraph style={styling.paragraph}>{t('Our mission is to encourage high quality content to ensure REAL grows into an honest & meantally healthy platform for your followers')}.</Paragraph>
      <Paragraph style={styling.paragraph}>{t('This post may be pending verification because of one or more of the following')}:</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It’s been modified, cropped, or rotated by another app')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It’s been copied or was taken using another camera')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It’s too blurry')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It was taken using iOS portrait mode (selective lighting/filter)')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It has/uses a filter or has been photoshopped')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It has poor lighting')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It’s from the internet (copyrighted)')}.</Paragraph>
      <Paragraph style={styling.paragraph}>* {t('It was previously flagged as inappropriate by > 20% of the viewers who saw it')}.</Paragraph>

      <Paragraph style={styling.paragraph}>{t('If you don’t like “Post Verification”, don’t stress! You can disable Post Verification for good for all posts in settings under “Mental Health & Privacy Settings”. Nobody can detect if you have post verification disabled')}.</Paragraph>
    </ScrollView>
  )
}

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

MatchContent = ({ sign1, sign2 }) => {
  const dataIndex = stale.findIndex(
    (item) => item.sign1 === sign1 && item.sign2 === sign2
  );
  const data = stale[dataIndex !== -1 ? dataIndex : 0];
  const matches_data = [
    {
      name: 'Intimate',
      icon: 'account-multiple-plus-outline',
    },
    { name: 'Mindset', icon: 'thought-bubble' },
    { name: 'Feelings', icon: 'heart' },
    { name: 'Priorities', icon: 'priority-high' },
    { name: 'Interests', icon: 'sticker-emoji' },
    { name: 'Sport', icon: 'run' },
  ];

  return (
    <>
      <View style={styles.surfaceContainer}>
        <ShowFromTop>
          <TextBold style={{ marginBottom: 10 }}>
            {i18n.t(sign1)} & {i18n.t(sign2)}
          </TextBold>
          <Paragraph>{data.resume[Language.filteredLocale()]}</Paragraph>
          <TextBold style={{ marginTop: 20, marginBottom: 10 }}>
            {i18n.t('Relationship')}
          </TextBold>
          <Paragraph>{data.relationship[Language.filteredLocale()]}</Paragraph>
          <View style={{ marginVertical: 20 }}>
            {matches_data.map((props, index) => (
              <Bars
                key={index}
                end={data.percents[props.name.toLowerCase()]}
                {...props}
              />
            ))}
          </View>
        </ShowFromTop>
      </View>
    </>
  );
}

ThemeModal = ({
  theme,
  isVisible,
  children,
  onApplyClick,
  onDiscardClick,
}) => {
  const customTheme = useSelector(themeSelector.userThemeSelector('black.red'))

  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <RNModal isVisible={isVisible}>
      <View style={styling.root}>
        <View style={styling.header}>
          <PaperProvider theme={customTheme}>
            <View style={styling.action}>
              <Paragraph style={styling.text}>{t('This is preview of selected theme')}</Paragraph>
            </View>

            <View style={styling.action}>
              <View style={styling.actionItem}>
                <DefaultButton label={t('Apply Theme')} onPress={onApplyClick} />
              </View>
              <View style={styling.actionItem}>
                <DefaultButton label={t('Discard Theme')} onPress={onDiscardClick} />
              </View>
            </View>
          </PaperProvider>
        </View>

        <View style={styling.screen}>
          <View style={styling.screenPlaceholder} />
          {children}
        </View>
      </View>
    </RNModal>
  )
}

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