react-native#TouchableWithoutFeedback JavaScript Examples

render() {
    const profile = this.getProfile();
    const thumbnail = get(profile, 'avatarHashes.tiny');
    const { loading } = this.props.item || {};
    return (
      <React.Fragment>
        <TouchableWithoutFeedback onPress={this.showActionSheet} disabled={!this.isMyComment()}>
          <View style={[styles.wrapper, loading && styles.loadingBg]}>
            <AvatarImage
              style={styles.avatarImage}
              thumbnail={thumbnail}
              onPress={this.onPressAvatar}
            />
            {this.renderContent()}
          </View>
        </TouchableWithoutFeedback>
        <OBActionSheet
          ref={this.setActionSheet}
          onPress={this.handleChange}
          options={['Delete', 'Cancel']}
          destructiveButtonIndex={0}
          cancelButtonIndex={1}
        />
      </React.Fragment>
    );
  }

render() {
    const { containerStyle, label, placeholder, borderBottom } = this.props;

    return (
      <View style={styles.wrap}>
        <TouchableWithoutFeedback onPress={this.onCellPress}>
          <View style={[styles.container, borderBottom ? styles.containerBorder : {}, containerStyle]}>
            {label && label.length > 0 && <Text style={styles.label}>{label}</Text>}
            <Text
              style={[
                styles.selectTextView,
                !!this.state.value ? styles.selectTextView_selected : styles.selectTextView_placeholder,
              ]}>
              {this.state.value || placeholder}
            </Text>
            <Image source={require("@img/icon/arrow-right.png")} />
          </View>
        </TouchableWithoutFeedback>

        <ActionSheet
          options={this.state.options}
          cancelButtonIndex={this.state.cancelIndex}
          onPress={this.onActionSheetItemPress}
          ref={this.handleActionSheetRef}
        />
      </View>
    );
  }

Footer = ({likesCount: likesCountProp, caption, postedAt}) => {

  const [isLiked, setIsLike] = useState(false);
  const [likesCount, setLikesCount] = useState(0);

  const onLikePressed = () => {
    const amount = isLiked ? -1 : 1;
    setLikesCount(likesCount + amount);

    setIsLike(!isLiked);
  }

  useEffect(() =>{
    setLikesCount(likesCountProp)
  }, [])

  return (
    <View style={styles.container}>

      <View style={styles.iconsContainer}>
        <View style={styles.leftIcons}>
          <TouchableWithoutFeedback onPress={onLikePressed}>
            {isLiked ?
              <ADIcon name="heart" size={25} color={"#e73838"} />
              : <ADIcon name="hearto" size={25} color={"#545454"} />
            }
          </TouchableWithoutFeedback>
          <FontistoIcon name="comment" size={23} color={"#545454"}/>
          <IoniconsIcon name="paper-plane-outline" size={25} color={"#545454"}/>
        </View>
        <FAIcon name="bookmark-o" size={25} color={"#545454"}/>
      </View>

      <Text style={styles.likes}>{likesCount} Likes</Text>
      <Text style={styles.caption}>{caption}</Text>
      <Text style={styles.postedAt}>{postedAt}</Text>
    </View>
  )
}

imageComponent = (data, index, onPress) => {
  const imageUrl = getImageUrl(data.file_path, "uri", "w300");
  const style = { ...Styles.movieImages, ...{ width: 100 * data.aspect_ratio } };

  return (
    <TouchableWithoutFeedback onPress={() => onPress(index)} style={[style, Styles.imagePlaceholder]}>
      <FastImage source={imageUrl} style={style} />
    </TouchableWithoutFeedback>
  );
}

render() {
    const { open, close } = this.props;
    return (
      <Modal transparent animated animationType="fade" visible={open}>
        <View style={style.bottomSheetContainer}>
          <TouchableWithoutFeedback
            onPress={() => {
              this.sheetRef.current.snapTo(1);
              this.props.close();
            }}>
            <View style={style.fullFlex}>
              <BottomSheet
                ref={this.sheetRef}
                snapPoints={[250, 0]}
                borderRadius={30}
                initialSnap={1}
                enabledInnerScrolling={false}
                renderHeader={this.renderHeader}
                enabledContentTapInteraction
                overdragResistanceFactor={10}
                renderContent={this.renderContent}
                onCloseEnd={() => {
                  close();
                }}
              />
            </View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
    );
  }

