react-native#Image TypeScript Examples

ImageIcon: React.FC<ImageIconInterface> = (props) => {
  const {styleProps} = useContext(PropsContext);
  const {theme} = styleProps || {};
  const imageRef = React.useRef(null);

  useImageDelay(imageRef, 10, props?.name || '', props?.color);

  return (
    <Image
      ref={Platform.OS === 'web' ? imageRef : undefined}
      style={[
        {
          width: '100%',
          height: '100%',
          tintColor: props.color || theme || '#fff',
        },
        props.style as object,
      ]}
      resizeMode={'contain'}
      source={{uri: props.name ? icons[props.name] : props.icon}}
    />
  );
}

RegionItem_ = ({code, onPress, name, flagIcon, selected}: RegionItemProps) => (
  <>
    <TouchableOpacity onPress={() => onPress(code)} accessibilityRole="radio" accessibilityState={{selected}}>
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Box flexDirection="row" alignItems="center" paddingVertical="s">
          <Image source={flagIcon} style={styles.flag} />
          <Text variant="bodyText" color="overlayBodyText" marginHorizontal="m">
            {name}
          </Text>
        </Box>
        <Box alignSelf="center">{selected && <Icon size={32} name="icon-check" />}</Box>
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)

AppRoutes: React.FC = () => (
  <App.Navigator
    screenOptions={{
      headerShown: true,
      cardStyle: { backgroundColor: '#EBEEF8' },
    }}
    initialRouteName="Dashboard"
  >
    <App.Screen
      options={{
        headerShown: true,
        headerTransparent: true,
        headerTitle: () => <Image source={Logo} />,
      }}
      name="Dashboard"
      component={Dashboard}
    />
    <App.Screen
      options={{
        headerTransparent: true,
        headerTitle: () => <Image source={Logo} />,
        headerBackTitleVisible: false,
        headerLeftContainerStyle: {
          marginLeft: 20,
        },

        headerBackImage: () => <FeatherIcon name="chevron-left" size={24} />,
      }}
      name="Cart"
      component={Cart}
    />
  </App.Navigator>
)

FlutterwaveCheckoutLoader: React.FC<{}> = (): React.ReactElement => {
  return (
    <View style={styles.loading} testID="flw-checkout-loader">
      <Image
        source={loader}
        resizeMode="contain"
        style={styles.loadingImage}
      />
    </View>
  );
}

render() {
        const { type, style, title } = this.props;
        const icon = this._getIconPath(type);

        // TODO: implement svg usage
        return (
            <TouchableHighlight
                style={[styles.container, style ]}
                underlayColor="transparent"
                onPress={this._onPressHandler}
            >
                <>
                    <View style={styles.iconWrap}>
                        <Image style={styles.icon} source={icon} />
                    </View>
                    <Text style={[TextStyles.labelSmall, { textTransform: 'uppercase' }]}>{title}</Text>
                </>
            </TouchableHighlight>
        );
    }

render() {
    const coffee = this.props.route.params.coffee
    return (
      <View style={styles.container}>
        <Image resizeMode="contain" style={styles.image} source={coffee.icon} />
        <Text style={styles.text}>{coffee.name}. {coffee.subtitle}</Text>
        <Button buttonStyle={styles.button} titleStyle={styles.buttonText} title="Buy Now" onPress={this.buyTapped} />
      </View>
    )
  }

tabs: TabsConfigsType = {
  Home: {
    icon: ({progress, focused}) => (
      <Image
        style={{tintColor: focused ? 'red' : 'green'}}
        source={require('./assets/icon/movie-reel.png')}
      />
    ),
  },
  NotificationScreen: {
    icon: ({progress}) => (
      <Image
        style={{tintColor: 'red'}}
        source={require('./assets/icon/alarm.png')}
      />
    ),
  },
  Settings: {
    icon: ({progress}) => (
      <Image
        style={{tintColor: 'red'}}
        source={require('./assets/icon/event-ticket.png')}
      />
    ),
  },
  ProfileScreen: {
    icon: ({progress}) => (
      <Image
        style={{tintColor: 'red'}}
        source={require('./assets/icon/single-03.png')}
      />
    ),
  },
}

