react-native#TouchableHighlight JavaScript Examples

render() {
    //2018年12月22日18:45:21
    return (
      <TouchableHighlight onPress={this.onPress}>
        <View style={tcStyles.main}>
          <Text style={tcStyles.walletName}>{this.tx.wallet.name}</Text>
          <Text style={tcStyles.date}>
            {this.tx.creator} | {this.date}
          </Text>
          <View style={tcStyles.amountSection}>
            <Text style={tcStyles.amount}>
              {this.tx.amount} {this.tx.tokenName}
            </Text>
            <Button
              title={this.statusText}
              disabled={this.disabled}
              disabledStyle={tcStyles.disabledButtonStyle}
              disabledTitleStyle={tcStyles.disabledButtonText}
              buttonStyle={tcStyles.buttonStyle}
              titleStyle={tcStyles.buttonText}
              onPress={this.onPress}
            />
          </View>
        </View>
      </TouchableHighlight>
    );
  }

export default function Button(props) {
  return (
    <View>
      <TouchableHighlight
        underlayColor={props.orange ? '#ffc56b' : '#c9c9c9'}
        activeOpacity={1}
        onPress={props.function}
        style={[
          props.special ? styles.specialButton : styles.button,
          {
            backgroundColor: props.backgroundColor,
            justifyContent: 'center',
          },
        ]}
      >
        <View>
          {props.children ? (
            props.children
          ) : (
            <Text
              style={[
                props.special ? styles.specialText : styles.text,
                { color: props.color },
              ]}
            >
              {props.text}
            </Text>
          )}
        </View>
      </TouchableHighlight>
    </View>
  );
}

