react-native-gesture-handler#ScrollView JavaScript Examples

export default function ItineraryList({uid}) {
  const postId = uid;
  const [itinerary, setItinerary] = React.useState([]);

  const db = Firebase.firestore();

  React.useEffect(() => {
    if (itinerary.length === 0) {
      db.collection('posts').doc(postId).get()
          .then((doc) => {
            setItinerary(doc.data().itinerary);
          })
          .catch((error) => {
            console.log('Error getting documents: ', error);
          });
    }
  });

  const getActivities = () => {
    if (itinerary !== undefined) {
      return Object.keys(itinerary).map(
          // eslint-disable-next-line react/jsx-key
          (key) => <ItineraryActivity time={key} activity={itinerary[key]} />);
    } else {
      return <Text>Loading...</Text>;
    }
  };

  return (
    <ScrollView contentContainerStyle={{flexGrow: 1, alignSelf: 'flex-start'}}>
      {getActivities()}
    </ScrollView>
  );
}

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

ResourceTypePicker = ({
  allTypeFilters,
  selectResourceTypeAction,
  selectedResourceType,
}) => (
  <View>
    <ScrollView
      style={styles.root}
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.contentContainerStyle}
    >
      {
        allTypeFilters
          .filter(({ typeIsEnabled, hasItemsInDateRange }) => typeIsEnabled && hasItemsInDateRange)
          .map(({
            type, label, hasCollectionItems, hasHighlightedItems,
          }) => (
            <CategoryButton
              key={type}
              resourceType={type}
              label={label}
              isActive={selectedResourceType === type}
              hasCollectionItems={hasCollectionItems}
              hasHighlightedItems={hasHighlightedItems}
              selectResourceTypeAction={selectResourceTypeAction}
            />
          ))
      }
    </ScrollView>
  </View>
)

ProvidersSummary = ({ providers, allResourcesByProvider }) => (
  <View style={styles.root}>
    <RecordCount
      emphasizeProviders
    />
    <ScrollView style={styles.scrollContainer}>
      <View style={styles.resourceTypeContainer}>
        <View style={styles.header}>
          <DataRow
            isHeadingRow
            count=""
            label=""
            oldest="Oldest"
            latest="Latest"
          />
        </View>
        {providers.map(({ id, name }) => {
          const items = allResourcesByProvider[id];
          return (
            <DataRow
              key={name}
              count={String(items.length)}
              label={name}
              oldest={formatDateShortYear(items[0]?.timelineDate)}
              latest={formatDateShortYear(items[items.length - 1]?.timelineDate)}
            />
          );
        })}
      </View>
    </ScrollView>
  </View>
)

RecordsSummary = ({ recordsByType }) => (
  <View style={styles.root}>
    <RecordCount
      emphasizeProviders={false}
    />
    <ScrollView style={styles.scrollContainer}>
      <View style={styles.resourceTypeContainer}>
        <View style={styles.header}>
          <DataRow
            isHeadingRow
            count=""
            label=""
            oldest="Oldest"
            latest="Latest"
          />
        </View>
        {recordsByType.map(({ type, label, items }) => (
          <DataRow
            key={type}
            count={String(items.length)}
            label={label}
            oldest={formatDateShortYear(items[0]?.timelineDate)}
            latest={formatDateShortYear(items[items.length - 1]?.timelineDate)}
          />
        ))}
      </View>
    </ScrollView>
  </View>
)

export default function Favorites() {
  return (
    <View style={Styles.container}>
      <ScrollView
        style={Styles.container}
        contentContainerStyle={Styles.container_content}
      >
        <View style={Styles.card}>

          <Text style={Styles.mainHeader} testID='profile-favorites'>
            Favorites!</Text>

          {/* Populate this eventually with post cards */}
        </View>
      </ScrollView>
    </View>
  );
}

ProfileScreen = () => (
  <SafeAreaView style={styles.root}>
    <StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
    <Header style={styles.header}>
      <Body>
        <Title style={styles.headerText}>Profile</Title>
      </Body>
    </Header>
    <UserInfo />
    <ScrollView style={styles.scrollContainer}>
      <Demographics />
      <Data />
    </ScrollView>
    <View style={styles.logoutContainer}>
      <Logout>
        <TouchableOpacity style={styles.logout}>
          <Text style={styles.logoutText}>
            Logout
          </Text>
        </TouchableOpacity>
      </Logout>
    </View>
  </SafeAreaView>
)

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Disaster Resiliency</Text>
      <Text style={styles.content}>
        Due to climate change, floods are becoming more frequent and more severe,
        leading to specific issues for affected communities. This solution
        starter kit looks to aid potential victims better prepare for, act
        during, and recover from a flood. 
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Disasters-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

function ReportDetailScreen({ navigation, reportCaseTrigger }) {
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
    >
      <ReportForm />
    </ScrollView>
  );
}

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Community Collaboration</Text>
      <Text style={styles.content}>
        There is a growing interest in enabling communities to cooperate among
        themselves to solve problems in times of crisis, whether it be to
        advertise where supplies are held, offer assistance for collections, or
        other local services like volunteer deliveries.
      </Text>
      <Text style={styles.content}>
        What is needed is a solution that empowers communities to easily connect
        and provide this information to each other.
      </Text>
      <Text style={styles.content}>
        This solution starter kit provides a mobile application, along with
        server-side components, that serves as the basis for developers to build
        out a community cooperation application that addresses local needs for
        food, equipment, and resources.
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Cooperation-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <View style={styles.header}></View>
                    <Image style={styles.avatar} source={{ uri: 'http://getplaced.pythonanywhere.com/media/images/profile/Get_placed_logo_RcjthfI.jpeg' }} />
                    <View style={styles.body}>
                        <View style={styles.bodyContent}>
                            <Text style={styles.name}>Get Placed</Text>
                            <Text style={styles.info}>Let us give the best</Text>
                            <Text style={styles.description}>Hello and welcome to Get Placed! We want to connect with people and connect those people with information. At Get Placed, we help you to find the best courses, certifications and tutorials online.
                                Get Placed provides information of upcoming off-campus hiring drives, Internships <Text style={{ color: "#00BFFF" }} onPress={() => Linking.openURL('http://getplaced.pythonanywhere.com/Terms-and-condition/')}>read more</Text> </Text>

                        </View>
                    </View>
                </View>
            </ScrollView>
        );
    }