Icon = ({ source, height, width, customStyles }: IconProps) => {
  return (
    <Image
      source={typeof source === 'string' ? { uri: source, cache: 'force-cache' } : source}
      style={[{ width: width || height, height: height || width }, customStyles]}
      resizeMode="contain"
      resizeMethod="resize"
    />
  );
}

function cacheImages(images: (string | number)[]) {
  return images.map((image) => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

AlbumComponent = (props: AlbumProps) => {

  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('AlbumScreen', { id: props.album.id })
  }

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.container}>
          <Image source={{uri: props.album.imageUri}} style={styles.image}/>
          <Text style={styles.text}>{props.album.artistsHeadline}</Text>
      </View>
    </TouchableWithoutFeedback>

  )
}

FleetView = (props: FleetViewProps) => {
  const { user, fleet, goToNextFleet, goToPrevFleet } = props;
  return (
    <View style={styles.container}>

      {fleet.image && <Image source={{ uri: fleet.image}} style={styles.image}/>}
      <Text style={styles.text}>{fleet.text}</Text>

      <View style={styles.userHeaderContainer}>
        <ProfilePicture image={user.image} size={70} />
        <View style={styles.userNames}>
          <Text style={styles.name}>{user.name}</Text>
          <View style={{flexDirection: 'row'}}>
            <Text style={styles.username}>
              @{user.username}
            </Text>
            <Text style={styles.time}>
              {moment(fleet.createdAt).fromNow()}
            </Text>
          </View>
        </View>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={{flex: 1}} onPress={() => goToPrevFleet()} />
        <TouchableOpacity style={{flex: 1}} onPress={() => goToNextFleet()} />
      </View>

    </View>
  )
}

LibraryMapScreen = ({route}: {route: LibraryMapRouteProp}) => {
	const [sections, setSections] = useState<LibrarySection[]>([]);

	useEffect(() => {
		helper
			.getLibrarySectionList(route.params.floor, route.params.dateChoice)
			.then(setSections)
			.catch(NetworkRetry);
	}, [route.params.dateChoice, route.params.floor]);

	const {width, height} = Dimensions.get("window");

	return (
		<View>
			<Image
				source={{
					uri: `${LIBRARY_IMAGE_BASE}${route.params.floor.id}/floor.jpg`,
				}}
				style={{width, height}}
				resizeMode="contain"
			/>
			{sections.map(({id, posX, posY, zhName}) => (
				<View
					key={id}
					style={{
						position: "absolute",
						left: (posX / 100) * width,
						top:
							(posY / 100) * width * (9 / 16) + (height - width * (9 / 16)) / 2,
						backgroundColor: "#cccc",
					}}>
					<Text style={{color: "black"}}>{zhName}</Text>
				</View>
			))}
		</View>
	);
}

Header: React.FC<Props> = ({ children, shareContent }) => {
  const styles = useThemedStyles(themedStyles);
  return (
    <View style={styles.container}>
      <Text
        style={styles.header}
        accessibilityRole="header"
        testID="header-text"
      >
        {children}
      </Text>

      {!!shareContent && (
        <TouchableOpacity
          testID="header-share"
          accessibilityLabel="Share"
          accessibilityRole="button"
          onPress={() => {
            Share.share({ message: shareContent });
          }}
        >
          <Image
            source={require('./share.png')}
            resizeMode="contain"
            style={styles.shareIcon}
          />
        </TouchableOpacity>
      )}
    </View>
  );
}

CodeImage: React.FC<CodeImageProps> = ({ id }) => {
  return (
    <Image
      style={{
        borderRadius: 9,
        height: codeImageHeight,
        width: codeImageWidth,
      }}
      resizeMode="contain"
      source={{ uri: `https://img.vsinder.com/${id}` }}
    />
  );
}

Flair: React.FC<FlairProps> = ({ size = 24, name }) => {
  if (!(name in flairMap)) {
    return null;
  }
  return (
    <Image
      source={{
        uri: `https://flair.benawad.com/` + flairMap[name],
      }}
      style={{ height: size, width: size }}
    />
  );
}

ButtonPrimary: React.FC<ButtonPrimaryProps> = (props) => {

    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    return (
        <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.buttonPrimary} onPress={props.action}>
                {props.text == getTranslated(language).send &&
                    <Image style={styles.icon} source={require('../assets/images/send-button.png')} />
                }
                {props.text == getTranslated(language).receive &&
                    <Image style={styles.icon} source={require('../assets/images/received-button.png')} />
                }
                <Text style={styles.buttonText}>{props.text}</Text>
            </TouchableOpacity>
        </View>
    )

}

