react-native-paper#Text JavaScript Examples

SmallCardsCarousel = ({
  puenteForms, navigateToNewRecord, setView, surveyee, setUser, pinForm
}) => (
  <ScrollView horizontal>
    {puenteForms.map((form) => (
      <Card
        key={form.tag}
        style={styles.cardSmallStyle}
        onPress={() => {
          if (setUser) {
            setView('Forms');
            navigateToNewRecord(form.tag, surveyee);
          } else {
            navigateToNewRecord(form.tag);
          }
        }}
        onLongPress={pinForm ? () => pinForm(form) : null}
      >
        <View style={styles.cardContainer}>
          <form.image height={40} style={styles.svg} />
          <View style={styles.textContainer}>
            <Text style={styles.text}>
              {I18n.t(form.name)}
            </Text>
          </View>
        </View>

      </Card>
    ))}
  </ScrollView>
)

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

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

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

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

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

OrderConfirmed = ({ navigation }) => {

    const goToHome = () => {
        navigation.dispatch(
            CommonActions.reset({
                index: 0,
                routes: [
                    {
                        name: 'HomeMain',
                    },
                ],
            })
        );
    }

    return (
        <View style={{
            height: Dimensions.get("window").height,
            backgroundColor: colors.back,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <Icon name="checkbox-marked-circle-outline" size={100} color={colors.accentPrimary}></Icon>
            <Text style={{
                fontSize: 17, color: colors.accentPrimary, marginTop: 10,
            }}>Your Order Is Confirmed</Text>
            <Button
                icon="home"
                color={colors.accentPrimary}
                style={{
                    marginTop: 20
                }}
                dark
                mode="contained"
                size={20}
                onPress={() => goToHome()}
            >Home</Button>
        </View>
    )
}

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

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

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function NameScreen({ navigation }) {
  const dispatch = useGlobals()[1];
  const [name, setName] = React.useState();
  const { colors } = useTheme();
  const buttonDisabled = !name || name.length < 2;
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { name },
    });
    navigation.push('BirthDate');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Aquarius width={60} height={60} style={styles.aquarius} />
      <Backgrounds.Constellation
        color={colors.text}
        dotColor={colors.primary}
        height={180}
        width={180}
        style={styles.constellation}
      />
      <View style={{ flex: 0.5 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t("What's your name?")}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            'In order to give you accurate and personal information we need to know some info'
          )}
        </Text>
      </View>
      <View style={styles.inputContainer}>
        <CustomInput
          value={name}
          placeholder={i18n.t('Write here')}
          onChangeText={(text) => setName(text)}
          style={{ fontSize: 12 }}
          maxLength={20}
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button
          mode="contained"
          disabled={buttonDisabled}
          onPress={_handleContinue}
        >
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

AvatarPicker = ({
  theme,
  navigation,
  avatar,
  postsCreate,
  postsCreateRequest,
  handleCameraPress,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <View style={styling.avatar}>
        {typeof avatar === 'string' && avatar.length ?
          <View style={styling.preview}>
            <Avatar
              size="large"
              thumbnailSource={{ uri: avatar }}
              imageSource={{ uri: avatar }}
            />
          </View>
        : null}

        {typeof avatar !== 'string' || !avatar.length ?
          <TouchableOpacity style={styling.preview} onPress={handleCameraPress}>
            <View style={styling.wrapper}>
              <CameraIcon fill={theme.colors.text} style={styling.icon} />
            </View>
            <RNCamera
              key="camera"
              captureAudio={false}
              style={styling.camera}
            />
          </TouchableOpacity>
        : null}
      </View>

      <View style={styling.form}>
        <Text style={styling.text}>{t('Please select a high quality photo which has not been doctored or modified in any way')}</Text>
      </View>

      {(typeof avatar === 'string' && avatar.length) ?
        <View style={styling.form}>
          <DefaultButton label={t('Upload new Photo')} onPress={postsCreateRequest} disabled={postsCreate.status === 'loading'} />
        </View>
      : null}

      {(typeof avatar !== 'string' || !avatar.length) ?
        <View style={styling.form}>
          <DefaultButton label={t('Take a new Photo (Camera)')} onPress={handleCameraPress} disabled={postsCreate.status === 'loading'} />
        </View>
      : null}

      {postsCreate.status !== 'loading' ?
        <View style={styling.form}>
          <DefaultButton label={t('Skip')} mode="outline" onPress={() => navigation.navigate('Main')} />
        </View>
      : null}

      {postsCreate.status === 'loading' ?
        <View style={styling.form}>
          <DefaultButton label={t('Uploading')} mode="outline" disabled loading />
        </View>
      : null}
    </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>
    );
  }

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