_dropdown_2_renderRow(rowData, rowID, highlighted) {
    let icon = highlighted ? require('./images/heart.png') : require('./images/flower.png');
    let evenRow = rowID % 2;
    return (
      <TouchableHighlight underlayColor='cornflowerblue'>
        <View style={[styles.dropdown_2_row, {backgroundColor: evenRow ? 'lemonchiffon' : 'white'}]}>
          <Image style={styles.dropdown_2_image}
                 mode='stretch'
                 source={icon}
          />
          <Text style={[styles.dropdown_2_row_text, highlighted && {color: 'mediumaquamarine'}]}>
            {`${rowData.name} (${rowData.age})`}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }

CometChatUserListItem = (props) => {
  const viewTheme = { ...theme, ...props.theme };

  return (
    <TouchableHighlight
      key={props.user.uid}
      onPress={() => props.clickHandler(props.user)}
      underlayColor={viewTheme.backgroundColor.listUnderlayColor}>
      <View style={style.listItem}>
        <View style={[style.avatarStyle, { borderRadius: 22 }]}>
          <CometChatAvatar
            image={{ uri: props.user.avatar }}
            cornerRadius={22}
            borderColor={viewTheme.color.secondary}
            borderWidth={0}
            name={props.user.name}
          />
          <CometChatUserPresence
            status={props.user.status}
            cornerRadius={18}
            style={{ top: 30 }}
            borderColor={viewTheme.color.white}
            borderWidth={2}
          />
        </View>
        <View style={style.userNameStyle}>
          <Text numberOfLines={1} style={style.userNameText}>
            {props.user.name}
          </Text>
        </View>
      </View>
    </TouchableHighlight>
  );
}

Theory = (props) => {
  return (
    <View style={styles.mainContainer}>
      <TouchableHighlight onPress={() => props.navigation.navigate('DictionaryPage')} style={styles.menuItem}>
        <ImageBackground source={dictionary} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.dictionary')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
      <TouchableHighlight
        onPress={() => props.navigation.navigate('EssentialPage', { type: DrillTypes.FRISBEE })}
        style={styles.menuItem}
      >
        <ImageBackground source={essential} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.essential')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
      <TouchableHighlight onPress={() => props.navigation.navigate('TacticsPage')} style={styles.menuItem}>
        <ImageBackground source={simulator} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.tactics')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
    </View>
  );
}

ModalMensagemMapa = ({ modalVisible, fecharModal }) => {
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {
          fecharModal();
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>
              Para encontrar mais pontos de aglomeração, navegue pelo mapa ou
              pesquise o nome de um local no campo acima.
            </Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#94D451' }}
              onPress={() => {
                fecharModal();
              }}
            >
              <Text style={styles.textStyle}>OK</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  );
}

render() {
    return (
      <Container>
        <Header />
        <FlatList
          data={this.props.BLEList}
                renderItem={({ item }) => 
                <>
                <TouchableHighlight
                    onPress={() => this.handleClick(item)}
                    style={item.isConnectable ? styles.rowFront : styles.rowBack}
                    underlayColor={'#AAA'}
                >
                    <View>
                        <Text>
                            {this.connectableString(item)}
                        </Text>
                    </View>
                </TouchableHighlight>
                </>
                }
                keyExtractor={item => item.id.toString()}
                ListEmptyComponent={DataActivityIndicator}
            />
        

        <Footer>
          <BLE></BLE>
        </Footer>
      </Container>
    );
  }

function ListItem({
	title,
	subTitle,
	image,
	IconComponent,
	onPress,
	renderRightActions,
}) {
	return (
		<Swipeable renderRightActions={renderRightActions}>
			<TouchableHighlight underlayColor={colors.light} onPress={onPress}>
				<View style={styles.container}>
					{IconComponent}
					{image && <Image style={styles.image} source={image} />}

					<View style={styles.detailsContainer}>
						<Text style={styles.title} numberOfLines={1}>
							{title}
						</Text>
						{subTitle && (
							<Text style={styles.subTitle} numberOfLines={2}>
								{subTitle}
							</Text>
						)}
					</View>

					<MaterialCommunityIcons
						color={colors.medium}
						name="chevron-right"
						size={25}
					/>
				</View>
			</TouchableHighlight>
		</Swipeable>
	);
}

render() {
    return (
      <TouchableHighlight underlayColor="transparent" activeOpacity={0.7} onPress={this.onPress}>
        <View style={acStyles.main}>
          <Text style={acStyles.address} numberOfLines={1} ellipsizeMode="middle">
            {this.address}
          </Text>
          <View style={acStyles.iconWrap}>
            <Image source={require("@img/icon/copy.png")} />
          </View>
        </View>
      </TouchableHighlight>
    );
  }

/**
 * Create touchable component based on passed parameter and platform.
 * It also returns default props for specific touchable types.
 */
export function makeTouchable(TouchableComponent) {
  const Touchable = TouchableComponent || Platform.select({
    android: TouchableNativeFeedback,
    ios: TouchableHighlight,
    default: TouchableHighlight,
  });
  let defaultTouchableProps = {};
  if (Touchable === TouchableHighlight) {
    defaultTouchableProps = { underlayColor: 'rgba(0, 0, 0, 0.1)' };
  }
  return { Touchable, defaultTouchableProps };
}

getModal = function getModal(props, visible, _ref) {
  var getContent = _ref.getContent,
      hide = _ref.hide,
      onDismiss = _ref.onDismiss,
      onOk = _ref.onOk;
  var styles = props.styles,
      title = props.title,
      okText = props.okText,
      dismissText = props.dismissText;
  var titleEl = typeof title === 'string' ? React.createElement(Text, {
    style: [styles.title]
  }, title) : title;
  var okEl = typeof okText === 'string' ? React.createElement(Text, {
    style: [styles.actionText, styles.okText]
  }, okText) : okText;
  var dismissEl = typeof dismissText === 'string' ? React.createElement(Text, {
    style: [styles.actionText, styles.dismissText]
  }, dismissText) : dismissText;
  return React.createElement(Modal, {
    animationType: "slide-up",
    wrapStyle: styles.modal,
    visible: visible,
    onClose: hide
  }, React.createElement(View, {
    style: [styles.header]
  }, React.createElement(TouchableHighlight, {
    onPress: onDismiss,
    style: [styles.headerItem],
    activeOpacity: props.actionTextActiveOpacity,
    underlayColor: props.actionTextUnderlayColor
  }, dismissEl), React.createElement(View, {
    style: [styles.headerItem]
  }, titleEl), React.createElement(TouchableHighlight, {
    onPress: onOk,
    style: [styles.headerItem],
    activeOpacity: props.actionTextActiveOpacity,
    underlayColor: props.actionTextUnderlayColor
  }, okEl)), getContent());
}

render() {
    const { title, style, containerStyle, titleStyle, iconStyle, icon, disabled } = this.props;
    return (
      <View style={[styles.main, containerStyle, disabled && styles.disabledContainer]}>
        <TouchableHighlight
          style={styles.touch}
          disabled={disabled}
          underlayColor="transparent"
          activeOpacity={0.7}
          onPress={this.onPress}>
          <View style={[styles.container, style]}>
            {!!icon && <Image style={iconStyle} source={icon} />}
            {!!title && <Text style={[styles.text, titleStyle, disabled && styles.disabledTitle]}>{title}</Text>}
          </View>
        </TouchableHighlight>
      </View>
    );
  }

export default function ModalFormNotificacao({ modalVisible, closeModal }) {
  const [observacao, setObservacao] = useState('');
  const [estimativa, setEstimativa] = useState('');
  const [estimativaPicker, setEstimativaPicker] = useState('');
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {}}
      >
        <TouchableOpacity
          style={styles.containerTouchable}
          activeOpacity={1}
          onPressOut={() => {
            closeModal();
            setEstimativaPicker('');
            setObservacao('');
          }}
        >
          <TouchableWithoutFeedback onPress={() => {}}>
            <View style={styles.modalView}>
              <Text style={styles.label}>Estimativa de pessoas</Text>
              <View style={styles.inputPicker}>
                <Picker
                  selectedValue={estimativaPicker}
                  onValueChange={(value) => setEstimativaPicker(value)}
                >
                  <Picker.Item label="5 a 9" value="5" />
                  <Picker.Item label="10 a 19" value="10" />
                  <Picker.Item label="20 a 39" value="20" />
                  <Picker.Item label="40 a 79" value="40" />
                  <Picker.Item label="80 a 99" value="80" />
                  <Picker.Item label="100 a 999" value="100" />
                  <Picker.Item label="1000 ou mais" value="1000" />
                </Picker>
              </View>
              <Text style={styles.label}>Observação</Text>
              <TextInput
                style={styles.input}
                placeholder="(Opicional)"
                multiline
                value={observacao}
                onChangeText={(text) => setObservacao(text)}
              />

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: '#94D451' }}
                onPress={() => {
                  if (estimativa != '') {
                    const enviarNotificacao = async () => {
                      try {
                        await enviarNotificacaoAglomeracao(
                          estimativaPicker,
                          observacao
                        );
                      } catch (error) {
                        console.log(`Error ao enviar notificação: ${error}`);
                      }
                    };
                    enviarNotificacao();
                  }
                  setObservacao('');
                  setEstimativaPicker('');
                  closeModal();
                }}
              >
                <Text style={styles.textStyle}>Enviar notificação</Text>
              </TouchableHighlight>
            </View>
          </TouchableWithoutFeedback>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}