function HomeScreen(props) {
  const [trackingStatus, setTrackingStatus] = useState(false);

  const {
    clearAllTrigger,
    downloadInfectionsTrigger,
    generateWarningsTrigger,
    generateFakeInfectionsTrigger,
    filteredWarningsCount,
    positions,
    tracks,
    positionsCount,
    tracksCount,
    warningsCount,
    navigation
  } = props;

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}
      >
        {/*<WarningList navigation={navigation} />*/}
        {/*<WarningGenerator navigation={navigation} />*/}

        <View style={styles.getStartedContainer}>
          <Text>
            {trackingStatus ? "Tracking active" : "Tracking disabled"}
          </Text>
          <Button
            title={`Start tracking current: (${positionsCount})`}
            onPress={() => setTrackingStatus(startLocationTracking)}
          />

          <Button
            title={`Stop tracking`}
            onPress={() => {
              stopLocationTracking();
              setTrackingStatus(false);
            }}
          />

          <Button
            title={`Get data from server current: ${tracksCount}`}
            onPress={e => downloadInfectionsTrigger()}
          />
          <Text>Download data in the area you were in from the server</Text>
          <Button
            title={`Generate warnings: ${filteredWarningsCount}/${warningsCount}`}
            onPress={e => generateWarningsTrigger({ positions, tracks })}
          />
          <Text>Generates the warnings locally</Text>

          <Button
            title={`Generate fake infection`}
            onPress={e =>
              generateFakeInfectionsTrigger(positions[positions.length - 1])
            }
          />
          <Text>
            Generates some fake points around you last position (local)
          </Text>
          <Button title="reset" onPress={e => clearAllTrigger()} />
        </View>
      </ScrollView>
    </View>
  );
}

export default function ConstantStories() {
  return (
    <ScrollView horizontal={true}>
      <View
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          marginStart: 10,
          marginEnd: 10,
          marginTop: 10,
          marginBottom: 5,
          alignItems: 'center',
        }}>
        <TouchableOpacity>
          <View
            style={{
              backgroundColor: colors.bottomBackGround,
              width: 64,
              height: 64,
              borderRadius: 100,
              alignItems: 'center',
              justifyContent: 'center',
              borderWidth: 1,
              borderColor: '#262626',
            }}>
            <Image
              source={images.addIcon}
              style={{width: 20, height: 20, borderRadius: 100}}
            />
          </View>
        </TouchableOpacity>
        <Text
          style={{
            color: 'white',
            fontSize: 12,
            marginTop: 5,
          }}>
          New
        </Text>
      </View>
      <StoryListItem name="Holiday" />
    </ScrollView>
  );
}

render() {
    const {
      dp,
      box,
      user,
      post,
      isErrorManagerVisible,
      errorMessage,
      isBottomSheetOpen,
    } = this.state;
    const {state} = this.context;

    return (
      <View style={styles.postContainer}>
        <ScrollView>
          {post ? (
            <Post
              item={post}
              uid={user.uid}
              postOptions={this.handlePostOptions}
              handleOpenComment={this.handleOpenComment}
              fullPost={true}
            />
          ) : null}
        </ScrollView>
        <ErrorManager
          hideModal={() => {
            this.setErrorManager(false, '');
            this.props.navigation.goBack();
          }}
          isVisible={isErrorManagerVisible}
          message={errorMessage}
        />
        <PostOptions
          isOpen={isBottomSheetOpen}
          closeSheet={() => this.setBottomSheet(false)}
          goBack={() => this.props.navigation.goBack()}
          box={dp ? box : state.box}
          postName={post?.name}
        />
      </View>
    );
  }

render() {
		return (
			<>
				<View style={styles.topContainer}>
					<View style={styles.header}>
						<TouchableOpacity onPress={() => this.props.navigation.navigate('HomeScreen')}>
							<Ionicon style={{ color: 'white' }} size={30} name={'ios-arrow-back'} />
						</TouchableOpacity>
						<TouchableOpacity>
							<Ionicon style={{ color: "white" }} size={30} name={'ios-heart-empty'} />
						</TouchableOpacity>
					</View>
					<Image
						source={require('../../Assets/Images/signinScreenImage.png')}
						style={styles.image}
					>
					</Image>
				</View>
				<ScrollView>
					<View style={styles.titleBox}>
						<Text style={styles.title}>Paneer Butter Masala</Text>
						<RatingCard stars={4.5} />
					</View>
					<Text style={{ paddingHorizontal: 16, fontSize: 16, color: COLORS.text }}>IIT Jodhpur Canteen</Text>
					<View style={styles.bottomContainer}>
						<Text style={{ fontSize: 20 }}>About</Text>
						<Text style={{ fontSize: 16, color: COLORS.text }}>This is Some Cool Shit About Paneer Butter Masala. I love this Btw!</Text>
					</View>
					<View style={styles.bottomContainer}>
						<View style={styles.reviewHeader}>
							<Text style={{ fontSize: 20 }}>Review & Ratings</Text>
							<TouchableOpacity>
								<Entypo style={{ color: '#7300e6', marginLeft: 10 }} size={26} name={'circle-with-plus'} />
							</TouchableOpacity>
						</View>
					</View>
					<ReviewCard data={this.state.data} />
					<ReviewCard data={this.state.data} />
					<ReviewCard data={this.state.data} />
					<TouchableOpacity>
						<Text style={styles.more}>See all reviews</Text>
					</TouchableOpacity>
				</ScrollView>
			</>
		)
	}

function QuakeDetail({ route, navigation }) {
  return (
    <View style={styles.container}>
      <View style={styles.headerView}>
        <IconButton
          onPress={() => navigation.goBack()}
          name="arrow-left"
          style={styles.backIconButton}
          color={Colors.white}
        />

        <Text style={styles.titleText}>Deprem</Text>
        <Text style={styles.subtitleText}>{route.params.item.title}</Text>
        <Touchable style={styles.buttonView} onPress={() => navigation.navigate('MapDetail', { item: route.params.item })}>
          <Icon
            name="map-marker"
            color={Colors.success}
            size={40}
          />
        </Touchable>
      </View>
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.contentView}>
        <QuakeItem
          name="map-marker"
          title="Deprem Konumu"
          detail={route.params.item.lokasyon}
        />
        <QuakeItem
          name="clipboard-pulse"
          title="Deprem Şiddeti"
          detail={route.params.item.mag}
        />
        <QuakeItem
          name="calendar"
          title="Deprem Zamanı"
          detail={route.params.item.date}
        />
        <QuakeItem
          name="tape-measure"
          title="Deprem Derinliği"
          detail={route.params.item.depth}
        />
        <QuakeItem
          name="arrow-split-vertical"
          title="Deprem Enlemi"
          detail={route.params.item.lat}
        />
        <QuakeItem
          name="arrow-split-horizontal"
          title="Deprem Boylamı"
          detail={route.params.item.lng}
        />
      </ScrollView>
    </View>
  );
}

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