Checkout = ({ navigation }) => {
    const [visible, setVisible] = React.useState(false);
    const [orderId, setOrderId] = React.useState(Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5));
    const [content, setContent] = React.useState(true)
    const [processing, setProcessing] = React.useState(false)

    const { order, globalTableId, user, restro, token } = React.useContext(GlobalContext)

    const OfflineContent = {
        title: "Offline",
        content: ['Step 1 : Lorem ipsum dolor sit amet ', 'Step 2 : Lorem ipsum dolor sit amet ', 'Step 3 : Lorem ipsum dolor sit amet ']
    }
    const OnlineContent = {
        title: "Online",
        content: ['Step 1 : Lorem ipsum dolor sit amet ', 'Step 2 : Lorem ipsum dolor sit amet ', 'Step 3 : Lorem ipsum dolor sit amet ']
    }

    const checkIfPaid = () => {

        setProcessing(true)
        const newDate = new Date();
        fetch(`${apiUrl}/orderplace`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            body: JSON.stringify({
                "tableId": globalTableId,
                "orderId": orderId,
                "menu": order.menu,
                "name": restro.name,
                "address": restro.address,
                "date": newDate
            })
        }).then((res) => res.json())
            .then((data) => {
                if (data.error) {
                    Alert.alert("Sorry, something went wrong");
                }
                else {
                    socket.emit("orderPlaced", { globalTableId, "menu": order.menu, "username": user.name, orderId, "restroId": restro._id });
                    socket.on("paid", (oID) => {
                        if (oID === orderId) {
                            navigation.dispatch(
                                CommonActions.reset({
                                    index: 0,
                                    routes: [
                                        {
                                            name: 'OrderConfirmed',
                                        },
                                    ],
                                })
                            );
                        }
                    })
                }
            })
    }

    return (
        <View style={styles.container}>
            <Modal
                animationType="fade"
                transparent
                statusBarTranslucent
                visible={visible}
                onRequestClose={() => setVisible(!visible)}
            >
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={{
                            fontSize: 20
                        }}>Instuctions for {content ? OfflineContent.title : OnlineContent.title} Payment</Text>
                        <View style={{
                            margin: 10
                        }}>
                            <Text style={{ margin: 5, fontSize: 15 }}>Step 2 : Lorem ipsum dolor sit amet  </Text>
                            <Divider />
                            <Text style={{ margin: 5, fontSize: 15 }}>Step 3 : Lorem ipsum dolor sit amet  </Text>
                            <Divider />
                        </View>

                        <Button
                            onPressFunction={() => {
                                setVisible(!visible);
                            }}
                        >
                            Close
                        </Button>
                    </View>
                </View>
            </Modal>
            <Header navigation={navigation} isBack>Checkout</Header>
            <View style={{ margin: 20, marginTop: 15 }}>
                <View style={{
                    backgroundColor: "white",
                    borderRadius: 20,
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.8,
                    shadowRadius: 2,
                    elevation: 5
                }}>
                    <View style={{ padding: 20, paddingBottom: 15 }}>
                        <Text style={{
                            fontSize: 20,
                            marginBottom: 10,
                            fontFamily: "ProductSansBold",
                        }}>Order</Text>
                        <View style={{
                            maxHeight: 300,
                        }}>
                            <View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                                <Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Name</Text>
                                <Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Quantity</Text>
                                <Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Price</Text>
                                <Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Total Price</Text>
                            </View>
                            <FlatList
                                data={order.menu}
                                renderItem={({ item }) => (
                                    item.count ?
                                        <View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                                            <Text style={{ flex: 1, fontFamily: "ProductSans" }}>{item.item}</Text>
                                            <Text style={{ flex: 1, fontFamily: "ProductSans" }}>{item.count}</Text>
                                            <Text style={{ flex: 1, fontFamily: "ProductSans" }}>₹{item.price}</Text>
                                            <Text style={{ flex: 1, fontFamily: "ProductSans" }}>₹{item.price * item.count}</Text>
                                        </View> : null
                                )}
                            />
                        </View>
                    </View>
                    <View style={{
                        height: 50,
                        borderBottomEndRadius: 20,
                        borderBottomLeftRadius: 20,
                        backgroundColor: "#2ce66d",
                        alignItems: "center",
                        flexDirection: "row",
                        justifyContent: "space-around"
                    }}>
                        <Text style={{
                            fontFamily: "ProductSansBold",
                            color: "#fff",
                            fontSize: 22
                        }}>Total</Text>
                        <Text style={{
                            fontSize: 22,
                            textAlign: "right",
                            color: "#fff",
                            marginLeft: 10,
                            fontFamily: "ProductSansBold"
                        }}>₹ 300</Text>
                    </View>
                </View>

                <View style={{
                    backgroundColor: "white",
                    padding: 20,
                    borderRadius: 20,
                    marginTop: 20,
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.8,
                    shadowRadius: 2,
                    elevation: 5
                }}>
                    <Text style={{ fontSize: 20, fontFamily: "ProductSansBold", marginBottom: 15 }}>Pay for your Order</Text>
                    <Text style={{ color: "#555", fontFamily: "ProductSans" }}>Pay your Bill using one of the preffered methods</Text>

                    <View style={{
                        marginTop: 10, flexDirection: "row", justifyContent: "space-around", alignItems: "center"
                    }}>
                        <Button colorBack="#54cfff" onPressFunction={() => { setContent(true); setVisible(true) }}> Pay Offline</Button>
                        <Button colorBack="#ffaa54" onPressFunction={() => { setContent(false); setVisible(true) }}> Pay Online</Button>
                    </View>
                </View>

                <View style={{
                    backgroundColor: "white",
                    padding: 20,
                    marginTop: 20,
                    borderRadius: 20,
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.8,
                    shadowRadius: 2,
                    elevation: 5
                }}>
                    <Text style={{ fontSize: 20, fontFamily: "ProductSansBold", marginBottom: 15 }}>Confirm Order</Text>
                    <Text style={{ color: "#555", fontFamily: "ProductSans", marginBottom: 10 }}>Pay your Bill using one of the preffered methods</Text>
                    {
                        processing ?
                            <View style={{ marginTop: 15, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
                                <Text style={{ color: colors.accentPrimary, marginRight: 10, fontFamily: "ProductSans" }} >Processing</Text>
                                <ActivityIndicator animating={true} color={colors.accentPrimary} />
                            </View> :
                            <Button
                                onPressFunction={() => checkIfPaid()}
                            >
                                Confirm
                </Button>
                    }
                </View>

            </View>
        </View >
    )
}

ResidentPage = ({
  fname, lname, nickname, city, picture, selectPerson, setSelectPerson,
  puenteForms, navigateToNewRecord, setSurveyee, setView
}) => {
  const [pictureUrl, setPictureUrl] = useState();
  const [demographics, setDemographics] = useState(true);
  const [forms, setForms] = useState(false);
  const [household, setHousehold] = useState(false);

  useEffect(() => {
    const pic = picture;
    if (pic) {
      setPictureUrl({ uri: pic.url });
    }
  }, []);

  const showDemographics = () => {
    setForms(false);
    setHousehold(false);
    setDemographics(true);
  };

  const showForms = () => {
    setHousehold(false);
    setDemographics(false);
    setForms(true);
  };

  const showHousehold = () => {
    setForms(false);
    setDemographics(false);
    setHousehold(true);
  };
  return (
    <View>
      <Button icon="arrow-left" width={100} onPress={() => setSelectPerson()}>
        {I18n.t('dataCollection.back')}
      </Button>
      <View style={styles.picNameContainer}>
        <Image
          style={styles.profPic}
          source={pictureUrl}
        />
        <View style={{ margin: 7 }}>
          <View style={styles.nameContainer}>
            <Text style={[styles.name, { fontWeight: 'bold' }]}>{`${fname} ${lname}`}</Text>
          </View>
          <Text style={styles.name}>{`"${nickname}"`}</Text>

          {/* <Button
            style={styles.button}
            contentStyle={styles.buttonContent}
          >
            {I18n.t('findResident.residentPage.household.editProfile')}
          </Button> */}
        </View>
      </View>
      <View
        style={styles.horizontalLine}
      />
      <View style={styles.navigationButtonsContainer}>
        <Button style={styles.navigationButton} labelStyle={styles.navigationButtonText} onPress={() => showDemographics()}>{I18n.t('findResident.residentPage.household.demographics')}</Button>
        <Button style={styles.navigationButton} labelStyle={styles.navigationButtonText} onPress={() => showForms(true)}>{I18n.t('findResident.residentPage.household.forms')}</Button>
        <Button
          style={styles.navigationButton}
          labelStyle={styles.navigationButtonText}
          onPress={() => showHousehold(true)}
        >
          {I18n.t('findResident.residentPage.household.household')}
        </Button>
      </View>
      <View
        style={styles.horizontalLine}
      />
      {
        demographics && (
          <Demographics
            dob={selectPerson.dob}
            city={city}
            community={selectPerson.communityname}
            province={selectPerson.province}
            license={selectPerson.license}
            selectPerson={selectPerson}
          />
        )
      }
      {
        forms && (
          <Forms
            puenteForms={puenteForms}
            navigateToNewRecord={navigateToNewRecord}
            surveyee={selectPerson}
            setSurveyee={setSurveyee}
            setView={setView}
          />
        )
      }
      {
        household && (
          <Household />
        )
      }
      <Button onPress={() => setSelectPerson()}>{I18n.t('findResident.residentPage.household.goBack')}</Button>
    </View>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function BirthDateScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { colors } = useTheme();
  const [date, setDate] = React.useState(new Date(642449499000));
  const [sign, setSign] = React.useState(
    ZodiacCalculator(date.getDate(), date.getMonth() + 1)
  );
  const [show, setShow] = React.useState(true);
  React.useLayoutEffect(() => {
    setSign(ZodiacCalculator(date.getDate(), date.getMonth() + 1));
  }, [date]);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    Platform.isAndroid && setShow(Platform.isIos);
    setDate(currentDate);
  };
  const showDatePicker = () => {
    setShow(true);
  };
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { birthDate: date.getTime(), sign },
    });
    navigation.push('Sex');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Scorpio width={60} height={60} style={styles.scorpio} />
      <Backgrounds.ConstellationSimple
        color={colors.text}
        dotColor={colors.primary}
        height={200}
        width={200}
        style={styles.constellation}
      />
      <View style={{ flex: 1 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t('Your date of birth')}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            '{name}, to give you accurate and personal information we need to know some info',
            { name: session.name }
          )}
        </Text>
      </View>
      <View style={styles.logoContainer}>
        <Sign sign={sign} width={50} showTitle={false} height={50} />
      </View>
      <Surface style={styles.dateContainer}>
        {Platform.isAndroid && (
          <Button style={{ alignSelf: 'center' }} onPress={showDatePicker}>
            {i18n.t('Press to change')}
          </Button>
        )}
        {show && (
          <RNDateTimePicker
            value={date}
            display="spinner"
            onChange={onChange}
            on
            minimumDate={new Date(1930, 0, 0)}
            maximumDate={new Date(2010, 0, 0)}
            textColor="#ffffff"
          />
        )}
        {Platform.isAndroid && (
          <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 40 }}>{DateUtils.toEuropean(date)}</Text>
          </View>
        )}
      </Surface>
      <View style={styles.buttonContainer}>
        <Button mode="contained" disabled={!date} onPress={_handleContinue}>
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

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