SettingsButtonLinkHighlight = memo(({ onPress, title, rightText }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)

    return (
        <TouchableHighlight underlayColor={getColor(darkMode, "underlaySettingsButton")} style={{
            width: "100%",
            height: "auto",
            borderRadius: 10
        }} onPress={onPress}>
            <View style={{
                width: "100%",
                height: "auto",
                flexDirection: "row",
                justifyContent: "space-between",
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 8,
                paddingBottom: 8
            }}>
                <View>
                    <Text style={{
                        color: darkMode ? "white" : "black",
                        paddingTop: Platform.OS == "ios" ? 4 : 3
                    }}>
                        {title}
                    </Text>
                </View>
                <View style={{
                    flexDirection: "row"
                }}>
                    {
                        typeof rightText !== "undefined" && (
                            <>
                                {
                                    rightText == "ActivityIndicator" ? (
                                        <ActivityIndicator size={"small"} color={darkMode ? "white" : "gray"} style={{
                                            marginRight: 5
                                        }} />
                                    ) : (
                                        <Text style={{
                                            color: "gray",
                                            paddingTop: Platform.OS == "android" ? 3 : 4,
                                            paddingRight: 10,
                                            fontSize: 13
                                        }}>
                                            {rightText}
                                        </Text>
                                    )
                                }
                            </>
                        )
                    }
                    <Ionicon name="chevron-forward-outline" size={22} color="gray" style={{
                        marginTop: 1
                    }} />
                </View>
            </View>
        </TouchableHighlight>
    )
})

