react-native#Image TypeScript Examples

The following examples show how to use react-native#Image. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: ImageIcon.tsx From ReactNative-UIKit with MIT License

6 votes

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

Example #2

Source File: RegionPicker.tsx From mobile with Apache License 2.0

6 votes

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" />
  </>
)

Example #3

Source File: app.routes.tsx From rocketseat-gostack-11-desafios with MIT License

6 votes

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

Example #4

Source File: FlutterwaveCheckout.tsx From flutterwave-react-native with MIT License

6 votes

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

Example #5

Source File: IconButton.tsx From companion-kit with MIT License

6 votes

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

Example #6

Source File: DetailScreen.tsx From react-native-sdk with MIT License

6 votes

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

Example #7

Source File: App.tsx From curved-bottom-navigation-bar with MIT License

6 votes

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')}
      />
    ),
  },
}

Example #8

Source File: Icon.tsx From hamagen-react-native with MIT License

6 votes

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

Example #9

Source File: App.tsx From protect-scotland with Apache License 2.0

6 votes

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

Example #10

Source File: index.tsx From SpotifyClone with MIT License

6 votes

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>

  )
}

Example #11

Source File: index.tsx From TwitterClone with MIT License

6 votes

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

Example #12

Source File: libraryMap.tsx From THUInfo with MIT License

6 votes

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

Example #13

Source File: Header.tsx From react-native-network-logger with MIT License

6 votes

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

Example #14

Source File: CodeImage.tsx From vsinder with Apache License 2.0

6 votes

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

Example #15

Source File: Flair.tsx From vsinder-app with Apache License 2.0

6 votes

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

Example #16

Source File: ButtonPrimary.tsx From BitcoinWalletMobile with MIT License

6 votes

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

}

Example #17

Source File: TabIcon.tsx From react-native-tiktok-clone with MIT License

6 votes

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

Example #18

Source File: FormHeader.tsx From SQUID with MIT License

6 votes

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

Example #19

Source File: App.tsx From react-native-dynamic with MIT License

6 votes

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

Example #20

Source File: ItemView.tsx From mobile with Apache License 2.0

6 votes

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

Example #21

Source File: App.tsx From react-native-jigsaw with MIT License

6 votes

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

Example #22

Source File: index.tsx From expo-template-typescript-jest with MIT License

6 votes

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

Example #23

Source File: index.tsx From selftrace with MIT License

6 votes

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

Example #24

Source File: FoodCard.tsx From online-groceries-app with MIT License

6 votes

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

Example #25

Source File: index.tsx From nlw2-proffy with MIT License

6 votes

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

Example #26

Source File: BackSide.tsx From rn-credit-card with MIT License

6 votes

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

Example #27

Source File: RichText.tsx From nyxo-app with GNU General Public License v3.0

6 votes

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

Example #28

Source File: Info.tsx From hive-keychain-mobile with MIT License

6 votes

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

Example #29

Source File: toggle-icon-button.tsx From react-native-cn-quill with MIT License

6 votes

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