Post = ({
  item,
  uid,
  postOptions,
  handleOpenPost = null,
  handleOpenAccount = null,
  handleOpenComment = () => {},
  fullPost = false,
}) => {
  const {state} = useContext(UserContext);
  const [reactionsVisible, setReactionVisibility] = useState(false);
  const hasReacted = (reactionType) => {
    if (Object.keys(item).includes(reactionType)) {
      return !!item[reactionType].find((u) => u === uid);
    }
    return false;
  };
  return (
    <Card style={styles.mainPostContainer}>
      <Card.Title
        style={styles.postTitleContainer}
        titleStyle={[styles.textHeaderContainer]}
        title={item.createdBy ? item.createdBy : 'Name'}
        left={() => {
          if (handleOpenAccount === null) {
            return (
              <LeftContent
                size={width * 0.1}
                src={item.createdByPhoto ? item.createdByPhoto : null}
              />
            );
          }
          return (
            <TouchableOpacity onPress={handleOpenAccount}>
              <LeftContent
                size={width * 0.1}
                src={item.createdByPhoto ? item.createdByPhoto : null}
              />
            </TouchableOpacity>
          );
        }}
        right={() => {
          if (item.uid === uid) {
            return (
              <TouchableOpacity
                style={styles.rightOptions}
                onPress={postOptions}>
                <Icon name="more-vertical" size={width * 0.06} color="white" />
              </TouchableOpacity>
            );
          }
          return null;
        }}
      />
      <PostBox
        onSingleTap={() => {
          if (fullPost) {
            return;
          }
          handleOpenPost();
        }}
        onDoubleTap={() => {
          if (hasReacted('love')) {
            return null;
          }
          reactToPost(state.box, item.name, 'love');
        }}>
        <ActiveImage size={width} uri={item.postURL} />
      </PostBox>
      <Card.Actions style={styles.reactionIconContainer}>
        <ReactionIcon
          iconName="heart"
          pressAction={() => reactToPost(state.box, item.name, 'love')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('love')}
        />
        <ReactionIcon
          iconName="meh"
          pressAction={() => reactToPost(state.box, item.name, 'meh')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('meh')}
        />
        <ReactionIcon
          iconName="frown"
          pressAction={() => reactToPost(state.box, item.name, 'sad')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('sad')}
        />
        <ReactionIcon
          style={{
            alignSelf: 'flex-start',
            position: 'absolute',
            right: 6,
          }}
          iconName="comment"
          pressAction={() => handleOpenComment()}
        />
      </Card.Actions>
      <Card.Content style={styles.cardComponent}>
        <Text style={Styles.fontSmall}>
          {item.love ? item.love.length : 0} Likes
        </Text>
        <TouchableOpacity
          onPress={() => {
            if (handleOpenPost === null) {
              return;
            }
            handleOpenPost();
          }}>
          {fullPost ? (
            <Text style={Styles.fontMedium}>{item.postCaption}</Text>
          ) : (
            <Text style={Styles.fontMedium}>
              {item.postCaption.length > 60
                ? `${item.postCaption.slice(0, 60)}... See More`
                : item.postCaption}
            </Text>
          )}
        </TouchableOpacity>
      </Card.Content>
      <Reactions
        isVisible={reactionsVisible}
        hideModal={() => setReactionVisibility(false)}
        data={[
          item.love ? item.love.length : 0,
          item.meh ? item.meh.length : 0,
          item.sad ? item.sad.length : 0,
        ]}
      />
    </Card>
  );
}

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