//   catch((error) => {
  //     //console.log(error), 
  //     this.setState({error: 'Invalid Credentials'});
  //   });
  // // })
  // .then(() => {
  //     this.props.navigation.navigate('Tabs', {
  //       screen: 'ProfileTab'
  //     }
  //     );
  //   }); 

  //   this.reauthenticate(this.state.currentPassword).then(() => {
  //     var user = firebase.auth().currentUser;
  //     user.updatePassword(this.state.newPassword).then(() => {
  //       Alert.alert("Password was changed");
  //     }).catch((error) => { console.log(error.message); });
  //   }).catch((error) => { console.log(error.message) });
  // }


  //}
  /*
  changeEmail = (currentPassword, newEmail) => {
    this.reauthenticate(currentPassword).then(() => {
      var user = firebase.auth().currentUser;
      user.updateEmail(newEmail).then(() => {
        console.log("Email updated!");
      }).catch((error) => { console.log(error); });
    }).catch((error) => { console.log(error); });
  }*/


  render() {
    return (
      <ScrollView style={Styles.container}>

        <Text style={[Styles.header, Styles.text_medium]}>
          Enter Old and New Password
          </Text>

        <Fumi
          label={'Old Password'}
          value={this.state.currentPassword}
          secureTextEntry={true}
          iconClass={FontAwesomeIcon}
          iconName={'unlock-alt'}
          onChangeText={(currentPassword) => this.setState({ currentPassword })}
          testID='old-password'
        />

        <Fumi
          label={'New Password'}
          value={this.state.newPassword}
          secureTextEntry={true}
          iconClass={FontAwesomeIcon}
          iconName={'lock'}
          onChangeText={(newPassword) => this.setState({ newPassword })}
          testID='new-password'

        />

        <View style={Styles.container_content}>
          <AwesomeButton
            backgroundColor={Colors.warning}
            width={200}
            height={50}
            onPress={() => {
              this.changePassword();
            }}
          >
            Change Password
            </AwesomeButton>
        </View>
      </ScrollView>
    );
  }

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

