react-native#ImageSourcePropType TypeScript Examples

Action = () => {
  const initialValue = ''
  const [actionIconValue, setActionIconValue] = React.useState(initialValue)
  const [actionImageValue, setActionImageValue] = React.useState(initialValue)

  return (
    <StoryWrapper title="Action">
      <StoryContainer title="Icon">
        <TextField
          action="icon"
          actionComponent={<IconButton onPress={() => ({})} />}
          helperText="Helper text"
          label="Label"
          placeholder="Placeholder"
          onChangeText={(text) => setActionIconValue(text)}
          value={actionIconValue}
        />
      </StoryContainer>
      <StoryContainer title="Image">
        <TextField
          action="image"
          actionComponent={(
            <Image
              source={placeholderImage as ImageSourcePropType}
              style={imageStyle}
            />
          )}
          helperText="Helper text"
          label="Label"
          placeholder="Placeholder"
          onChangeText={(text) => setActionImageValue(text)}
          value={actionImageValue}
        />
      </StoryContainer>
    </StoryWrapper>
  )
}

CircularProgressAvatar = ({
  image,
  progress,
  color,
  text,
  width = Math.floor((30 / 100) * Dimensions.get('screen').height),
  CustomComponent,
}: {
  image?: ImageSourcePropType
  progress: number
  color: string
  text?: string
  width?: number
  CustomComponent?: any
}) => {
  const outerPad = 0
  const circularWidth = width - (outerPad + 1) * 2
  return (
    <View
      style={{
        padding: outerPad,
        borderRadius: Math.floor(width / 2),
        width,
        height: width,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: COLORS.GRAY_1,
      }}
    >
      <View style={{ position: 'relative' }}>
        <AnimatedCircularProgress
          size={circularWidth}
          width={6}
          backgroundWidth={6}
          fill={progress}
          tintColor={color}
          tintColorSecondary={color}
          backgroundColor={COLORS.GRAY_1}
          arcSweepAngle={360}
          rotation={0}
          lineCap="round"
        />
        <View style={styles.imageWrapper}>
          {image ? (
            <Image
              source={image}
              style={{
                width: Math.floor((90 / 100) * circularWidth),
                height: Math.floor((90 / 100) * circularWidth),
                borderRadius: Math.floor(((90 / 100) * circularWidth) / 2),
              }}
            />
          ) : CustomComponent ? (
            <CustomComponent
              style={{
                width: Math.floor((90 / 100) * width),
                height: Math.floor((90 / 100) * width),
                borderRadius: Math.floor(((90 / 100) * width) / 2),
              }}
            />
          ) : null}
        </View>
      </View>
    </View>
  )
}

Image: React.FC<ImageProps> = ({
  source,
  resizeMode = "cover",
  style,
  ...props
}) => {
  let imageSource =
    source === null || source === undefined
      ? Config.placeholderImageURL
      : source;

  const styles = StyleSheet.flatten(style || {});
  const { aspectRatio, width, height } = generateDimensions(
    styles as ImageStyleProp
  );

  if (aspectRatio) {
    return (
      <AspectRatio style={[style, { width, height, aspectRatio }]}>
        <NativeImage
          {...props}
          source={imageSource as ImageSourcePropType}
          resizeMode={resizeMode}
          style={[
            style,
            {
              height: "100%",
              width: "100%",
            },
          ]}
        />
      </AspectRatio>
    );
  }

  return (
    <NativeImage
      {...props}
      source={source as ImageSourcePropType}
      resizeMode={resizeMode}
      style={style}
    />
  );
}