function TabBar({
  state,
  descriptors,
  navigation,
  navigationState,
  position,
  theme,
}) {
  const { colors } = theme;
  const [visible, setvisible] = React.useState(false);
  /** Indicator transition */
  const indicatorTranslateX = Animated.interpolate(position, {
    inputRange: [0, 1, 2, 3],
    outputRange: [110, 2 * width + 24, 3 * width + 24, 4 * width + 48],
  });
  const indicatorWidth = Animated.interpolate(position, {
    inputRange: [0, 1, 2, 3],
    outputRange: [140, 100, 140, 100],
  });

  const TabIcon = ({ route, index }) => {
    const { options } = descriptors[route.key];
    const label =
      options.tabBarLabel !== undefined
        ? options.tabBarLabel
        : options.title !== undefined
        ? options.title
        : route.name;

    const isFocused = state.index === index;

    const onPress = () => {
      const event = navigation.emit({
        type: 'tabPress',
        target: route.key,
        canPreventDefault: true,
      });

      if (!isFocused && !event.defaultPrevented) {
        navigation.navigate(route.name);
      }
    };

    return (
      <TouchableOpacity key={index} style={styles.tab} onPress={onPress}>
        <Text
          style={
            (styles.tabTxt,
            {
              color:
                index === navigationState.index ? colors.accent : '#bdc3c7',
            })
          }>
          {label}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <GeneralStatusBar backgroundColor="#ffff" />
      <View style={styles.tabView}>
        <Avatar.Image
          size={50}
          style={styles.icon}
          source={{
            uri: 'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
          }}
        />

        {state.routes.map((route, index) => {
          return <TabIcon route={route} index={index} />;
        })}

        <View style={styles.sideMenu}>
          <Menu
            visible={visible}
            onDismiss={() => setvisible(false)}
            anchor={
              <TouchableOpacity onPress={() => setvisible(true)}>
                <View style={styles.dropView}>
                  <Text style={styles.name}>Dr. Christian Wade</Text>
                  <Icon name="keyboard-arrow-down" size={24} color="#bdc3c7" />
                </View>
              </TouchableOpacity>
            }>
            <Menu.Item onPress={() => {}} title="Request Leave" />
            <Menu.Item onPress={() => {}} title="Provide Feeback" />

            <Divider />
            <Menu.Item onPress={() => {}} title="Check for Updates" />
            <Menu.Item onPress={() => {}} title="Logout " />
          </Menu>

          <Avatar.Image
            size={50}
            style={styles.avatar}
            source={{
              uri:
                'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
            }}
          />
          <CustomIcon name="bell" />
          <CustomIcon name="settings" />
          <CustomIcon name="magnify" />
        </View>
      </View>
      <Animated.View
        style={[
          styles.indicator,
          {
            left: indicatorTranslateX,
            backgroundColor: colors.accent,
            width: indicatorWidth,
          },
        ]}
      />
    </View>
  );
}