Buy = ({ navigation }) => {
  const [product, setProduct] = useState([]);
  const [date_array, setDate_array] = useState([]);

  const [show, setShow] = useState(false);
  const [curr_ind, setCurr_ind] = useState(0);

  const [customerName, setCustomerName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [address, setAddress] = useState('');


  useEffect(() => {
    setProduct([{ name: '', price: 0, amount: 0, expiry: '' }]);
    setDate_array([new Date()])
  }, []);


  const buyprod = async () => {

    product.forEach(async product => {
      const formdata = new FormData();
      formdata.append("name", product.name);
      formdata.append("avg_cost_price", product.price);
      formdata.append("quantity", product.amount);

      formdata.append("expiry", product.expiry);
      let myHeaders = new Headers();
      const auth_key = await AsyncStorage.getItem('auth_key');
      myHeaders.append("Authorization", `Token ${auth_key}`);


      fetch('http://chouhanaryan.pythonanywhere.com/api/buy/', {
        method: 'POST',
        headers: myHeaders,
        body: formdata,
        redirect: 'follow',
      })
        .then(res => console.log(res))
        .catch(err => console.log(err));
    });
  };



  const set_date = (e) => {
    setShow(false);

    let date_array_copy = [...date_array];
    let product_copy = [...product];

    const date = new Date(e.nativeEvent.timestamp)

    date_array_copy[curr_ind] = date;
    setDate_array(date_array_copy);

    if (date == 'Invalid Date') {
      product_copy[curr_ind].expiry = 'Choose a date and press OK';
      setProduct(product_copy);
    } else {
      const month = date.toLocaleDateString().split('/')[0];
      const day = date.toLocaleDateString().split('/')[1];
      const year = date.toDateString().split(' ')[3];
      const final_date = year + '-' + month + '-' + day;

      product_copy[curr_ind].expiry = final_date;
      setProduct(product_copy);
    }
  }


  return (
    <Container style={{ backgroundColor: '#F3F9FB' }}>
      <ScrollView>
        <Body>
          <Text style={styles.heading}>Buy Items</Text>

          {/* separator line above name, phone no. and address fields */}
          <View style={{ flex: 1, flexDirection: 'row', marginBottom: 10 }}>
            <View
              style={{
                borderColor: '#0004',
                borderWidth: 1,
                width: '90%',
                alignSelf: 'center',
                borderRadius: 2,
                marginBottom: -10,
                marginTop: 5,
              }}
            />
          </View>

          {/* customer name */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Customer Name</Label>
            <Input
              style={styles.inputArea}
              value={customerName}
              onChangeText={value => setCustomerName(value)}
            />
          </Item>

          {/* phone number */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Phone number</Label>
            <Input
              style={styles.inputArea}
              keyboardType='number-pad'
              value={phoneNumber}
              onChangeText={value => setPhoneNumber(value)}
            />
          </Item>

          {/* address */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Address</Label>
            <Input
              style={styles.inputArea}
              value={address}
              onChangeText={value => setAddress(value)}
            />
          </Item>


          {product.map((item, index) => {
            return (
              <View key={index} style={{ width: Dimensions.get('window').width }}>
                {/* for the separating line */}
                <View
                  style={{
                    borderColor: '#0004',
                    borderWidth: 1,
                    width: '90%',
                    alignSelf: 'center',
                    borderRadius: 2,
                    marginBottom: -10,
                    marginTop: 5,
                  }}
                />

                {/* Product title */}
                <Text style={styles.product_titles}>
                  Product {product.length == 1 ? '' : index + 1}
                </Text>

                {/* Product name input */}
                <Item floatingLabel style={styles.inputBox}>
                  <Label style={styles.label}>Product Name</Label>
                  <Input
                    placeholder={product[index].name}
                    style={styles.inputArea}
                    onChangeText={value => (product[index].name = value.trim())}
                  />
                </Item>

                {/* Price input */}
                <Item floatingLabel style={styles.inputBox}>
                  <Label style={styles.label}>Price</Label>
                  <Input
                    style={styles.inputArea}
                    keyboardType="numeric"
                    onChangeText={value =>
                      (product[index].price = parseFloat(value.trim()))
                    }
                  />
                </Item>

                {/* Quantity input */}
                <Item floatingLabel style={styles.inputBox}>
                  <Label style={styles.label}>No. of Items</Label>
                  <Input
                    style={styles.inputArea}
                    keyboardType="numeric"
                    onChangeText={value =>
                      (product[index].amount = parseInt(value.trim()))
                    }
                  />
                </Item>

                {/* Expiry date text */}
                <View style={{ flexDirection: 'row', flex: 1 }}>
                  <View style={styles.dateMainView}>
                    <Text
                      style={{
                        marginLeft: 4,
                        fontSize: 16,
                        marginTop: 17,
                        color: 'black',
                      }}>
                      Expiry: {product[index].expiry}
                    </Text>
                  </View>

                  <TouchableOpacity onPress={() => {
                    setCurr_ind(index);
                    setShow(true)
                  }}>
                    <Icon
                      name="calendar"
                      color="#4796BD"
                      size={30}
                      style={{
                        marginLeft: -10,
                        flex: 1,
                        marginRight: 30,
                        marginTop: 20,
                      }}
                    />
                  </TouchableOpacity>
                </View>

                {/* Date display */}
                <View>
                  <View>
                    {show && (
                      <DateTimePicker
                        testID="dateTimePicker"
                        value={new Date()}
                        mode='date'
                        is24Hour={true}
                        display="default"
                        onChange={(e) => set_date(e)}
                      />
                    )}
                  </View>
                </View>
              </View>
            );
          })}

          <TouchableOpacity
            onPress={() => {
              if (
                product[product.length - 1].name &&
                product[product.length - 1].price &&
                product[product.length - 1].amount &&
                product[product.length - 1].expiry.length === 10  // length should be 10 because for date, we have format YYYY-MM-DD, and the length of the string is thus 10
              ) {
                let copy = [...product];
                copy.push({ name: '', price: 0, amount: 0, expiry: '' });
                setProduct(copy);
                let dates_copy = [...date_array];
                dates_copy.push(new Date());
                setDate_array(dates_copy);
              } else {
                Alert.alert(
                  `Please fill all details for product ${product.length}`,
                );
              }
            }}
            style={styles.addButton}>
            <Icon name="plus" color="#4796BD" size={25} style={styles.icon} />
            <Text style={styles.addButtonText}>Add Product</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={async () => {
              let can_buy = true;
              let incomplete_product_index = 0;
              for (let i = 0; i < product.length; i++) {
                if (
                  product[i].name == '' ||
                  product[i].price == 0 ||
                  product[i].amount == 0 ||
                  product[i].expiry.length !== 10
                ) {
                  can_buy = false;
                  incomplete_product_index = i + 1;
                  break;
                }
              }
              if (!can_buy) {
                Alert.alert(
                  `Please fill valid details for product ${incomplete_product_index}`,
                );
              } else {
                await buyprod();
               await  setProduct([]);
               await  setProduct([{ name: '', price: 0, amount: 0, expiry: '' }]);
                await setDate_array([new Date()]);
                await setAddress();
                await setAddress('');
                await  setCustomerName();
                await setCustomerName('');
                await setPhoneNumber();
                await setPhoneNumber('')
              }
            }}
            style={styles.buyButton}>
            <Text style={styles.buyButtonText}>Buy</Text>
          </TouchableOpacity>
        </Body>
      </ScrollView>
    </Container>
  );
}

// export default () => (
export default function SignUp({ navigation }) {
  const [checked, setChecked] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [scrollViewScroll, setScrollViewScroll] = React.useState();
  const { register } = useContext(UserContext);
  const handleLogIn = () => {
    navigation.navigate('Sign In');
  };

  return (
    <KeyboardAvoidingView
      enabled
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ backgroundColor: theme.colors.accent, flex: 1 }}
    >
      <View>
        <Button icon="arrow-left" width={100} style={{ paddingTop: 40 }} onPress={handleLogIn}>
          Back
        </Button>
        <ScrollView
          style={{ backgroundColor: theme.colors.accent }}
          keyboardShouldPersistTaps="never"
          scrollEnabled={scrollViewScroll}
        >
          <SafeAreaView style={{ marginTop: 10 }}>
            <Formik
              initialValues={{
                firstname: '', lastname: '', email: '', phonenumber: '', password: '', password2: '', organization: ''
              }}
              onSubmit={(values, actions) => {
                if (!checked) {
                  alert(I18n.t('signUp.errorTerms')); // eslint-disable-line
                } else if (values.password !== values.password2) {
                  alert(I18n.t('signUp.errorPassword')) // eslint-disable-line
                } else {
                  register(values)
                    .then(() => navigation.navigate('Root')).catch((error) => {
                      // sign up failed alert user
                      console.log(`Error: ${error.code} ${error.message}`); // eslint-disable-line
                      alert(I18n.t('signUp.usernameError')); // eslint-disable-line
                    });
                }
                setTimeout(() => {
                  actions.setSubmitting(false);
                }, 1000);
              }}
              validationSchema={validationSchema}
            >
              {(formikProps) => (
                <>
                  <FormInput
                    label={I18n.t('signUp.firstName')}
                    formikProps={formikProps}
                    formikKey="firstname"
                    placeholder="John"
                    autoFocus
                  />
                  <FormInput
                    label={I18n.t('signUp.lastName')}
                    formikProps={formikProps}
                    formikKey="lastname"
                    placeholder="Doe"
                  />
                  <FormInput
                    label={I18n.t('signUp.email')}
                    formikProps={formikProps}
                    formikKey="email"
                    placeholder="[email protected]"
                  />
                  <FormInput
                    label={I18n.t('signUp.phoneNumber')}
                    formikProps={formikProps}
                    formikKey="phonenumber"
                    placeholder="123-456-7890"
                    keyboardType="numeric"
                  />
                  <FormInput
                    label={I18n.t('signUp.password')}
                    formikProps={formikProps}
                    formikKey="password"
                    placeholder="Password Here"
                    secureTextEntry
                  />
                  <FormInput
                    label={I18n.t('signUp.password2')}
                    formikProps={formikProps}
                    formikKey="password2"
                    placeholder="Password Here"
                    secureTextEntry
                  />
                  <Autofill
                    parameter="organization"
                    formikProps={formikProps}
                    formikKey="organization"
                    label="signUp.organization"
                    translatedLabel={I18n.t('signUp.organization')}
                    scrollViewScroll={scrollViewScroll}
                    setScrollViewScroll={setScrollViewScroll}
                  />
                  <Button mode="text" theme={theme} color="#3E81FD" style={styles.serviceButton} onPress={() => setVisible(true)}>{I18n.t('signUp.termsOfService.view')}</Button>
                  <View style={styles.container}>
                    <Text style={styles.serviceText}>
                      {I18n.t('signUp.termsOfService.acknoledgement')}
                    </Text>
                    <View style={styles.checkbox}>
                      <Checkbox
                        disabled={false}
                        color={theme.colors.primary}
                        status={checked ? 'checked' : 'unchecked'}
                        onPress={() => {
                          setChecked(!checked);
                        }}
                      />
                    </View>
                  </View>
                  {formikProps.isSubmitting ? (
                    <ActivityIndicator />
                  ) : (
                    <Button mode="contained" theme={theme} style={styles.submitButton} onPress={formikProps.handleSubmit}>{I18n.t('signUp.submit')}</Button>
                  )}

                  <TermsModal visible={visible} setVisible={setVisible} />
                </>
              )}
            </Formik>
          </SafeAreaView>
        </ScrollView>
      </View>
    </KeyboardAvoidingView>
  );
}

AssetSupplementary = ({
  selectedAsset, setSelectedAsset, surveyingOrganization, surveyingUser, setPage
}) => {
  const [selectedForm, setSelectedForm] = useState();
  const [submitting, setSubmitting] = useState(false);
  const [photoFile, setPhotoFile] = useState('State Photo String');
  const [submissionError, setSubmissionError] = useState(false);

  const validForm = () => {
    if (Object.keys(selectedAsset).length > 0 && selectedForm?.objectId) return true;
    return false;
  };

  return (
    <ScrollView>
      <Formik
        initialValues={{}}
        onSubmit={async (values, actions) => {
          setPhotoFile('Submitted Photo String');
          setSubmitting(true);

          const formObject = values;
          const user = await getData('currentUser');

          const surveyingUserFailSafe = await surveyingUserFailsafe(user, surveyingUser, isEmpty);
          const appVersion = await getData('appVersion') || '';

          let formObjectUpdated = addSelectTextInputs(values, formObject);
          formObjectUpdated = cleanLoopSubmissions(values, formObjectUpdated);

          const postParams = {
            parseParentClassID: selectedAsset.objectId,
            parseParentClass: 'Assets',
            parseUser: user.objectId,
            parseClass: 'FormAssetResults',
            photoFile,
            localObject: formObjectUpdated,
            typeOfForm: 'Asset'
          };

          const fieldsArray = Object.entries(formObject).map((obj) => ({
            title: obj[0],
            answer: obj[1]
          }));

          postParams.localObject = {
            title: selectedForm.name || '',
            description: selectedForm.description || '',
            formSpecificationsId: selectedForm.objectId,
            fields: fieldsArray,
            surveyingOrganization,
            surveyingUser: surveyingUserFailSafe,
            appVersion,
            phoneOS: Platform.OS || ''
          };

          const submitAction = () => {
            setTimeout(() => {
              setSubmitting(false);
            }, 1000);
            setSelectedForm({});
          };

          postSupplementaryAssetForm(postParams)
            .then(() => {
              submitAction();
            })
            .then(() => actions.resetForm())
            .catch((e) => {
              console.log(e) //eslint-disable-line
              setSubmitting(false);
              setSubmissionError(true);
            });
        }}
      >
        {(formikProps) => (
          <TouchableWithoutFeedback>
            <View
              style={styles.assetContainer}
            >
              <AssetFormSelect
                setSelectedForm={setSelectedForm}
                surveyingOrganization={surveyingOrganization}
              />

              <AssetSearchbar
                selectedAsset={selectedAsset}
                setSelectedAsset={setSelectedAsset}
                surveyingOrganization={surveyingOrganization}
              />
              {Object.keys(selectedAsset).length !== 0 && (
              <SelectedAsset
                selectedMarker={selectedAsset}
              />
              )}
              <View>
                {selectedForm?.fields?.length && selectedForm.fields.map((result) => (
                  <View key={result.formikKey}>
                    <PaperInputPicker
                      data={result}
                      formikProps={formikProps}
                      customForm
                    />
                  </View>
                ))}
                {submitting ? (
                  <ActivityIndicator
                    size="large"
                    color={theme.colors.primary}
                  />
                ) : (
                  <PaperButton
                    disabled={!validForm()}
                    style={{ backgroundColor: validForm() ? 'green' : '#f75231' }}
                    onPressEvent={() => formikProps.handleSubmit()}
                    icon={validForm() ? 'plus' : 'alert-octagon'}
                    buttonText={validForm() ? I18n.t('global.submit') : I18n.t('assetForms.attachForm')}
                  />
                )}
                <PaperButton
                  mode="text"
                  buttonText={I18n.t('assetCore.tapCreateAsset')}
                  onPressEvent={() => setPage('assetCore')}
                />
              </View>
              <PopupError
                error={submissionError}
                setError={setSubmissionError}
                errorMessage="submissionError.error"
              />
            </View>
          </TouchableWithoutFeedback>
        )}
      </Formik>
    </ScrollView>
  );
}

function Profile(props) {
    const [userPosts, setUserPosts] = useState([]);
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [following, setFollowing] = useState(false)

    useEffect(() => {
        const { currentUser, posts } = props;

        if (props.route.params.uid === firebase.auth().currentUser.uid) {
            setUser(currentUser)
            setUserPosts(posts)
            setLoading(false)
        }
        else {
            firebase.firestore()
                .collection("users")
                .doc(props.route.params.uid)
                .get()
                .then((snapshot) => {
                    if (snapshot.exists) {
                        props.navigation.setOptions({
                            title: snapshot.data().username,
                        })

                        setUser({ uid: props.route.params.uid, ...snapshot.data() });
                    }
                    setLoading(false)

                })
            firebase.firestore()
                .collection("posts")
                .doc(props.route.params.uid)
                .collection("userPosts")
                .orderBy("creation", "desc")
                .get()
                .then((snapshot) => {
                    let posts = snapshot.docs.map(doc => {
                        const data = doc.data();
                        const id = doc.id;
                        return { id, ...data }
                    })
                    setUserPosts(posts)
                })
        }


        if (props.following.indexOf(props.route.params.uid) > -1) {
            setFollowing(true);
        } else {
            setFollowing(false);
        }

    }, [props.route.params.uid, props.following, props.currentUser, props.posts])

    const onFollow = () => {
        firebase.firestore()
            .collection("following")
            .doc(firebase.auth().currentUser.uid)
            .collection("userFollowing")
            .doc(props.route.params.uid)
            .set({})

        props.sendNotification(user.notificationToken, "New Follower", `${props.currentUser.name} Started following you`, { type: 'profile', user: firebase.auth().currentUser.uid })
    }
    const onUnfollow = () => {
        firebase.firestore()
            .collection("following")
            .doc(firebase.auth().currentUser.uid)
            .collection("userFollowing")
            .doc(props.route.params.uid)
            .delete()
    }

    if (loading) {
        return (
            <View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
                <ActivityIndicator style={{ alignSelf: 'center', marginBottom: 20 }} size="large" color="#00ff00" />
                <Text style={[text.notAvailable]}>Loading</Text>
            </View>
        )
    }
    if (user === null) {
        return (
            <View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
                <FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="dizzy" size={40} color="black" />
                <Text style={[text.notAvailable]}>User Not Found</Text>
            </View>
        )
    }
    return (
        <ScrollView style={[container.container, utils.backgroundWhite]}>

            <View style={[container.profileInfo]}>

                <View style={[utils.noPadding, container.row]}>

                    {user.image == 'default' ?
                        (
                            <FontAwesome5
                                style={[utils.profileImageBig, utils.marginBottomSmall]}
                                name="user-circle" size={80} color="black" />
                        )
                        :
                        (
                            <Image
                                style={[utils.profileImageBig, utils.marginBottomSmall]}
                                source={{
                                    uri: user.image
                                }}
                            />
                        )
                    }

                    <View style={[container.container, container.horizontal, utils.justifyCenter, utils.padding10Sides]}>

                        <View style={[utils.justifyCenter, text.center, container.containerImage]}>
                            <Text style={[text.bold, text.large, text.center]}>{userPosts.length}</Text>
                            <Text style={[text.center]}>Posts</Text>
                        </View>
                        <View style={[utils.justifyCenter, text.center, container.containerImage]}>
                            <Text style={[text.bold, text.large, text.center]}>{user.followersCount}</Text>
                            <Text style={[text.center]}>Followers</Text>
                        </View>
                        <View style={[utils.justifyCenter, text.center, container.containerImage]}>
                            <Text style={[text.bold, text.large, text.center]}>{user.followingCount}</Text>
                            <Text style={[text.center]}>Following</Text>
                        </View>
                    </View>

                </View>


                <View>
                    <Text style={text.bold}>{user.name}</Text>
                    <Text style={[text.profileDescription, utils.marginBottom]}>{user.description}</Text>

                    {props.route.params.uid !== firebase.auth().currentUser.uid ? (
                        <View style={[container.horizontal]}>
                            {following ? (
                                <TouchableOpacity
                                    style={[utils.buttonOutlined, container.container, utils.margin15Right]}
                                    title="Following"
                                    onPress={() => onUnfollow()}>
                                    <Text style={[text.bold, text.center, text.green]}>Following</Text>
                                </TouchableOpacity>
                            )
                                :
                                (
                                    <TouchableOpacity
                                        style={[utils.buttonOutlined, container.container, utils.margin15Right]}
                                        title="Follow"
                                        onPress={() => onFollow()}>
                                        <Text style={[text.bold, text.center, { color: '#2196F3' }]}>Follow</Text>
                                    </TouchableOpacity>

                                )}

                            <TouchableOpacity
                                style={[utils.buttonOutlined, container.container]}
                                title="Follow"
                                onPress={() => props.navigation.navigate('Chat', { user })}>
                                <Text style={[text.bold, text.center]}>Message</Text>
                            </TouchableOpacity>
                        </View>
                    ) :
                        <TouchableOpacity
                            style={utils.buttonOutlined}
                            onPress={() => props.navigation.navigate('Edit')}>
                            <Text style={[text.bold, text.center]}>Edit Profile</Text>
                        </TouchableOpacity>}
                </View>
            </View>

            <View style={[utils.borderTopGray]}>
                <FlatList
                    numColumns={3}
                    horizontal={false}
                    data={userPosts}
                    style={{}}
                    renderItem={({ item }) => (
                        <TouchableOpacity
                            style={[container.containerImage, utils.borderWhite]}
                            onPress={() => props.navigation.navigate("Post", { item, user })}>

                            {item.type == 0 ?

                                <CachedImage
                                    cacheKey={item.id}
                                    style={container.image}
                                    source={{ uri: item.downloadURLStill }}
                                />

                                :

                                <CachedImage
                                    cacheKey={item.id}
                                    style={container.image}
                                    source={{ uri: item.downloadURL }}
                                />
                            }
                        </TouchableOpacity>

                    )}

                />
            </View>
        </ScrollView >

    )
}

Detail = ({route, navigation}) => {
  const [poke, setPoke] = useState({});
  const {colors} = useTheme();
  const {pokemon, previous} = route.params;

  const colorByType = colors[poke.types?.[0].type.name];

  const recursiveEvolutionChain = (chain) => {
    const isCurrent = chain?.species.name === pokemon.name;
    return (
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => {
            if (previous === chain?.species.name) {
              navigation.goBack();
            } else if (!isCurrent) {
              navigation.push('Pokemon', {
                pokemon: chain.species,
                previous: pokemon.name,
              });
            }
          }}>
          <Text
            style={[
              styles.pokemonName,
              {
                marginHorizontal: 16,
                color: isCurrent && colors.primary,
              },
            ]}>
            {chain?.species.name}
          </Text>
        </TouchableOpacity>
        {chain?.evolves_to.length > 0 && (
          <Text style={styles.pokemonName}>></Text>
        )}
        <View>
          {chain?.evolves_to?.map((poke) => recursiveEvolutionChain(poke))}
        </View>
      </View>
    );
  };

  useEffect(() => {
    Promise.all([
      P.getPokemonByName(pokemon.name),
      P.getPokemonSpeciesByName(pokemon.name),
    ]).then(([pokemonInfo, speciesInfo]) => {
      const {types, id} = pokemonInfo;
      const {evolution_chain, flavor_text_entries} = speciesInfo;
      const description = flavor_text_entries
        .find((flavor) => flavor.language.name === 'es')
        ?.flavor_text.replace(/\n/g, ' ');
      P.resource(evolution_chain.url).then((evolutionChain) => {
        setPoke(
          Pokemon({
            ...pokemon,
            id,
            description,
            chain: evolutionChain.chain,
            types: types.sort((a, b) =>
              a.slot > b.slot ? 1 : a.slot < b.slot ? -1 : 0,
            ),
          }),
        );
      });
    });
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerStyle: {
        backgroundColor: colorByType,
      },
    });
  }, [colorByType]);

  return (
    <View style={{padding: 16}}>
      <StatusBar backgroundColor={colorByType} barStyle="light-content" />
      <View style={styles.row}>
        <Image style={{width: 180, height: 180}} source={{uri: poke.image}} />
        <View style={{paddingTop: 24}}>
          <Text style={styles.pokemonName}>
            #{poke.id} - {poke.name}
          </Text>
          <View style={styles.typesContainer}>
            {poke.types?.map((type, index) => (
              <Text
                key={index}
                style={[
                  styles.type,
                  {backgroundColor: colors[type.type.name]},
                ]}>
                {type.type.name}
              </Text>
            ))}
          </View>
        </View>
      </View>
      <Text style={{fontSize: 16}}>{poke.description}</Text>
      <Text style={{fontSize: 24, marginTop: 16}}>Cadena Evolutiva</Text>
      <ScrollView horizontal style={styles.typesContainer}>
        {recursiveEvolutionChain(poke.chain)}
      </ScrollView>
    </View>
  );
}