Searchbar = (props: SearchbarProps) => {
  const Colors = useColors();
  const styles = getStyles(Colors);

  // destructure custom props and TextInput props separately
  const customProps = getCustomProps(props);
  const textInputProps = getTextInputProps(customProps, props);

  const {
    backIcon,
    backIconStyle,
    clearIcon,
    clearIconStyle,
    containerStyle,
    inputStyle,
    leftIcon,
    leftIconStyle,
    leftLogo,
    leftLogoStyle,
    onBackIconPress,
    onClearIconPress,
    onLeftIconPress,
    onLeftLogoPress,
    onRightIconPress,
    onRightLogoPress,
    onPress,
    rightIcon,
    rightIconStyle,
    rightLogo,
    rightLogoStyle,
    showClearIcon,
    showBackIcon,
  } = customProps;

  const { onChangeText, editable, value } = textInputProps;

  const renderClearIcon = () => {
    if (!showClearIcon) {
      return null;
    }

    // we have to show transparent clear icon when value in textinput is empty
    // otherwise the text will move left once the clear icon is rendered
    const opacity = value ? 1 : 0;

    const onPressUtil = () => {
      if (opacity) {
        if (onClearIconPress) {
          onClearIconPress();
        } else if (onChangeText) {
          onChangeText('');
        }
      }
    };

    return renderIcon(clearIcon, clearIconStyle, onPressUtil, opacity);
  };

  const renderBackIcon = () => {
    if (!showBackIcon) {
      return null;
    }
    const opacity = 1;
    return renderIcon(backIcon, backIconStyle, onBackIconPress, opacity);
  };

  const renderLogo = (
    name: ImageSourcePropType,
    logoStyle: StyleProp<ImageStyle> | undefined,
    onLogoPress: (() => void) | undefined,
  ) => {
    const source = name;

    const onPressUtil = onLogoPress || onPress;

    return (
      <TouchableWithoutFeedback onPress={onPressUtil}>
        <Image
          source={source}
          style={{
            alignSelf: 'center',
            height: customScaleDimension(30, 'width', 0.2),
            width: customScaleDimension(30, 'width', 0.2),
            ...(logoStyle as object),
          }}
        />
      </TouchableWithoutFeedback>
    );
  };

  const renderIcon = (
    name: string | undefined,
    iconStyle: StyleProp<TextStyle> | undefined,
    onIconPress: (() => void) | undefined,
    opacity: number,
  ) => {
    const onPressUtil = onIconPress || onPress;

    return (
      <Icon
        name={name}
        size={customScaleDimension(30, 'width', 0.2)}
        onPress={onPressUtil}
        color={Colors.font_1}
        style={{ opacity, alignSelf: 'center', ...(iconStyle as object) }}
      />
    );
  };

  const renderLogoOrIcon = (
    logo: ImageSourcePropType | undefined,
    logoStyle: StyleProp<ImageStyle> | undefined,
    onLogoPress: (() => void) | undefined,
    icon: string | undefined,
    iconStyle: StyleProp<TextStyle> | undefined,
    onIconPress: (() => void) | undefined,
  ) => {
    if (logo) {
      return renderLogo(logo, logoStyle, onLogoPress);
    }
    if (icon) {
      const opacity = 1;
      return renderIcon(icon, iconStyle, onIconPress, opacity);
    }

    return null;
  };

  const renderLeft = () => {
    if (!editable) {
      return renderLogoOrIcon(
        leftLogo,
        leftLogoStyle,
        onLeftLogoPress,
        leftIcon,
        leftIconStyle,
        onLeftIconPress,
      );
    }
    return renderBackIcon();
  };

  const renderRight = () => {
    if (!editable) {
      return renderLogoOrIcon(
        rightLogo,
        rightLogoStyle,
        onRightLogoPress,
        rightIcon,
        rightIconStyle,
        onRightIconPress,
      );
    }
    return renderClearIcon();
  };

  // define some default values
  const searchbarContainerStyle = containerStyle
    ? { ...styles.searchbarContainer, ...(containerStyle as object) }
    : styles.searchbarContainer;

  const searchbarTextInputStyle = inputStyle
    ? { ...styles.textInput, ...(inputStyle as object) }
    : styles.textInput;

  textInputProps.onTouchStart = editable
    ? textInputProps.onTouchStart
    : onPress;

  textInputProps.selectionColor = textInputProps.selectionColor
    ? textInputProps.selectionColor
    : Colors.primary;

  textInputProps.placeholderTextColor = textInputProps.placeholderTextColor
    ? textInputProps.placeholderTextColor
    : Colors.font_3;

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={searchbarContainerStyle}>
        {renderLeft()}
        <TextInput {...textInputProps} style={searchbarTextInputStyle} />
        {renderRight()}
      </View>
    </TouchableWithoutFeedback>
  );
}