react-native-paper#Text JavaScript Examples

Bars = ({ name, icon, end }) => {
  const { colors } = useTheme();
  return (
    <>
      <View style={styles.mathProgressText}>
        <Button theme={{ colors: { primary: colors.text } }} icon={icon}>
          {i18n.t(name)}
        </Button>
        <Text>{end}%</Text>
      </View>
      <ProgressBar progress={end / 100} style={styles.matchProgressBar} />
    </>
  );
}

Translation = ({
  theme,
  user,
  usersEditProfileRequest,
  translationFetch,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <ScrollView>
      <View style={styling.root}>
        <RowsComponent items={Object.keys(path(['data'])(translationFetch))}>
          {(translation) => (
            <RowsItemComponent>
              <UserRowComponent
                avatar={null}
                content={
                  <View>
                    <Text style={styling.username}>{translation}</Text>
                  </View>
                }
                action={
                  <ThemeRowActionComponent
                    enabled={user.languageCode === translation}
                    onEnablePress={() => usersEditProfileRequest({ languageCode: translation })}
                    onDisablePress={() => usersEditProfileRequest({ languageCode: translation })}
                  />
                }
              />
            </RowsItemComponent>
          )}
        </RowsComponent>
      </View>
    </ScrollView>
  )
}

Feedback = () => {
  const handleEmail = async () => {
    await MailComposer.isAvailableAsync().then((mailAvailable) => {
      if (mailAvailable) {
        MailComposer.composeAsync({
          recipients: ['[email protected]'],
          subject: 'User Feedback',
          body: emailBody
        });
      }
    });
  };

  const [emailBody, setEmailBody] = useState('');

  return (
    <View style={styles.mainContainer}>
      <Headline>{I18n.t('feedback.feedback')}</Headline>
      <View style={styles.horizontalLinePrimary} />
      <Text>{I18n.t('feedback.enterFeedback')}</Text>
      <View style={styles.horizontalLinePrimary} />
      <TextInput
        multiline
        onChangeText={(text) => setEmailBody(text)}
        placeholder={I18n.t('feedback.typeFeedback')}
      />
      <View style={styles.languageContainer}>
        <Button mode="contained" onPress={() => handleEmail()}>{I18n.t('feedback.sendMail')}</Button>
      </View>
    </View>
  );
}

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

  const handleSignupPress = () => navigation.navigate('Auth')

  return (
    <View style={styling.root}>
      <View style={styling.option}>
        <TouchableOpacity onPress={handleSignupPress}>
          <Text style={styling.optionText}>{t('Already have an account')}? {t('Sign In')}.</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

/**
 * @param children
 * @param style {object}
 * @returns {*}
 * @constructor
 */
function TextBold({ children, style }) {
  return <Text style={[{ fontWeight: 'bold' }, style]}>{children}</Text>;
}

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

LuckyNumber = ({ number }) => {
  const { colors } = useTheme();
  return (
    <View
      style={[LuckyNumberStyles.circle, { backgroundColor: colors.accent }]}
    >
      <Text style={{ fontSize: 16, marginTop: 3 }}>{number}</Text>
    </View>
  );
}

PickerItem = (ref, theme) => ({
  item,
  index,
}) => {
  const styling = styles(theme)

  const onPress = () => {
    item.handleChange()
    ref.current.snapToItem(index, true)    
  }

  return (
    <TouchableOpacity onPress={onPress} style={styling.sliderItemWrapper}>
      <View style={styling.sliderItem}>
        <View style={styling.sliderItemIcon}>
          {item.title === 'Rectangle' ?
            <PortraitIcon />
          : null}
          {item.title === 'Square' ?
            <SquareIcon />
          : null}
        </View>
        <Text style={styling.sliderItemText}>{item.title}</Text>
      </View>
    </TouchableOpacity>
  )
}

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

export default function TermsModal(props) {
  const { visible, setVisible } = props;
  return (
    <Portal theme={theme}>
      <Modal
        visible={visible}
        theme={theme}
        contentContainerStyle={styles.modal}
        dismissable={false}
      >
        <ScrollView>
          <Headline theme={theme}>{I18n.t('termsModal.termsService')}</Headline>
          <Text>{I18n.t('termsModal.policy')}</Text>
          <Button mode="contained" theme={theme} color="#3E81FD" style={styles.button} onPress={() => setVisible(false)}>{I18n.t('termsModal.ok')}</Button>
        </ScrollView>
      </Modal>
    </Portal>
  );
}

function AppointmentInfo({ theme, appointment }) {
  const { colors } = theme;

  const isTablet = DeviceInfo.isTablet();
  return (
    <View style={{ marginTop: 24 }}>
      {isTablet && <Text style={styles.title}>Appointment Information</Text>}
      <Section
        name={appointment?.date}
        icon="calendar-blank-outline"
        color={colors.accent}
      />
      <Section
        name={`${appointment?.startTime}-${appointment?.endTime}`}
        icon="clock-outline"
        color={colors.accent}
      />
      <Section
        name={appointment?.tags[0]}
        icon="plus-box"
        color={colors.accent}
      />
    </View>
  );
}

StorePinCode = ({ navigation }) => (
  <Formik
    initialValues={{ pincode: '' }}
    onSubmit={(values, actions) => {
      storeData(values.pincode, 'pincode').then(() => {
        navigation.navigate('Root');
      });

      setTimeout(() => {
        actions.setSubmitting(false);
      }, 1000);
    }}
  >
    {(formikProps) => (
      <>
        <FormInput
          label={I18n.t('pinCode.storePinCode.enterPinCode')}
          formikProps={formikProps}
          formikKey="pincode"
          placeholder="123456"
          keyboardType="numeric"
        />
        {formikProps.isSubmitting ? (
          <ActivityIndicator />
        ) : (
          <Button onPress={formikProps.handleSubmit}>
            <Text>{I18n.t('global.submit')}</Text>
          </Button>
        )}
      </>
    )}
  </Formik>
)

export default function Login() {
  const id = useSelector(state => state.loginReducer.id);
  const dispatch = useDispatch();
  const onLogin = () => dispatch(loginActions.requestLogin('test', '1234'));

  return (
    <View style={styles.container}>
      <Text style={styles.login}>Login Status : {id}</Text>
      <Button icon="camera" mode="outlined" onPress={onLogin}>
        Login
      </Button>
    </View>
  );
}

Household = () => (
  <View>
    <View marginLeft="auto" marginRight="auto">
      <ComingSoonSVG width={200} height={200} />
    </View>
    <View marginLeft="auto" marginRight="auto">
      <Text marginLeft="auto" marginRight="auto">Coming Soon</Text>
    </View>
  </View>
)

NavLink = ({ navigation, text, routeName, disabled, theme }) => {
  return (
    <TouchableRipple
      disabled={disabled}
      onPress={() => navigation.navigate(routeName)}
    >
      <Text style={{ ...styles.link, color: theme.colors.primary }}>
        {text}
      </Text>
    </TouchableRipple>
  );
}

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

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

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

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

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

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

Item = ({ item }) => {
  const { id, name, startTime, endTime, tags, avatar } = item;
  const navigation = useNavigation();
  const isTablet = DeviceInfo.isTablet();

  const dispatch = useDispatch();
  const onSelected = () => {
    dispatch(appointmentActions.appointmentSelected(id));
    if (!isTablet) {
      navigation.navigate('AppointmentDetail');
    }
  };

  return (
    <Card style={styles.card}>
      <ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
      <Card.Content>
        <Divider />
        <Text style={styles.duration}>
          {startTime} - {endTime}
        </Text>
        <View style={styles.tags}>
          {tags.map((itx, i) => {
            const { labelColor, buttonColor } = random_rgba();
            return (
              <Button
                key={i}
                mode="contained"
                disabled
                compact
                uppercase={false}
                style={[styles.tag, { backgroundColor: buttonColor }]}
                labelStyle={[styles.tagLabel, { color: labelColor }]}>
                {itx}
              </Button>
            );
          })}
        </View>
      </Card.Content>
    </Card>
  );
}

export function Dropdown({
  onValueChange,
  selectedValue,
  style,
  testID,
  enabled,
  mode,
  itemStyle,
  children,
  ...rest
}) {
  const [open, setOpen] = React.useState(false);
  const [size, onLayout] = useComponentSize();
  return (
    <Menu
      visible={open}
      onDismiss={() => setOpen(false)}
      anchor={
        <TextInput
          style={style}
          right={
            <TextInput.Icon onPress={() => setOpen(true)} name="chevron-down" />
          }
          mode={mode}
          value={
            [].concat(children).find((i) => i.props.value === selectedValue)
              ?.props.label ?? selectedValue
          }
          disabled={enabled === false}
          editable={false}
          onLayout={onLayout}
          render={({ style, value, onLayout }) => (
            <TouchableWithoutFeedback
              onPress={enabled === false ? undefined : () => setOpen(true)}
            >
              <View
                style={{ paddingLeft: 14, display: "flex", flexDirection: "row", alignSelf: "stretch", flex: 1, alignItems: "center" }}
                onLayout={onLayout}
              >
                <Text style={{fontSize:16}}>{value}</Text>
              </View>
            </TouchableWithoutFeedback>
          )}
          {...rest}
        />
      }
      style={{
        marginTop: size?.height,
        width: size?.width,
      }}
    >
      <ScrollView style={{ maxHeight: 400 }}>
        {[].concat(children).map((item) => (
          <Menu.Item
            style={itemStyle}
            disabled={item.props.value === selectedValue}
            onPress={() => {
              onValueChange(item.props.value);
              setOpen(false);
            }}
            title={item.props.label}
          />
        ))}
      </ScrollView>
    </Menu>
  );
}

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

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

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

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

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

Detail = ({ title, value }) => (
  <View style={styles.detail}>
    <Text style={styles.heading}>{title} : </Text>
    <Text style={styles.value}>{' ' + value}</Text>
  </View>
)

PostShare = ({
  theme,
  postsSingleGet,
  postsShare,
  postsShareRequest,
  watermark,
  handleWatermark,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <NativeError
        handleCancelPress={() => {}}
        titleText={t('All good!')}
        messageText={t('This post has been saved')}
        actionText={t('Done')}
        status={postsShare.status}
        triggerOn="success"
      />

      <View style={styling.form}>
        <Avatar
          size="large"
          thumbnailSource={{ uri: path(['data', 'mediaObjects', '0', 'url1080p'])(postsSingleGet) }}
          imageSource={{ uri: path(['data', 'mediaObjects', '0', 'url1080p'])(postsSingleGet) }}
        />
      </View>

      <View style={styling.form}>
        <Text style={styling.text}>{t('Share verified REAL post')}</Text>
        <Text style={styling.text}>{t('Prove your post is verified by sharing a link to your REAL profile in it\'s description')}</Text>
      </View>

      <View style={styling.form}>
        <DefaultButton label={t('Copy to Photos')} onPress={() => postsShareRequest({
          photoUrl: path(['data', 'mediaObjects', '0', 'url'])(postsSingleGet),
          type: 'cameraroll',
          title: 'Camera roll export',
          watermark,
        })} loading={postsShare.status === 'loading' && postsShare.payload.type === 'cameraroll'} />
      </View>
      <View style={styling.form}>
        <DefaultButton label={t('Share to Instagram')} onPress={() => postsShareRequest({
          photoUrl: path(['data', 'mediaObjects', '0', 'url'])(postsSingleGet),
          type: 'instagram',
          title: 'Instagram export',
          watermark,
        })} loading={postsShare.status === 'loading' && postsShare.payload.type === 'instagram'} />
      </View>
      <View style={styling.form}>
        <DefaultButton label={watermark ? t('Remove watermark') : t('Add watermark')} mode="outline" onPress={handleWatermark} />
      </View>
    </View>
  )
}

function SectionItem({ icon, name, color }) {
  return (
    <View style={styles.section}>
      <IconButton icon={icon} color={color} size={20} onPress={() => {}} />
      <Text style={styles.name}>{name}</Text>
    </View>
  );
}

render() {
    const {
      name,
      posts,
      photoURL,
      love,
      meh,
      sad,
      isBottomSheetOpen,
    } = this.state;
    return (
      <View style={styles.profileContainer}>
        <BottomSheet
          isOpen={isBottomSheetOpen}
          closeBottomSheet={() => this.setBottomSheet(false)}
          options={[
            {text: 'Delete Post', onPress: () => this.handleDeletePost()},
          ]}
        />
        <View style={styles.fixedTopHeader}>
          <ActiveImage
            uri={photoURL}
            style={styles.userImage}
            size={width / 4}
          />
          <Headline style={Styles.fontLarge}>{name}</Headline>
          <View style={styles.fixedTopHeaderInnerSection}>
            <View style={styles.fixedTopHeaderCards}>
              <Text style={Styles.fontMedium}>{posts.length}</Text>
              <Text style={Styles.fontMedium}>POSTS</Text>
            </View>
            <View style={styles.fixedTopHeaderCards}>
              <Text style={[Styles.fontMedium, {color: 'red'}]}>{love}</Text>
              <Icon name="heart" size={width * 0.06} color="red" />
            </View>
            <View style={styles.fixedTopHeaderCards}>
              <Text style={[Styles.fontMedium, {color: 'green'}]}>{meh}</Text>
              <Icon name="meh" size={width * 0.06} color="green" />
            </View>
            <View style={styles.fixedTopHeaderCards}>
              <Text style={[Styles.fontMedium, {color: 'yellow'}]}>{sad}</Text>
              <Icon name="frown" size={width * 0.06} color="yellow" />
            </View>
          </View>
        </View>
        <ScrollView style={styles.scrollBottomView} onScrollAnimationEnd>
          {this.renderPosts()}
        </ScrollView>
      </View>
    );
  }

export default function Reports() {
  return (
    <View style={styles.container}>
      <Text style={styles.login}>Reports</Text>
    </View>
  );
}

Story = ({
  theme,
  postsStoriesGet,
  
  countStories,
  currentStory,
  onNextStory,
  onPrevStory,
  onCloseStory,
  usersGetProfile,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const story = path(['data', currentStory])(postsStoriesGet)

  if (!story) {
    return null
  }
  
  return (
    <View style={styling.root} key={currentStory}>
      <CameraTemplate
        steps={(
          <StepsTemplate steps={countStories} currentStep={currentStory} />
        )}
        header={(
          <CameraHeaderTemplate
            content={(
              <HeaderComponent story={story} usersGetProfile={usersGetProfile} />
            )}
            handleClosePress={onCloseStory}
          />
        )}
        content={(
          <ImageTemplate
            thumbnailSource={{ uri: path(['mediaObjects', '0', 'url64p'])(story) }}
            imageSource={{ uri: path(['mediaObjects', '0', 'url4k'])(story) }}
            resizeMode="contain"
          />
        )}
        footer={(
          <View style={{ padding: 12, flex: 1, flexDirection: 'column-reverse' }}>
            <Text>{story.text}</Text>
          </View>
        )}
        selector={(
          <View style={{ padding: 12 }}>
            <ReactionsPreviewTemplate
              post={story}
            />
          </View>
        )}
        wrapper={(
          <React.Fragment>
            <TouchableOpacity style={styling.wrapperLeft} onPress={onPrevStory} />
            <TouchableOpacity style={styling.wrapperRight} onPress={onNextStory} />
          </React.Fragment>
        )}
      />
    </View>
  )
}

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

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

  return (
    <View style={styling.root}>
      <View style={styling.likes}>
        {path(['onymouslyLikedBy', '0', 'username'])(post) ?
          <View style={styling.profile}>
            <Avatar
              size="micro"
              thumbnailSource={{ uri: path(['onymouslyLikedBy', '0', 'photoUrl64p'])(post) }}
              imageSource={{ uri: path(['onymouslyLikedBy', '0', 'photoUrl64p'])(post) }}
            />
          </View>
        : null}

        {path(['onymouslyLikedBy', '0', 'username'])(post) ?
          <React.Fragment>
            {path(['anonymousLikeCount'])(post) + path(['onymousLikeCount'])(post) > 1 ?
              <Text style={styling.text}>
                {t('Liked by {{username}} and many others', {
                  username: path(['onymouslyLikedBy', '0', 'username'])(post),
                  // count: path(['anonymousLikeCount'])(post) + path(['onymousLikeCount'])(post) - 1,
                })}
              </Text>
            :
              <Text style={styling.text}>
                {t('Liked by {{username}}', {
                  username: path(['onymouslyLikedBy', '0', 'username'])(post),
                })}
              </Text>
            }
          </React.Fragment>
        : null}

        {!path(['onymouslyLikedBy', '0', 'username'])(post) ?
          <React.Fragment>
            {path(['anonymousLikeCount'])(post) + path(['onymousLikeCount'])(post) >= 1 ?
              <Text style={styling.text}>
                {t('Liked by {{count}} people', {
                  count: path(['anonymousLikeCount'])(post) + path(['onymousLikeCount'])(post)
                })}
              </Text>
            : null}

            {path(['anonymousLikeCount'])(post) + path(['onymousLikeCount'])(post) < 1 ?
              <Text style={styling.text}>
                {t('No reactions yet')}
              </Text>
            : null}
          </React.Fragment>
        : null}
      </View>
    </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>
    );
  }