export default function ProfileTab({navigation}) {
  const db = firebase.firestore().collection('users');
  const uid = firebase.auth().currentUser.uid;
  const [data, setData] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [profilePic, setProfilePic] = React.useState('');
  const [name, setName] = React.useState('');
  const [refreshing, setRefreshing] = React.useState(false);
  const [bio, setBio] = React.useState('');

  React.useEffect(() => {
    db.doc(uid).get()
        .then((doc) => {
          setData(doc.data()),
          setName(data.name),
          setBio(doc.data().bio),
          setUsername(data.username),
          setProfilePic(data.photo);
        });
  });
  const wait = (timeout) => {
    return new Promise((resolve) => {
      setTimeout(resolve, timeout);
    });
  };

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);


  return (
    <View style={Styles.container}>
      <Header headerTitle={username} />
      <ScrollView refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }>
        <View style={styles2.thumbnailSection}>
          <View>
            <Image
              source={{
                uri:
                  profilePic
              }}
              style={styles2.thumbnail}
            />
            {/* Displays Name as well as Username in feed */}
            {/* <Text style={styles2.username}>  {data.name} </Text> */}
          </View>
          <View style={styles2.postCardCont}>
            <Text style={styles2.postCount}> 100 </Text>
            <Text style={styles2.postCards}> PostCards </Text>
          </View>
          <View style={styles2.followerCont}>
            <Text style={styles2.followerCount}> 1000 </Text>
            <Text style={styles2.follower}> Followers </Text>
          </View>
          <Icon
            style={styles2.hambuger}
            name="bars"
            size={25}
            testID='profile-hamburger'
            onPress={() =>
              navigation.dispatch(DrawerActions.openDrawer(Drawer))
            }
          />
        </View>
        <View style={styles2.thumbnailName}>
          <Text style={{
            fontSize: 12.5,
            fontWeight: 'bold',
            color: '#FFFF'
          }}> {name} </Text>
        </View>

        <Text style={{
          fontSize: 12.5,
          fontWeight: 'bold',
          color: '#000000'
        }}> {bio} </Text>

        <View style={{alignItems: 'center', padding: 24}}>
          <AwesomeButton
            backgroundColor={'#ffbc26'}
            width={340}
            height={40}
            onPress={() => navigation.navigate('EditProfile')}
          >
            Edit Profile
          </AwesomeButton>
        </View>
        <View>
          {/* Tab to switch between profile posts and favorites */}
          <TopTab.Navigator
            tabBarOptions={{
              labelStyle: {fontWeight: 'bold', fontSize: 12},
              indicatorStyle: {backgroundColor: Colors.warning},
              style: {backgroundColor: Colors.info},
              inactiveBackgroundColor: Colors.info,
              activeBackgroundColor: Colors.warning,
              inactiveTintColor: Colors.background,
              activeTintColor: 'white'
            }}
          >
            <TopTab.Screen name="Post Cards" component={ProfilePosts} />
            <TopTab.Screen name="Favs" component={Favorites} />
          </TopTab.Navigator>
        </View>

      </ScrollView>
    </View>
  );
}