function AddButton(props) {
	return (
		<TouchableWithoutFeedback onPress={props.addBook}>
			<View style={styles.view}>
				<Icon {...styles.icon} />
			</View>
		</TouchableWithoutFeedback>
	);
}

Assets = ({
  selectedAsset, setSelectedAsset, surveyingOrganization, scrollViewScroll, setScrollViewScroll
}) => {
  const [page, setPage] = useState('assetCore');

  const switchAssetPage = (pageIndex, asset) => {
    setPage(pageIndex);
    setSelectedAsset(asset);
  };
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <View>
        {selectedAsset && (
        <NewAssets
          setSelectedAsset={setSelectedAsset}
          selectedAsset={selectedAsset}
          surveyingOrganization={surveyingOrganization}
          assetPageIndex={page}
          scrollViewScroll={scrollViewScroll}
          setScrollViewScroll={setScrollViewScroll}
          setPage={setPage}
        />
        )}
        {selectedAsset === null && (
        <ViewAssets
          organization={surveyingOrganization}
          switchAssetPage={switchAssetPage}
        />
        )}
      </View>
    </TouchableWithoutFeedback>
  );
}

function Card({ title, subTitle, imageUrl, onPress, thumbnailUrl }) {
	return (
		<TouchableWithoutFeedback onPress={onPress}>
			<View style={styles.card}>
				<Image
					style={styles.image}
					tint="light"
					preview={{ uri: thumbnailUrl }}
					uri={imageUrl}
				/>

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

function Touchable(props) {
  const animation = useRef(new Animated.Value(1)).current;

  const animationStart = () => {
    Animated.timing(
      animation,
      {
        toValue: 1.10,
        duration: 100,
        useNativeDriver: true
      }
    ).start();
  }

  const animationStop = () => {
    Animated.timing(
      animation,
      {
        toValue: 1,
        duration: 100,
        useNativeDriver: true
      }
    ).start();
  }

  return (
    <TouchableWithoutFeedback
      onPressIn={animationStart}
      onPressOut={animationStop}
      {...props}>
      <Animated.View style={{ ...props.style, transform: [{ scale: animation }] }}>
        {props.children}
      </Animated.View>
    </TouchableWithoutFeedback>
  );
}

Ripple.defaultProps = {
  ...TouchableWithoutFeedback.defaultProps,
  rippleColor: '#aaa',
  rippleOpacity: 0.30,
  rippleDuration: 300,
  rippleSize: 0,
  rippleContainerBorderRadius: 0,
  rippleCentered: false,
  rippleSequential: false,
  rippleFades: true,
  disabled: false,

  onRippleAnimation: (animation, callback) => animation.start(callback),
};

SignModal = ({ navigation }) => {
  const { colors } = useTheme()

  return (
    <TouchableWithoutFeedback onPress={() => navigation.goBack()}>
      <View as={SafeAreaView} style={styles.container}>
        <StatusBar hidden />
        <View
          style={[styles.modal, { backgroundColor: colors.background }]}
          onStartShouldSetResponder={() => true}
        >
          <View style={styles.buttonContainer}>
            <Button
              bgColor={colors.signUpButton}
              title="Sign Up"
              onPress={() => navigation.navigate('SignUp')}
            >
              <PlusCircle color={colors.white} />
            </Button>
            <Button
              bgColor={colors.signInButton}
              title="Sign In"
              onPress={() => navigation.navigate('SignIn')}
            >
              <LogIn color={colors.white} />
            </Button>
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
}

_renderModal() {
    const { animated, accessible, dropdownStyle } = this.props;
    const { showDropdown, loading } = this.state;

    if (showDropdown && this._buttonFrame) {
      const frameStyle = this._calcPosition();
      const animationType = animated ? 'fade' : 'none';

      return (
        <Modal
          animationType={animationType}
          visible
          transparent
          onRequestClose={this._onRequestClose}
          supportedOrientations={[
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right',
          ]}
        >
          <TouchableWithoutFeedback
            accessible={accessible}
            disabled={!showDropdown}
            onPress={this._onModalPress}
          >
            <View style={styles.modal}>
              <View style={[styles.dropdown, dropdownStyle, frameStyle]}>
                {loading ? this._renderLoading() : this._renderDropdown()}
              </View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      );
    }
  }

Icon = ({icon, onPress, styleIconText}) => {
    let getIconsTransformDynamicStyles = () => ({
        opacity : icon.position.x.interpolate({
            inputRange : [0, SQUARE_DIMENSIONS.WIDTH * 0.3, SQUARE_DIMENSIONS.WIDTH * 0.7],
            outputRange : [0.4, 1, 0.4]
        }),
        transform : [
            {
                scale : icon.position.x.interpolate({
                    inputRange : [0, SQUARE_DIMENSIONS.WIDTH * 0.375, SQUARE_DIMENSIONS.WIDTH * 0.8],
                    outputRange : [0.5, 1.2, 0.25]
                })
            }
        ]
    });

    return (
        <TouchableWithoutFeedback onPress={() => onPress(icon.id)}>
            <Animated.View
                style={[STYLES.icon, icon.styles, icon.position.getLayout(), getIconsTransformDynamicStyles()]}>
                {icon.isShown &&
                <View style={STYLES.iconContainer}>
                    {icon.el}
                    <Text style={[STYLES.iconText, styleIconText]}>{icon.title}</Text>
                </View>
                }
            </Animated.View>
        </TouchableWithoutFeedback>
    );
}

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

Feedback = () => {
  const navigation = useNavigation()
  const { t } = useTranslation()
  const { theme } = useTheme()

  const sendEmailHandler = ({ name, email, message }) => {
    const data = JSON.stringify({ name, email, message }).replace(/[{}'']/g, '')

    fetch('https://api.sendgrid.com/v3/mail/send', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + process.env.API_SEND_GRID_KEY
      },
      body: JSON.stringify({
        personalizations: [
          {
            to: [
              {
                email: process.env.SEND_GRID_EMAIL_TO
              }
            ],
            subject: 'Bus Timetable Feedback'
          }
        ],
        from: {
          email: process.env.SEND_GRID_EMAIL_FROM
        },
        content: [
          {
            type: 'text/plain',
            value: data
          }
        ]
      })
    })
      .then(() => {
        Alert.alert('', t('feedback.onSuccessfulSubmit'), [
          {
            text: t('feedback.cancel'),
            onPress: () => navigation.navigate('About')
          }
        ])
      })
      .catch(() => {
        Alert.alert(t('feedback.error'), t('feedback.onSubmitError'), [
          { text: t('feedback.cancel') }
        ])
      })
  }

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <Text style={[styles.info, { color: theme.text }]}>
          {t('feedback.info')}
        </Text>
        <ScrollView style={styles.form}>
          <Form
            onSubmitHandler={sendEmailHandler}
            namePlaceholder={t('feedback.namePlaceholder')}
            emailPlaceholder={t('feedback.emailPlaceholder')}
            messagePlaceholder={t('feedback.messagePlaceholder')}
            submitTitle={t('feedback.submitTitle')}
            schemaRequiredName={t('feedback.schemaRequiredName')}
            schemaRequiredEmail={t('feedback.schemaRequiredEmail')}
            schemaRequiredMessage={t('feedback.schemaRequiredMessage')}
            buttonColor={theme.buttonColor}
            buttonText={theme.buttonText}
          />
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  )
}