TabIcon: React.FC<Props> = (props) => {
  return (
    <Image
      style={[
        styles.tabBarIcon,
        props.isNonLabel ? styles.midIconSize : styles.normIconSize
      ]}
      source={props.image}
    />
  );
}

FormHeader = ({
  style,
  children,
  onBack,
  backIcon,
  whiteLogo,
}: PropTypes) => {
  const logoHeight = Dimensions.get('window').height < 600 ? 40 : 60
  const logoWidth = (logoHeight * 101) / 54
  return (
    <View style={style}>
      <View style={styles.header}>
        {onBack ? <BackButton onPress={onBack} backIcon={backIcon} /> : null}
        <View style={styles.space} />
        <Image
          source={
            whiteLogo
              ? require('./form-logo-white.png')
              : require('./form-logo.png')
          }
          style={{ height: logoHeight, width: logoWidth }}
          resizeMode="contain"
        />
      </View>
      {children}
    </View>
  )
}

export default function App() {
	const mode = useDarkModeContext()
	const styles = useDynamicValue(dynamicStyles)
	const logo = useDynamicValue(require('./logoLight.png'), require('./logoDark.png'))

	return (
		<View style={styles.container}>
			<Image source={require('./meme.png')} style={styles.meme} />

			<Image source={logo} style={styles.image} />

			<Text style={styles.initialStyle}>Current mode: {mode}</Text>

			<DarkModeProvider mode="dark">
				<Extra />
			</DarkModeProvider>
			<DarkModeProvider mode="light">
				<Extra />
			</DarkModeProvider>

			{/* <Counter /> */}
		</View>
	)
}

ItemView = ({item, image, isActive, altText, header, children}: ItemViewProps) => {
  const i18n = useI18n();
  const autoFocusRef = useAccessibilityAutoFocus(isActive);

  return (
    <>
      <Text focusRef={autoFocusRef} marginBottom="s" marginTop="s" color="darkText">
        <Text fontSize={24} fontWeight="bold" color="infoBlockNeutralText">
          {[i18n.translate('Onboarding.Step'), onboardingData.indexOf(item) + 1].join(' ')}
        </Text>
        {[i18n.translate('Onboarding.Of'), onboardingData.length].join('')}
      </Text>
      {image ? (
        <Box marginTop="xxxs" marginBottom="l">
          <Image accessible style={styles.image} source={image} accessibilityLabel={altText} />
        </Box>
      ) : null}

      <Text variant="bodyTitle" color="headerText" marginBottom="l" accessibilityRole="header">
        {header}
      </Text>
      {children}
    </>
  );
}

function Example({ title, children }: ExampleProps) {
  const navigation = useNavigation();

  return (
    <ScreenContainer
      hasSafeArea={true}
      hasTopSafeArea={true}
      hasBottomSafeArea={true}
      scrollable={false}
    >
      <View style={exampleStyles.headerStyle}>
        <TouchableOpacity
          style={exampleStyles.menuButtonStyle}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Image
            style={exampleStyles.menuButtonImageStyle}
            source={require("./assets/images/hamburger.png")}
          />
        </TouchableOpacity>

        <Text style={[exampleStyles.headerTextStyle]}>{title}</Text>
      </View>
      <ScreenContainer scrollable={true} hasSafeArea={false}>
        {children}
      </ScreenContainer>
    </ScreenContainer>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={require("./assets/adaptive-icon.png")}
        style={styles.logo}
      />
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  )
}

export default function Header() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => Router.push('/map')}
        activeOpacity={0.5}
        style={styles.logoContainer}>
        <Image style={styles.logo} source={logoSource} resizeMode="cover" />
      </TouchableOpacity>
      <TabNavigator />
    </View>
  );
}