export default function previewPostScreen({ route, navigation }) {
  const photosx = route.params.photosx;
  const captionx = route.params.captionx;
  const cityx = route.params.cityx;
  const countryx = route.params.countryx;
  const dbRef = Firebase.firestore().collection('posts');
  const db = Firebase.firestore();
  const uid = Firebase.auth().currentUser.uid;
  const [userData, setData] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [user_avatar, setAvatar] = React.useState('');


  React.useEffect(() => {
    db.collection('users').doc(uid).get()
      .then((doc) => {
        setData(doc.data()), setUsername(doc.data().username), setAvatar(doc.data().photo)
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  })

  async function submitPost() {
    try {
      // console.log('Submit 1')
      const photoRef = await uploadPhotoAsync(photosx);
      // console.log('Submit 1.1')
      await dbRef.add({
        city: cityx,
        country: countryx,
        caption: captionx,
        photos: photoRef,
        post_time: new Date().toLocaleString(),
        user: uid
      }).then(
        // console.log('Submit 1.2'),

        navigation.navigate('Tabs', {
          screen: 'FeedTab'
        }).then(ProfilePosts.forceUpdate(callback)
        )
      )
    } catch (error) {
      console.log(error);
    }
  }


  async function uploadPhotoAsync(uri) {
    const path = 'photos/' + (uid) + '/' + Date.now();
    return new Promise(async (res, rej) => {
      const response = await fetch(uri);
      const file = await response.blob();
      let upload = Firebase.storage().ref(path).put(file);
      upload.on("state_changed",
        snapshot => { },
        err => {
          rej(err)
        },
        async () => {
          const url = await upload.snapshot.ref.getDownloadURL();
          res(url);
        }
      )
    })
  }

  const data = {
    id: uid,
    username: username,
    user_avatar: user_avatar,
    image: photosx,
    caption: captionx,
    location: countryx,
    city: cityx

  }

  return (
    <View style={Styles.container}>
      <ScrollView
        style={Styles.container}
      >
        <View style={
          {
            flexDirection: 'row',
            justifyContent: 'space-around',
            flexWrap: 'wrap'
          }
        }>
          <PostCard detail={data} key={data.id} />
        </View>
        <View style={Styles.card}>
          <AwesomeButton
            backgroundColor={"#ffbc26"}
            width={340}
            height={40}
            onPress={() => submitPost()}
          >
            Submit Post
          </AwesomeButton>
        </View>
      </ScrollView>
    </View>
  );
}

render() {
    return (
      <ScrollView style={Styles.container}>
        <View style={Styles.container_content}>
          <Image
            source={require('../assets/images/baku2-full-blue.png')}
            style={Styles.image_header}
          />
        </View>

        <Hoshi
          label={'Email'}
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
          borderColor={Colors.light}
          borderHeight={5}
          inputPadding={18}
          autoCapitalize="none"
          testID='login-input-email'
        />

        {/* <Hoshi
          label={'Password'}
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          borderColor={Colors.warning}
          borderHeight={5}
          inputPadding={16}
          autoCapitalize="none"
          secureTextEntry={true}
          testID='login-input-password'
        /> */}
        <HideShowPass
          label={'Password'}
          value={this.state.password}
          borderColor={Colors.warning}
          borderHeight={5}
          inputPadding={16}
          autoCapitalize="none"
          secureTextEntry={true}
          testID='login-input-password'
          onChangeText={(password) => this.setState({ password })
          }
        />
        <View style={Styles.container_content}>
          <Text style={Styles.text_error}>
            {this.state.error}
          </Text>

          <View style={Styles.p_2} testID='button-login'
          >
            <AwesomeButton
              backgroundColor={Colors.light}
              width={200}
              height={50}
              testID='button-login'
              onPress={() => {
                this.setState({ error: '' });
                this.handleLogin(this.state);
              }}
            >
              Login
            </AwesomeButton>
          </View>

          <View style={Styles.p_2}>
            <AwesomeButton
              backgroundColor={Colors.warning}
              width={200}
              height={50}
              testID='button-signup'
              onPress={() => {
                this.setState({ email: '', password: '', error: '' });
                this.props.navigation.navigate('Create');
              }}
            >
              Sign Up!
            </AwesomeButton>
          </View>

          <Text style={Styles.p_2} testID="new-user">
            New user? Sign up now!
          </Text>

          <AwesomeButton
            backgroundColor={Colors.primary}
            width={160}
            height={30}
            onPress={() => {
              this.props.navigation.navigate('Reset');
            }}
          >
            Forgot Password?
          </AwesomeButton>
          <View style={[Styles.p_3, { flexDirection: "row" }]}>
            <View style={{ marginHorizontal: 10 }}>
              <Icon
                color="#3b5998"
                marginHorizontal={10}
                size={25}
                name="facebook"
                testID="login-icon-facebook"
                onPress={() => {
                  this.setState({ error: '' });
                  this.loginWithFacebook();
                }}
              />
            </View>
            <View>
              <Icon
                size={25}
                name="google"
                testID="login-icon-google"
                onPress={() => {
                  this.setState({ error: '' });
                  this.signInWithGoogleAsync();
                }}
              />
            </View>
          </View>
        </View>
      </ScrollView >
    );
  }

render() {
    return (
      <ScrollView style={Styles.container}>

        <Text
          style={[Styles.header, Styles.text_large]}>
        </Text>
        <TouchableOpacity
          style={{
            width: 172, height: 172,
            alignSelf: 'center',
            marginBottom: 18,
            borderRadius: 32,
          }}
          onPress={() => {
            this.pickImage();
          }}
        >
          <Image
            source={{ uri: this.state.photo }}
            // placeholder
            style={{
              width: 172, height: 172,
              alignSelf: 'center',
              borderRadius: 32,
              borderWidth: 1,
              borderColor: 'black',
              marginBottom: 18,
            }}

          />
        </TouchableOpacity>
        <Fumi
          label={'Full Name'}
          value={this.state.name}
          iconClass={FontAwesomeIcon}
          iconName={'user'}
          onChangeText={(name) => this.setState({ name })}
          testID='edit-fullname'
        />
        <Fumi
          label={'Username'}
          value={this.state.username}
          autoCapitalize="none"
          iconClass={FontAwesomeIcon}
          iconName={'envelope-square'}
          onChangeText={(username) => this.setState({ username })}
          testID='edit-username'
        />
        <Fumi
          label={'Phone-Number'}
          value={this.state.mobile}
          iconClass={FontAwesomeIcon}
          iconName={'phone'}
          iconSize={20}
          iconWidth={40}
          inputPadding={16}
          inputStyle={{ padding: 5 }}
          onChangeText={(mobile) => this._onChangeText(mobile)}
          value={this.state.mobile}
          keyboardType='phone-pad'
          maxLength={14}
        />

        <Fumi
          label={'Birthday'}
          value={this.state.birthday}
          iconClass={FontAwesomeIcon}
          iconName={'birthday-cake'}
          iconSize={20}
          iconWidth={40}
          inputPadding={16}
          inputStyle={{ padding: 5 }}
          onChangeText={(birthday) => this.setState({ birthday })}
          testID='edit-birthday'
        />

        <Fumi
          label={'Short BIO'}
          value={this.state.bio}
          iconClass={FontAwesomeIcon}
          iconName={'pencil'}
          iconSize={20}
          iconWidth={40}
          inputPadding={16}
          inputStyle={{ padding: 5 }}
          onChangeText={(bio) => this.setState({ bio })}
          testID='edit-bio'
        />
        <Fumi
          label={'Some Places You\'ve Been'}
          value={this.state.places}
          iconClass={FontAwesomeIcon}
          iconName={'location-arrow'}
          iconSize={20}
          iconWidth={40}
          inputPadding={16}
          inputStyle={{ padding: 5 }}
          onChangeText={(places) => this.setState({ places })}
          testID='edit-places'
        />

        <View style={Styles.container_content}>
          <Text style={Styles.text_error}>
            {this.state.error}
          </Text>
        </View>

        <View style={Styles.container_content}>

          <AwesomeButton
            backgroundColor={Colors.warning}
            width={200}
            height={50}
            onPress={() => {
              this.handleProfile();
            }}
          >
            Submit
            </AwesomeButton>

          {<View style={Styles.p_3}>
            <AwesomeButton
              backgroundColor={Colors.success}
              width={200}
              height={50}
              onPress={() => {
                this.props.navigation.navigate('ChangePassword');
              }}
            >
              Change Password
            </AwesomeButton>
          </View>}

        </View>

      </ScrollView>
    );
  }

function detailedPostScreen({ route, navigation }) {

  const details = {
    location: route.params.details.location,
    user_avatar: route.params.details.user_avatar,
    username: route.params.details.username,
    image: route.params.details.image,
    caption: route.params.details.caption,
    postId: route.params.details.uid,
  };

  return (
    <ScrollView style={Styles.detailedPostContainer} contentContainerStyle={{
        flexDirection: 'row',
        flexGrow: 1,
        justifyContent: 'center',
        flexWrap: 'wrap'}}>

        <View style={{ flexDirection: 'column', minWidth: 200 }}>

              <View style={{ flexDirection: 'row', margin: 5 }}>

                <View style={{
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flex: 0.75,
                }}>
                  <Text style={{ fontSize: 15, textAlign: 'center' }}>
                    Hello From
                  </Text>

                  <Text adjustsFontSizeToFit numberOfLines={1}
                    style={Styles.postCardLocationText}>
                    {details.location}
                  </Text>

                </View>

                <View style={{
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flex: 0.25
                }}>
                  <Image
                    style={Styles.image_icon}
                    source={{
                      uri: details.user_avatar
                    }}
                  />

                  <Text adjustsFontSizeToFit numberOfLines={1} style={{
                    fontWeight: 'bold',
                    textAlignVertical: 'center',
                    textAlign: 'center'
                  }}
                  >
                    {details.username}
                  </Text>
                </View>

              </View>
                <Image
                  style={{
                    flex: 1,
                    height: 400,
                    resizeMode: 'contain'
                  }}
                  source={{
                    uri: details.image
                  }}
                />
          <View style={{ flexDirection: 'row', alignContent: 'center', justifyContent: 'center' }}>
            <Text adjustsFontSizeToFit style={Styles.text_large}>{details.caption}</Text>
          </View>
          </View>
        <View style={{ flexDirection: 'column', minWidth: 200, margin: 5 }}>
          
            <ItineraryList uid={details.postId}/>
        </View>
      </ScrollView>
  );
}