render() {
    const {
      loading, success, position,
      containerStyle, wrapperStyle,
      onPress, touchableProps, bottomContainerStyle,
    } = this.props;
    return (
      <View style={[styles[position].container, containerStyle[position]]}>
        <View>
          <View
            style={[
              styles[position].wrapper,
              wrapperStyle[position],
              this.getBubbleNextStyle(),
              this.getBubblePreviousStyle(),
            ]}
          >
            <TouchableWithoutFeedback
              onLongPress={this.onLongPress}
              onPress={onPress}
              accessibilityTraits="text"
              {...touchableProps}
            >
              <View>
                {this.renderOrderInfo()}
                {this.renderMessageImage()}
                {this.renderMessageText()}
                <View style={[styles.bottom, bottomContainerStyle[position]]}>
                  {this.renderTime()}
                  {position === 'right' && loading && (
                    <Ionicons style={styles.checkmark} name="md-time" size={10} color={formLabelColor} />
                  )}
                  {position === 'right' && !loading && success && (
                    <Ionicons style={styles.checkmark} name="md-checkmark" size={10} color="#8cd985" />
                  )}
                </View>
              </View>
            </TouchableWithoutFeedback>
          </View>
          {position === 'right' && !loading && !success && (
            <Text style={styles.errorMessage}>Couldn't send. Tap to retry</Text>
          )}
        </View>
        {position === 'right' && !loading && !success && (
          <Ionicons style={styles.alert} name="md-alert" size={14} color="rgb(255, 59, 48)" />
        )}
      </View>
    );
  }