Fitness = (props) => {
  return (
    <View style={styles.mainContainer}>
      <TouchableHighlight
        onPress={() => props.navigation.navigate('DrillListPage', { type: DrillTypes.FITNESS })}
        style={styles.menuItem}
      >
        <ImageBackground source={leanfit} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.leanTitle')}</Text>
            <Text style={styles.subtitle}>{I18n.t('homePage.leanSubtitle')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
      <TouchableHighlight
        onPress={() =>
          props.navigation.navigate('ProgramListPage', {
            type: DrillTypes.FITNESS,
            equipmentLabel: EquipmentLabels.NONE,
          })
        }
        style={styles.menuItem}
      >
        <ImageBackground source={bodyweight} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.bodyweightTitle')}</Text>
            <Text style={styles.subtitle}>{I18n.t('homePage.bodyweightSubtitle')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
      <TouchableHighlight
        onPress={() =>
          props.navigation.navigate('ProgramListPage', {
            type: DrillTypes.FITNESS,
            equipmentLabel: EquipmentLabels.FULL,
          })
        }
        style={styles.menuItem}
      >
        <ImageBackground source={gymstrong} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.gymTitle')}</Text>
            <Text style={styles.subtitle}>{I18n.t('homePage.gymSubtitle')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
    </View>
  );
}

render() {
    const {
      containerStyle,
      cellContainer,
      cellHeight,
      title,
      titleStyle,
      content,
      contentStyle,
      imageUrl,
      imageStyle,
      noticeNum,
      hideRightArrow,
      bottomBorder,
      rightNode,
      onPress,
      source,
      detail,
      selectable = false,
      renderTitle,
    } = this.props;

    return (
      <View style={[styles.cellContainer, containerStyle]}>
        <TouchableHighlight onPress={onPress}>
          <View
            style={[
              styles.cell,
              cellHeight ? { height: cellHeight } : {},
              bottomBorder ? styles.cellBorderBottom : {},
              cellContainer ? cellContainer : {},
            ]}>
            <View style={[styles.flexRow]}>
              {imageUrl && (
                <Image
                  source={{ uri: imageUrl }}
                  style={[{ width: 20, height: 20, marginRight: 12 }, imageStyle || {}]}
                />
              )}
              {source && <Image source={source} style={{ marginRight: 12 }} />}
              {renderTitle && renderTitle()}
              {!!title && (
                <Text style={[styles.title, titleStyle]} selectable={selectable}>
                  {title}
                </Text>
              )}
            </View>
            <View style={[styles.detailWrap]}>
              {noticeNum !== undefined && noticeNum > 0 && (
                <View style={styles.redDot}>
                  <Text style={styles.redDotText}>{noticeNum}</Text>
                </View>
              )}
              {!!content && <Text style={[styles.content, contentStyle]}>{content}</Text>}
              {!!detail && (
                <Text ellipsizeMode="middle" style={styles.detail}>
                  {detail}
                </Text>
              )}
              {rightNode && rightNode}
              {!hideRightArrow && <Image style={{ marginLeft: 6 }} source={require("@img/icon/arrow-right.png")} />}
            </View>
          </View>
        </TouchableHighlight>
      </View>
    );
  }

Frisbee = (props) => {
  return (
    <View style={styles.mainContainer}>
      <TouchableHighlight
        onPress={() => props.navigation.navigate('DrillListPage', { type: DrillTypes.FRISBEE })}
        style={styles.menuItem}
      >
        <ImageBackground source={frisbeeGlove} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.drills')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>

      <View style={styles.containerGrow}>
        <TouchableHighlight
          onPress={() =>
            props.navigation.navigate('ProgramListPage', { type: DrillTypes.FRISBEE, ageCategory: AgeCategory.JUNIOR })
          }
          style={styles.menuItemSplitLeft}
        >
          <ImageBackground source={juniorPrograms} style={styles.image}>
            <View style={styles.wrapper}>
              <Text style={styles.title}>{I18n.t('homePage.junior')}</Text>
              <Text style={styles.subtitle}>{I18n.t('homePage.programs')}</Text>
            </View>
          </ImageBackground>
        </TouchableHighlight>
        <TouchableHighlight
          onPress={() =>
            props.navigation.navigate('ProgramListPage', { type: DrillTypes.FRISBEE, ageCategory: AgeCategory.SENIOR })
          }
          style={styles.menuItemSplitRight}
        >
          <ImageBackground source={adultPrograms} style={styles.image}>
            <View style={styles.wrapperRight}>
              <Text style={styles.titleRight}>{I18n.t('homePage.adult')}</Text>
              <Text style={styles.subtitleRight}>{I18n.t('homePage.programs')}</Text>
            </View>
          </ImageBackground>
        </TouchableHighlight>
      </View>

      <TouchableHighlight onPress={() => props.navigation.navigate('PlaybookPage')} style={styles.menuItem}>
        <ImageBackground source={ourPlays} style={styles.image}>
          <View style={styles.wrapper}>
            <Text style={styles.title}>{I18n.t('homePage.playbook')}</Text>
          </View>
        </ImageBackground>
      </TouchableHighlight>
    </View>
  );
}

FocusableHighlight = forwardRef((props, ref) => {
  const [focused, setFocused] = useState(false);
  const [pressed, setPressed] = useState(false);

  return (
    <TouchableHighlight
      {...props}
      ref={ref}
      onPress={(event) => {
        if (event.eventKeyAction !== undefined) {
          setPressed(parseInt(event.eventKeyAction) === 0);
          if (props.onPress) {
            props.onPress(event);
          }
        }
      }}
      onFocus={(event) => {
        console.log('focus: ' + props.nativeID);
        setFocused(true);
        if (props.onFocus) {
          props.onFocus(event);
        }
      }}
      onBlur={(event) => {
        setFocused(false);
        if (props.onBlur) {
          props.onBlur(event);
        }
      }}
      style={[
        props.style,
        focused && {
          backgroundColor: props.underlayColor,
          opacity: props.activeOpacity,
        },
        focused && props.styleFocused,
        pressed && props.stylePressed,
      ]}>
      {props.children || <View />}
    </TouchableHighlight>
  );
})

Touchable = Platform.select({
  android: TouchableNativeFeedback,
  default: TouchableHighlight,
})

render() {
    return (
      <Modal
        avoidKeyboard={true}
        isVisible={this.visible}
        style={sdStyles.modal}
        animationIn="fadeIn"
        animationOut="fadeOut"
        animationOutTiming={100}
        backdropOpacity={0.4}
        hideModalContentWhileAnimating={true}
        useNativeDriver={true}>
        <View style={sdStyles.main}>
          <View style={sdStyles.titleWrap}>
            <Text style={sdStyles.title}>{i18n.t("wallet-create-confirmpwd")}</Text>
            <TouchableHighlight
              style={sdStyles.close}
              onPress={this.dismiss}
              underlayColor="transparent"
              activeOpacity={0.6}
              hitSlop={{ top: 20, left: 10, bottom: 16, right: 16 }}>
              <Image source={require("@img/wallet/close_icon.png")} />
            </TouchableHighlight>
          </View>
          <TextInput
            style={[sdStyles.input, { marginTop: 30 }]}
            placeholder={i18n.t("wallet-multisig-password-placeholder")}
            onChangeText={this.onChangePassword}
            secureTextEntry={true}
            clearButtonMode="while-editing"
            autoFocus={true}
          />
          <Button
            title={i18n.t("wallet-receive-settings-confirm")}
            containerStyle={sdStyles.buttonContainerStyle}
            onPress={this.onConfirmPress}
            disabled={this.disabled}
          />
        </View>
      </Modal>
    );
  }

StyledOption = styled(TouchableHighlight)`
  background-color: ${styles.option.backgroundColor};
  border-bottom-width: ${styles.option.borderBottomWidth};
  border-color: ${styles.option.borderColor};
`

ListItemPlayground = () => {
  const params = useView({
    componentName: "ListItem",
    props: {
      children: {
        type: PropTypes.ReactNode,
        value: `<Avatar source={{uri: "https://avatars0.githubusercontent.com/u/32242596?s=460&u=1ea285743fc4b083f95d6ee0be2e7bb8dcfc676e&v=4"}} /> 
          <ListItem.Content>
            <ListItem.Title><Text>Pranshu Chittora</Text></ListItem.Title>
            <ListItem.Subtitle><Text>React Native Elements</Text></ListItem.Subtitle>
          </ListItem.Content>`,
      },
      bottomDivider: {
        type: PropTypes.Boolean,
        value: false,
      },
      Component: {
        type: PropTypes.Object,
        value: `TouchableHighlight`,
        description:
          "View or TouchableHighlight (default) if onPress method is added as prop",
      },
      containerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      disabled: {
        type: PropTypes.Boolean,
        value: false,
      },
      disabledStyle: {
        type: PropTypes.Object,
        value: `{opacity:0.5}`,
      },
      onLongPress: {
        type: PropTypes.Function,
        value: `() => console.log("onLongPress()")`,
      },
      onPress: {
        type: PropTypes.Function,
        value: `() => console.log("onLongPress()")`,
      },
      pad: {
        type: PropTypes.Number,
        value: 20,
      },
      topDivider: {
        type: PropTypes.Boolean,
        value: false,
      },
      ViewComponent: {
        type: PropTypes.Object,
        value: ``,
        description: "ontainer for linear gradient (for non-expo user)",
      },
    },
    scope: {
      ListItem,
      Avatar,
      Text,
      TouchableHighlight,
    },
    imports: {
      "react-native-elements": {
        named: ["ListItem", "Avatar"],
      },
      "react-native": {
        named: ["TouchableHighlight"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}

StyledButton = styled(TouchableHighlight)`
  background-color: ${styles.backgroundColor};
  border-radius: ${(props) => props.theme.spacings.xxsmall};
  border: ${styles.border};
`

render(){
        const { item, index, darkMode, lang, navigation } = this.props

        return (
            <View key={index} style={{
                height: 35,
                width: "100%",
                paddingLeft: 15,
                paddingRight: 15,
                marginBottom: 10
            }}>
                <View style={{
                    height: "auto",
                    width: "100%",
                    backgroundColor: darkMode ? "#171717" : "lightgray",
                    borderRadius: 10
                }}>
                    <TouchableHighlight underlayColor={"gray"} style={{
                        width: "100%",
                        height: "auto",
                        borderRadius: 10
                    }} onPress={() => {
                        navigationAnimation({ enable: true }).then(() => {
                            navigation.dispatch(StackActions.push("EventsInfoScreen", {
                                uuid: item.uuid
                            }))
                        })
                    }}>
                        <View style={{
                            width: "100%",
                            height: "auto",
                            flexDirection: "row",
                            justifyContent: "space-between",
                            paddingLeft: 10,
                            paddingRight: 10,
                            paddingTop: 9,
                            paddingBottom: 10
                        }}>
                            <Text style={{
                                color: darkMode ? "white" : "black",
                                fontSize: 13,
                                width: "45%"
                            }} numberOfLines={1}>
                                {this.state.eventText}
                            </Text>
                            <View style={{
                                flexDirection: "row",
                                paddingTop: 2
                            }}>
                                <Text style={{
                                    color: "gray",
                                    paddingRight: 10,
                                    fontSize: 12
                                }}>
                                    {new Date(item.timestamp * 1000).toLocaleDateString()} {new Date(item.timestamp * 1000).toLocaleTimeString()}
                                </Text>
                                <Ionicon name="chevron-forward-outline" size={15} color="gray" style={{
                                    marginTop: 0
                                }} />
                            </View>
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }

Button = props => (
  <TouchableHighlight style={styles.button} onPress={props.onClick}>
    <Text style={styles.buttonText}>{props.children}</Text>
  </TouchableHighlight>
)

TouchableHighlight.defaultProps.underlayColor = theme.underlayColor;

render(){
    this.height = Math.round(Dimensions.get('screen').height);
    this.width = Math.round(Dimensions.get('screen').width);
    return (
      <SafeAreaView style={{
        width: this.width,
        height: this.height,
        flex: 1,
        alignItems: 'center'}}>
        <StatusBar
        backgroundColor="#f4511e"/>
        <View style={{height: this.height/8}} />
        <View
          style={{
            flex:1,
            width: this.width,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <View
            style={{
              flex:1,
              width: this.width,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <TextInput
              spellCheck={false}
              autoCorrect={false}
              placeholderTextColor="rgba(0,0,0,0.4)"
              placeholder={"First name"}
              style={{
                width: this.width*7/10,
                borderColor: 'purple',
                borderWidth: 1,
                borderRadius: 8
              }}
              onChangeText={(text) =>
                this.setState({firstname: text})
              }></TextInput>
          </View>
          <View
            style={{
              flex:1,
              width: this.width,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <TextInput
              spellCheck={false}
              autoCorrect={false}
              placeholderTextColor="rgba(0,0,0,0.4)"
              placeholder={"Last name"}
              style={{
                width: this.width*7/10,
                borderColor: 'purple',
                borderWidth: 1,
                borderRadius: 8
              }}
              onChangeText={(text) =>
                this.setState({lastname: text})
              }></TextInput>
          </View>
          <View
            style={{
              flex:1,
              width: this.width,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <TextInput
              spellCheck={false}
              autoCorrect={false}
              placeholderTextColor="rgba(0,0,0,0.4)"
              placeholder={"Score"}
              style={{
                width: this.width*7/10,
                borderColor: 'purple',
                borderWidth: 1,
                borderRadius: 8
              }}
              onChangeText={(text) =>
                this.setState({score: text})
              }></TextInput>
          </View>
        </View>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <TouchableHighlight
            style={{backgroundColor: "green", alignItems: 'center', borderColor: "green",
            borderRadius: 8, borderWidth: 1, paddingVertical: 10, paddingHorizontal: 20}}
            onPress={() =>{this.addScore()}}>
            <Text style={{color:"white"}}>Submit Score</Text>
          </TouchableHighlight>
        </View>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <TouchableHighlight
            style={{backgroundColor: "#2196F3", alignItems: 'center', borderColor: "#2196F3",
            borderRadius: 8, borderWidth: 1, paddingVertical: 10, paddingHorizontal: 20}}
            onPress={() =>{this.props.navigation.navigate('Leaderboard')}}>
            <Text style={{color:"white"}}>Go to Leaderboard</Text>
          </TouchableHighlight>
        </View>
      </SafeAreaView>
    );
  }

export default function JobList(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/job-post/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Job-Detail", { data: data })
    }

    const renderData = (item) => {
        var date = new Date(`${item.post_date}`)
        return (
            <>
                {/* <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                    <Text style={{ fontSize: 25 }}>{item.title}</Text>
                </Card> */}
                <View style={{ flex: 1 }}>
                    <View style={{ backgroundColor: "#eee", overflow: "hidden", flexDirection: 'row', flexWrap: 'wrap' }}>
                        <TouchableHighlight onPress={() => clickedItem(item)}>
                            <Image
                                source={{ uri: `${item.Company_image}` }}
                                style={{
                                    height: 135,
                                    width: 155,
                                    margin: 7,

                                }}
                            />
                        </TouchableHighlight>
                        <View style={{ width: 155, marginTop: 10, }}>

                            <Text
                                onPress={() => clickedItem(item)}
                                style={{ color: "#000", paddingTop: 5, fontSize: 16, }}>
                                {item.title}
                            </Text>
                            <Text style={{ fontSize: 13, color: '#808080' }}>{date.getDate()}-{date.getMonth()}-{date.getFullYear()}</Text>
                        </View>
                    </View>
                </View>
            </>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            {/* <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            /> */}
        </View>


    )
}

render() {
    const dropdown_6_icon = this.state.dropdown_6_icon_heart ? require('./images/heart.png') : require('./images/flower.png');
    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        <View style={styles.row}>
          <View style={styles.cell}>
            <ModalDropdown style={styles.dropdown_1}
                           options={DEMO_OPTIONS_1}
                           renderButtonComponent={TouchableHighlight}
                           renderButtonProps={{ underlayColor: 'lightgray' }}
            />
            <ModalDropdown style={styles.dropdown_6}
                           options={DEMO_OPTIONS_1}
                           onSelect={(idx, value) => this._dropdown_6_onSelect(idx, value)}>
              <Image style={styles.dropdown_6_image}
                     source={dropdown_6_icon}
              />
            </ModalDropdown>
          </View>
          <View style={styles.cell}>
            <ModalDropdown ref="dropdown_2"
                           style={styles.dropdown_2}
                           textStyle={styles.dropdown_2_text}
                           dropdownStyle={styles.dropdown_2_dropdown}
                           options={DEMO_OPTIONS_2}
                           renderButtonText={(rowData) => this._dropdown_2_renderButtonText(rowData)}
                           renderRow={this._dropdown_2_renderRow.bind(this)}
                           renderRowComponent={TouchableHighlight}
                           renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
            />
            <TouchableOpacity onPress={() => {
              this.refs.dropdown_2.select(0);
            }}>
              <Text style={styles.textButton}>
                select Rex
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.row}>
          <ScrollView ref={el => this._scrollView = el}
                      style={styles.scrollView}
                      contentContainerStyle={styles.contentContainer}
                      showsVerticalScrollIndicator={true}
                      scrollEventThrottle={1}>
            <Text>
              {'Scroll view example.'}
            </Text>
            <ModalDropdown ref={el => this._dropdown_3 = el}
                           style={styles.dropdown_3}
                           options={DEMO_OPTIONS_1}
                           adjustFrame={style => this._dropdown_3_adjustFrame(style)}
                           dropdownTextStyle={styles.dropdown_3_dropdownTextStyle}
                           dropdownTextHighlightStyle={styles.dropdown_3_dropdownTextHighlightStyle}
            />
          </ScrollView>
        </View>
        <View style={styles.row}>
          <View style={[styles.cell, {justifyContent: 'flex-end'}]}>
            <ModalDropdown style={styles.dropdown_4}
                           dropdownStyle={styles.dropdown_4_dropdown}
                           options={this.state.dropdown_4_options}
                           defaultIndex={-1}
                           defaultValue={this.state.dropdown_4_defaultValue}
                           onDropdownWillShow={this._dropdown_4_willShow.bind(this)}
                           onDropdownWillHide={this._dropdown_4_willHide.bind(this)}
                           onSelect={(idx, value) => this._dropdown_4_onSelect(idx, value)}
            />
          </View>
          <View style={[styles.cell, {justifyContent: 'flex-end'}]}>
            <TouchableOpacity onPress={this._dropdown_5_show.bind(this)}>
              <Text style={styles.textButton}>
                {'Show dropdown'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this._dropdown_5_select(2)}>
              <Text style={styles.textButton}>
                {'Select the 3rd option'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this._dropdown_5_select(-1)}>
              <Text style={styles.textButton}>
                {'Clear selection'}
              </Text>
            </TouchableOpacity>
            <ModalDropdown ref={el => this._dropdown_5 = el}
                           style={styles.dropdown_5}
                           options={['Select me to hide', `I can't be selected`, 'I can only be selected outside']}
                           defaultValue='Try the Show button above'
                           onDropdownWillShow={this._dropdown_5_willShow.bind(this)}
                           onDropdownWillHide={this._dropdown_5_willHide.bind(this)}
                           onSelect={this._dropdown_5_onSelect.bind(this)}
            />
          </View>
        </View>
      </View>
    );
  }