FoodCard = () => {
  return (
    <TouchableOpacity onPress={() => null} style={styles.card}>
      <View style={styles.imageBox}>
        <Image source={DefaultImage} />
      </View>
      <Text style={styles.title}>Red Apple</Text>
      <Text style={styles.subtitle}>1kg, Price</Text>
      <View style={styles.footer}>
        <Text style={styles.price}>$4.99</Text>
        <TouchableOpacity onPress={() => null} style={styles.button}>
          <PlusIcon />
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
}

PageHeader: React.FC<PageHeaderProps> = ({title}) => {

    const {navigate} = useNavigation();

    function handleGoBack() {
        navigate('Landing');
    }

  return <View style={styles.container}>
      <View style={styles.topBar}>
          <BorderlessButton onPress={handleGoBack}>
          <Image source={backIcon} resizeMode="contain" />
          </BorderlessButton>

          <Image source={logoImg} resizeMode="contain" />
      </View>
      <Text style={styles.title}>
          {title}
      </Text>
  </View>
}

BackSide: React.FC<Props> = ({ model, cardType }) => {
  return (
    <>
      <View style={styles.black} />
      <View style={styles.tapeContainer}>
        <Image style={styles.tape} source={tape} />
        <View style={styles.cvvContainer}>
          <PlaceholderText
            style={styles.cvvText}
            value={model.cvv}
            placeholder={cardType === 'american-express' ? 'XXXX' : 'XXX'}
          />
        </View>
      </View>
      <View style={styles.footer}>
        <CardIcon cardNumber={model.cardNumber} />
      </View>
    </>
  )
}

ImageBlock: FC<ImageProps> = ({ node, assets }) => {
  const img = assets?.block.find((i) => i.sys.id === node.data.target.sys.id)
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })

  useLayoutEffect(() => {
    Image.getSize(
      `${img?.url}?fm=jpg&fl=progressive&w=${WIDTH * 2}`,
      (width, height) => setDimensions({ width, height }),
      () => null
    )
  }, [img?.url])

  return (
    <ImageContainer>
      <Img
        resizeMode="contain"
        width={dimensions.width / 2}
        height={dimensions.height / 2}
        source={{ uri: `${img?.url}?fm=jpg&fl=progressive&w=${WIDTH * 2}` }}
      />
      <ImageTitle>{img?.title}</ImageTitle>
      <ImageDescription>{img?.description}</ImageDescription>
    </ImageContainer>
  )
}

HASInfo = () => {
  return (
    <Operation
      logo={<Image source={LOGO_LIGHT} style={{width: 270, height: 40}} />}
      title="">
      <View style={styles.view}>
        <Text style={styles.header}>{translate('wallet.has.info.h1')}</Text>
        <Text style={styles.text}>{translate('wallet.has.info.t1')}</Text>
        <Text style={styles.header}>{translate('wallet.has.info.h2')}</Text>
        <Text style={styles.text}>{translate('wallet.has.info.t2')}</Text>
        <Text style={styles.header}>{translate('wallet.has.info.h3')}</Text>
        <IndicatorDescription
          status={ConnectionStatus.VOID}
          rootString={'wallet.has.info.indicator.grey'}
        />
        <IndicatorDescription
          status={ConnectionStatus.CONNECTED}
          rootString={'wallet.has.info.indicator.green'}
          longPress
        />
        <IndicatorDescription
          status={ConnectionStatus.DISCONNECTED}
          rootString={'wallet.has.info.indicator.red'}
          press
          longPress
        />
      </View>
    </Operation>
  );
}

ToggleIconButton: React.FC<Props> = (props) => {
  const { apply, isSelected, theme, styles } = useToolbar();
  const { name, valueOff, valueOn, source } = props;
  const selected = isSelected(name, valueOn);
  const handlePresss = () => apply(name, selected ? valueOff : valueOn);
  const defaultStyles = makeStyles(theme);
  const toolStyle = styles?.selection?.iconToggle?.tool
    ? styles.selection.iconToggle.tool(defaultStyles.tool)
    : defaultStyles.tool;
  const overlayStyle = styles?.selection?.iconToggle?.overlay
    ? styles.selection.iconToggle.overlay(defaultStyles.overlay)
    : defaultStyles.overlay;
  const imageStyle = styles?.selection?.iconToggle?.image
    ? styles.selection.iconToggle.image(defaultStyles.image)
    : defaultStyles.image;
  return (
    <TouchableWithoutFeedback onPress={handlePresss}>
      <View style={toolStyle}>
        <Image source={source} style={imageStyle} />
        {selected && <View style={overlayStyle} />}
      </View>
    </TouchableWithoutFeedback>
  );
}