react-native#ImageBackground TypeScript Examples

The following examples show how to use react-native#ImageBackground. 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: Carousel.tsx From sellflow with MIT License

6 votes

export default function Carousel(props: Props) {
  let { width: dimensionsWidth } = useDimensions();
  let { data, width = dimensionsWidth, height } = props;
  let [activeIndex, setActiveIndex] = useState(0);

  return (
    <View style={[styles.carouselContainer, { height }]}>
      <SnapCarousel
        data={data}
        renderItem={({ item }) => (
          <TouchableWithoutFeedback onPress={item.onItemPress}>
            <ImageBackground
              source={{ uri: item.image }}
              style={[styles.itemContainer, { height }]}
            >
              {item.render && item.render()}
            </ImageBackground>
          </TouchableWithoutFeedback>
        )}
        sliderWidth={width}
        itemWidth={width}
        inactiveSlideScale={1}
        onSnapToItem={(slideIndex: number) => setActiveIndex(slideIndex)}
      />
      <Pagination
        dotsLength={data.length}
        activeDotIndex={activeIndex}
        containerStyle={styles.pagination}
        dotStyle={styles.activeDotStyle}
        inactiveDotStyle={styles.inactiveDotStyle}
        inactiveDotOpacity={0.4}
        dotContainerStyle={styles.dotContainerStyle}
      />
    </View>
  );
}

Example #2

Source File: index.tsx From nlw-02-omnistack with MIT License

6 votes

function GiveClasses() {
  const { goBack } = useNavigation();

  function handleNavigateBack() {
    goBack();
  }

  return (
    <View style={styles.container}>
      <ImageBackground 
        resizeMode="contain" 
        source={giveClassesBgImage} 
        style={styles.content}
      >
        <Text style={styles.title}>Quer ser um Proffy?</Text>
        <Text style={styles.description}>
          Para começar, você precisa se cadastrar como professor na nossa plataforma web.
        </Text>
      </ImageBackground>

      <RectButton onPress={handleNavigateBack} style={styles.okButton}>
        <Text style={styles.okButtonText}>Tudo bem</Text>
      </RectButton>
    </View>
  );
}

Example #3

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

6 votes

WebviewHeader = ({ hideClose, closeModal }: Props) => {
  return (
    <ImageBackground
      source={require('../../assets/main/headerBG.png')}
      style={styles.headerContainer}
      resizeMode="cover"
      resizeMethod="resize"
    >
      {
        !hideClose && (
          <HeaderButton type="close" onPress={closeModal} />
        )
      }

      <View style={styles.headerSubContainer} />
    </ImageBackground>
  );
}

Example #4

Source File: MyBackground.tsx From SQUID with MIT License

6 votes

MyBackground = ({ children, variant = 'dark' }: Props) => {
  return (
    <ImageBackground
      source={MAP[variant]}
      style={{
        height: undefined,
        width: undefined,
        flex: 1,
      }}
      imageStyle={{
        resizeMode: 'cover',
      }}
    >
      {children}
    </ImageBackground>
  )
}

Example #5

Source File: Messages.tsx From tinder-expo with MIT License

6 votes

Messages = () => (
  <ImageBackground
    source={require("../assets/images/bg.png")}
    style={styles.bg}
  >
    <View style={styles.containerMessages}>
      <View style={styles.top}>
        <Text style={styles.title}>Messages</Text>
        <TouchableOpacity>
          <Icon name="ellipsis-vertical" color={DARK_GRAY} size={20} />
        </TouchableOpacity>
      </View>

      <FlatList
        data={DEMO}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity>
            <Message
              image={item.image}
              name={item.name}
              lastMessage={item.message}
            />
          </TouchableOpacity>
        )}
      />
    </View>
  </ImageBackground>
)

Example #6

Source File: Matches.tsx From tinder-expo with MIT License

6 votes

Matches = () => (
  <ImageBackground
    source={require("../assets/images/bg.png")}
    style={styles.bg}
  >
    <View style={styles.containerMatches}>
      <View style={styles.top}>
        <Text style={styles.title}>Matches</Text>
        <TouchableOpacity>
          <Icon name="ellipsis-vertical" color={DARK_GRAY} size={20} />
        </TouchableOpacity>
      </View>

      <FlatList
        numColumns={2}
        data={DEMO}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity>
            <CardItem
              image={item.image}
              name={item.name}
              isOnline={item.isOnline}
              hasVariant
            />
          </TouchableOpacity>
        )}
      />
    </View>
  </ImageBackground>
)

Example #7

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

6 votes

function GiveClasses() {
    const {goBack} = useNavigation();

    function handleNavigateBack() {
        goBack();
    }
    return (
    <View style={styles.container}>
        <ImageBackground resizeMode="contain" source={giveClassesBgImage} style={styles.content}>
            <Text style={styles.title}>
                Quer ser um Proffy?
            </Text>
            <Text style={styles.description}>
                Para começar, você precisa se cadastrar como um professor na nossa plataforma web.
            </Text>

        </ImageBackground>
        <RectButton onPress={handleNavigateBack} style={styles.okButton}>
            <Text style={styles.okButtonText}>Tudo bem</Text>
        </RectButton>


    </View>
    );
}

Example #8

Source File: Home.tsx From tinder-expo with MIT License

6 votes

Home = () => {
  const [swiper, setSwiper] = useState<CardStack | null>(null);

  return (
    <ImageBackground
      source={require("../assets/images/bg.png")}
      style={styles.bg}
    >
      <View style={styles.containerHome}>
        <View style={styles.top}>
          <City />
          <Filters />
        </View>

        <CardStack
          loop
          verticalSwipe={false}
          renderNoMoreCards={() => null}
          ref={(newSwiper): void => setSwiper(newSwiper)}
        >
          {DEMO.map((item) => (
            <Card key={item.id}>
              <CardItem
                hasActions
                image={item.image}
                name={item.name}
                description={item.description}
                matches={item.match}
              />
            </Card>
          ))}
        </CardStack>
      </View>
    </ImageBackground>
  );
}

Example #9

Source File: CategoryList.tsx From sellflow with MIT License

5 votes

export default function CategoryList(props: Props) {
  let {
    containerStyle,
    textStyle,
    categories,
    onSelect,
    ...otherprops
  } = props;

  return (
    <FlatList
      showsHorizontalScrollIndicator={false}
      horizontal={true}
      data={categories}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={[
            styles.categoryItemContainer,
            styles.borderRadius,
            !item.image && styles.color,
            containerStyle,
          ]}
          onPress={() => onSelect(item)}
        >
          {item.image ? (
            <ImageBackground
              source={{ uri: item.image }}
              imageStyle={styles.borderRadius}
              style={styles.categoryItemContainer}
            >
              <Text
                weight="medium"
                style={[styles.categoryItemText, textStyle]}
              >
                {item.title}
              </Text>
            </ImageBackground>
          ) : (
            <Text weight="medium" style={[styles.categoryItemText, textStyle]}>
              {item.title}
            </Text>
          )}
        </TouchableOpacity>
      )}
      ItemSeparatorComponent={Separator}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.flatlistContainer}
      {...otherprops}
    />
  );
}

Example #10

Source File: ProductItem.tsx From sellflow with MIT License

5 votes

export default function ProductItem(props: Props) {
  let {
    product: { title, images, price, discount, availableForSale },
    onPress,
    containerStyle,
    imageStyle,
  } = props;
  let afterDiscount = priceAfterDiscount(price, discount || 0);
  let formatCurrency = useCurrencyFormatter();

  let renderImage = () => {
    return availableForSale ? (
      <View style={styles.imageContainer}>
        <Image style={[styles.image, imageStyle]} source={{ uri: images[0] }} />
      </View>
    ) : (
      <View style={styles.imageContainer}>
        <ImageBackground
          style={[styles.image, imageStyle]}
          source={{ uri: images[0] }}
        >
          <View style={styles.oosBackground}>
            <Text style={styles.oosText} weight="medium">
              {t('Out of Stock')}
            </Text>
          </View>
        </ImageBackground>
      </View>
    );
  };

  return (
    <TouchableOpacity
      style={[styles.container, containerStyle]}
      onPress={onPress}
    >
      {renderImage()}
      {discount && discount > 0 ? (
        <DiscountBadge value={discount} containerStyle={styles.discountBox} />
      ) : null}
      <Text numberOfLines={1} style={styles.nameText}>
        {title}
      </Text>
      <View style={styles.priceContainer}>
        <Text style={styles.priceText} weight="bold">
          {discount && discount > 0
            ? formatCurrency(afterDiscount)
            : formatCurrency(price)}
        </Text>
        {discount && discount > 0 ? (
          <Text style={styles.discountedPrice}>{formatCurrency(price)}</Text>
        ) : null}
      </View>
    </TouchableOpacity>
  );
}

Example #11

Source File: index.tsx From nlw-01-omnistack with MIT License

5 votes

Home = () => {
  const [uf, setUf] = useState('');
  const [city, setCity] = useState('');

  const navigation = useNavigation();

  function handleNavigateToPoints() {
    navigation.navigate('Points', {
      uf,
      city,
    });
  }

  return (
    <KeyboardAvoidingView 
      style={{ flex: 1 }} 
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ImageBackground 
        source={require('../../assets/home-background.png')} 
        style={styles.container}
        imageStyle={{ width: 274, height: 368 }}
      >
        <View style={styles.main}>
          <Image source={require('../../assets/logo.png')} />
          <View>
            <Text style={styles.title}>Seu marketplace de coleta de resíduos</Text>
            <Text style={styles.description}>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.</Text>
          </View>
        </View>
        
        <View style={styles.footer}>
          <TextInput
            style={styles.input}
            placeholder="Digite a UF"
            value={uf}
            maxLength={2}
            autoCapitalize="characters"
            autoCorrect={false}
            onChangeText={setUf}
          />

          <TextInput
            style={styles.input}
            placeholder="Digite a cidade"
            value={city}
            autoCorrect={false}
            onChangeText={setCity}
          />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Text>
                <Icon name="arrow-right" color="#FFF" size={24} />
              </Text>
            </View>
            <Text style={styles.buttonText}>
              Entrar
            </Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

Example #12

Source File: index.tsx From react-native-better-image with MIT License

5 votes

AnimatedImageBackground = createAnimatedComponent(ImageBackground)

Example #13

Source File: ProfilePicture.tsx From orangehrm-os-mobile with GNU General Public License v3.0

5 votes

ProfilePicture = (props: ProfilePictureProps) => {
  const {theme, imageSource, name, jobTitle} = props;
  return (
    <View>
      <ImageBackground
        source={imageSource ? imageSource : require('images/default-photo.png')}
        style={styles.backgroundImageWidth}
        imageStyle={styles.backgroundImage}>
        <View>
          <View style={styles.thumbnailContainer}>
            <Thumbnail
              large
              source={
                imageSource ? imageSource : require('images/default-photo.png')
              }
              style={{margin: theme.spacing * 4}}
            />
          </View>
          <View
            style={{
              marginLeft: theme.spacing * 4,
              marginBottom: theme.spacing * 4,
            }}>
            {name === undefined ? null : (
              <Text
                style={[styles.nameText, {color: theme.typography.darkColor}]}>
                {name}
              </Text>
            )}
            {jobTitle === undefined || jobTitle === null ? null : (
              <Text style={{color: theme.typography.darkColor}}>
                {jobTitle}
              </Text>
            )}
          </View>
        </View>
      </ImageBackground>
    </View>
  );
}

Example #14

Source File: index.tsx From nlw-ecoleta with MIT License

5 votes

Home = () => {
  const [uf, setUf] = useState('');
  const [city, setCity] = useState('');
  const navigation = useNavigation();

  function handleNavigateToPoints() {
    navigation.navigate('Points', { uf, city });
  }
    return (
    <KeyboardAvoidingView style={{ flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
    <ImageBackground 
        source={require('../../assets/home-background.png')} 
        style={styles.container}
        imageStyle={{ width: 274, height: 368 }}
    >
        <View style={styles.main}>
            <Image source={require('../../assets/logo.png')} />
            <View>
              <Text style={styles.title}>Seu marketplace de coleta de resíduos</Text>
              <Text style={styles.description}>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente</Text>
            </View>
        </View>

        <View style={styles.footer}>

        <TextInput 
        style={styles.input} 
        placeholder="Digite a UF"
        value={uf}
        maxLength={2}
        autoCapitalize="characters"
        autoCorrect={false}
        onChangeText={setUf}
        />

        <TextInput 
        style={styles.input} 
        placeholder="Digite a cidade"
        value={city}
        autoCorrect={false}
        onChangeText={setCity}
        />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Text> 
                <Icon name='arrow-right' color='#FFF' size={24} />
              </Text>
            </View>
            <Text style={styles.buttonText}> Entrar </Text>
          </RectButton>
        </View>
    </ImageBackground>
    </KeyboardAvoidingView>
    );
}

Example #15

Source File: PostImagePreview.tsx From lexicon with MIT License

5 votes

export default function PostImagePreview() {
  const styles = useStyles();
  const { colors } = useTheme();

  const { navigate, goBack } = useNavigation<
    RootStackNavProp<'PostImagePreview'>
  >();

  const {
    params: { imageUri, prevScreen },
  } = useRoute<RootStackRouteProp<'PostImagePreview'>>();

  const uploading = () => {
    navigate(prevScreen, { imageUri });
  };

  return (
    <View style={styles.container}>
      <StatusBar style={'light'} />
      <SafeAreaView style={styles.fullContainer}>
        <ImageBackground
          source={{ uri: imageUri }}
          resizeMode="contain"
          style={styles.fullContainer}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <Icon
              name="Close"
              color={colors.pureWhite}
              onPress={goBack}
              style={styles.iconContainer}
            />
            <Icon
              name="Add"
              color={colors.pureWhite}
              onPress={uploading}
              style={styles.iconContainer}
            />
          </View>
        </ImageBackground>
      </SafeAreaView>
    </View>
  );
}

Example #16

Source File: index.tsx From NLW-1.0 with MIT License

5 votes

Home: React.FC = () => {
  const [uf, setUf] = useState("");
  const [city, setCity] = useState("");

  const navigation = useNavigation();

  function handleNavigateToPoints() {
    navigation.navigate("Points", {
      uf,
      city,
    });
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <ImageBackground
        source={require("../../assets/home-background.png")}
        style={styles.container}
        imageStyle={{
          width: 274,
          height: 368,
        }}
      >
        <View style={styles.main}>
          <Image source={require("../../assets/logo.png")} />
          <View>
            <Text style={styles.title}>
              Seu marketplace de coleta de resíduos
            </Text>
            <Text style={styles.description}>
              Ajudamos pessoas a encontrarem pontos de coleta de forma
              eficiente.
            </Text>
          </View>
        </View>
        <View style={styles.footer}>
          <TextInput
            style={styles.input}
            value={uf}
            onChangeText={setUf}
            maxLength={2}
            autoCapitalize="characters"
            autoCorrect={false}
            placeholder="Digite a UF"
          />
          <TextInput
            style={styles.input}
            placeholder="Digite a cidade"
            value={city}
            autoCorrect={false}
            onChangeText={setCity}
          />
          <RectButton
            style={styles.button}
            onPress={() => handleNavigateToPoints()}
          >
            <View style={styles.buttonIcon}>
              <Icon name="arrow-right" color="#fff" size={24} />
            </View>
            <Text style={styles.buttonText}>Entrar</Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

Example #17

Source File: CustomImage.tsx From lexicon with MIT License

5 votes

export function CustomImage(props: Props) {
  const styles = useStyles();

  const {
    src,
    size = 'm',
    square = false,
    style,
    defaultImage = DEFAULT_IMAGE,
    ...otherProps
  } = props;

  const [show, setShow] = useState(false);
  const [error, setError] = useState(false);

  const sizeStyle = {
    height: variantSize[size],
    ...(square && { width: variantSize[size] }),
  };
  const imgSource = { uri: src };
  const hideImage = src === '' || error;

  const onPress = () => {
    if (show) {
      setShow(false);
    }
    setTimeout(() => setShow(true), 50);
  };

  const onPressCancel = () => {
    if (!show) {
      setShow(true);
    }
    setTimeout(() => setShow(false), 50);
  };

  const content = (
    <ImageBackground
      source={defaultImage}
      style={[styles.image, sizeStyle]}
      resizeMode="cover"
      {...otherProps}
    >
      <CachedImage
        source={imgSource}
        style={[styles.image, sizeStyle]}
        resizeMode="cover"
        onError={() => setError(true)}
        {...otherProps}
      />
    </ImageBackground>
  );

  return !hideImage ? (
    <>
      <TouchableOpacity
        delayPressIn={100}
        style={[styles.container, style]}
        onPress={onPress}
      >
        {content}
      </TouchableOpacity>
      {show && (
        <ShowImageModal
          show={show}
          userImage={imgSource}
          onPressCancel={onPressCancel}
        />
      )}
    </>
  ) : (
    <View style={styles.noContent} />
  );
}

Example #18

Source File: index.tsx From lexicon with MIT License

5 votes

export function Avatar(props: Props) {
  const styles = useStyles();
  const { colors } = useTheme();

  const {
    src = '',
    size = 's',
    color = colors.textLighter,
    style,
    label = '',
    onPress,
    ...otherProps
  } = props;

  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(true);

  const finalSize = AVATAR_ICON_SIZES[size];
  const fontSize = AVATAR_LETTER_SIZES[size];

  const loadChild = src === '' || error;
  const imgSource = { uri: src };

  const letterAvatar = (
    <LetterAvatar
      size={finalSize}
      color={color}
      label={label}
      style={style}
      fontSize={fontSize}
    />
  );

  return (
    <TouchableOpacity onPress={onPress}>
      {src === '' && loading ? (
        letterAvatar
      ) : (
        <ImageBackground
          source={imgSource}
          style={[{ width: finalSize, height: finalSize }, style]}
          imageStyle={styles.circle}
          onError={() => setError(true)}
          // TODO: Decide what to display onLoading
          onLoadEnd={() => setLoading(false)}
          {...otherProps}
        >
          {loadChild && letterAvatar}
        </ImageBackground>
      )}
    </TouchableOpacity>
  );
}

Example #19

Source File: Profile.tsx From tinder-expo with MIT License

5 votes

Profile = () => {
  const {
    age,
    image,
    info1,
    info2,
    info3,
    info4,
    location,
    match,
    name,
  } = DEMO[7];

  return (
    <ImageBackground
      source={require("../assets/images/bg.png")}
      style={styles.bg}
    >
      <ScrollView style={styles.containerProfile}>
        <ImageBackground source={image} style={styles.photo}>
          <View style={styles.top}>
            <TouchableOpacity>
              <Icon
                name="chevron-back"
                size={20}
                color={WHITE}
                style={styles.topIconLeft}
              />
            </TouchableOpacity>

            <TouchableOpacity>
              <Icon
                name="ellipsis-vertical"
                size={20}
                color={WHITE}
                style={styles.topIconRight}
              />
            </TouchableOpacity>
          </View>
        </ImageBackground>

        <ProfileItem
          matches={match}
          name={name}
          age={age}
          location={location}
          info1={info1}
          info2={info2}
          info3={info3}
          info4={info4}
        />

        <View style={styles.actionsProfile}>
          <TouchableOpacity style={styles.circledButton}>
            <Icon name="ellipsis-horizontal" size={20} color={WHITE} />
          </TouchableOpacity>

          <TouchableOpacity style={styles.roundedButton}>
            <Icon name="chatbubble" size={20} color={WHITE} />
            <Text style={styles.textButton}>Start chatting</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </ImageBackground>
  );
}

Example #20

Source File: index.tsx From ecoleta with MIT License

5 votes

Home = () => {
  const navigation = useNavigation();

  const [uf, setUf] = useState('');
  const [city, setCity] = useState('');

  function handleNavigateToPoints() {
    navigation.navigate('Points', {
      uf,
      city,
    });
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1, marginBottom: 25 }}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ImageBackground
        style={styles.container}
        source={require('../../assets/home-background.png')}
        imageStyle={{ width: 274, height: 368 }}
      >
        <View style={styles.main}>
          <Image source={require('../../assets/logo.png')} />

          <View>
            <Text style={styles.title}>
              Seu marketplace de coleta de resíduos
            </Text>
            <Text style={styles.description}>
              Ajudamos pessoas a encontrarem pontos de coleta de forma
              eficiente.
            </Text>
          </View>
        </View>

        <View style={styles.footer}>
          <TextInput
            style={styles.input}
            placeholder="Digite a UF"
            value={uf}
            onChangeText={setUf}
            maxLength={2}
            autoCorrect={false}
            autoCapitalize="characters"
          />

          <TextInput
            style={styles.input}
            placeholder="Digite a cidade"
            value={city}
            onChangeText={setCity}
            autoCorrect={false}
          />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Feather name="arrow-right" color="#fff" size={24} />
            </View>
            <Text style={styles.buttonText}>Entrar</Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

Example #21

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

5 votes

InfoModal = ({ strings, firstPointDate, closeModal, showModal }: InfoModalProps) => {
  const {
    scanHome: {
      noExposures: {
        infoModal: {
          textBodyPt1,
          textBodyPt2
        }
      }
    }
  } = strings;

  return (
    <Modal
      animationType="fade"
      onRequestClose={closeModal}
      visible={showModal}
    >
      <TouchableWithoutFeedback onPress={closeModal}>
        <ImageBackground
          resizeMode="cover"
          style={styles.imageContainer}
          source={require('../../../assets/main/infoModalBG.png')}
        >
          <View style={[styles.container]}>
            <TouchableOpacity style={styles.closeBtnContainer} hitSlop={HIT_SLOP} onPress={closeModal}>
              <Icon source={require('../../../assets/onboarding/close.png')} width={19} />
            </TouchableOpacity>
            <Icon
              source={require('../../../assets/main/moreInfoBig.png')}
              width={31}
              customStyles={styles.infoIcon}
            />
            <Text>
              <Text style={styles.infoText}>{textBodyPt1.trim()}</Text>
              <Text style={styles.infoText} bold>{` ${firstPointDate} `}</Text>
              <Text style={styles.infoText}>{textBodyPt2.trim()}</Text>
            </Text>
          </View>
        </ImageBackground>
      </TouchableWithoutFeedback>
    </Modal>
  );
}

Example #22

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

5 votes

DrawerContent = ({ navigation }: Props) => {
  const { locale: { strings: { general: { versionNumber } }, isRTL } } = useSelector<Store, Store>(state => state);
  const [showSettings, setShowSettings] = useState(false);

  const isDrawerOpen = useIsDrawerOpen();

  useEffect(() => {
    if (!isDrawerOpen) {
      setShowSettings(false);
    }
  }, [isDrawerOpen]);


  return (
    <ImageBackground
      style={{ flex: 1, }}
      source={require('../../assets/main/menuBG.png')}
    >
      <TouchableOpacity
        style={[styles.close, { [isRTL ? 'left' : 'right']: 20 }]}
        hitSlop={HIT_SLOP}
        onPress={navigation.closeDrawer}
      >
        <Icon source={require('../../assets/main/menuClose.png')} width={12} height={18} />
      </TouchableOpacity>

      <View style={{ flex: 1, flexDirection: isRTL ? 'row-reverse' : 'row' }}>
        {showSettings
          ? (
            <SettingsDrawerContent
              navigation={navigation}
              goToMainDrawer={() => setShowSettings(false)}
            />
          )
          : (
            <HomeDrawerContent
              navigation={navigation}
              showSettings={() => setShowSettings(true)}
            />
          )

        }

      </View>

      <View style={[styles.footerContainer, { alignSelf: isRTL ? 'flex-end' : 'flex-start' }]}>
        <Text style={styles.versionText}>{`${versionNumber} ${VERSION_NAME}`}</Text>
      </View>
    </ImageBackground>
  );
}

Example #23

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

5 votes

export function CachedImage(this: void, props: CachedImageProps) {

    const [imgURI, setImgURI] = React.useState('');
    const state = React.useMemo(() => ({ loading: false, mounted: false }), []);

    const safeCall = React.useCallback((cb: () => any) => {
        if (state.mounted) {
            cb();
        }
    }, [state]);

    const loadImage = async (filesystemURI: string, remoteURI: string) => {
        try {
            // Use the cached image if it exists
            const metadata = await FileSystem.getInfoAsync(filesystemURI);
            if (metadata.exists) {
                safeCall(() => setImgURI(filesystemURI));
                return;
            }

            // otherwise download to cache
            const imageObject = await FileSystem.downloadAsync(
                remoteURI,
                filesystemURI,
            );
            safeCall(() => setImgURI(imageObject.uri));
        } catch (err) {
            console.log('Image loading error:', err);
            safeCall(() => setImgURI(remoteURI));
        }
    };

    React.useEffect(() => {
        state.mounted = true;

        (async () => {
            const uri = (props.source as ImageURISource).uri;
            if (uri) {
                const filesystemURI = await getImageFilesystemKey(uri);
                if (imgURI !== uri && imgURI !== filesystemURI) {
                    await loadImage(filesystemURI, uri);
                }
            }
        })();

        return () => {
            state.mounted = false;
        };

    }, [(props.source as ImageURISource).uri]);

    let source: ImageProps['source'] = imgURI ? { uri: imgURI } : null;
    if (!source && props.source) {
        source = props.source;
    }

    if (props.isBackground) {
        return (
            <ImageBackground
                {...props}
                source={source}
            >
                {props.children}
            </ImageBackground>
        );
    } else {
        return (
            <Image
                {...props}
                source={source}
            />
        );
    }
}

Example #24

Source File: index.tsx From ecoleta with MIT License

5 votes

Home = () => {

  const [uf, setUf] = useState('');
  const [city, setCity] = useState('');

  const navigation = useNavigation();

  function handleNavigateToPoints() {
    navigation.navigate('Points', {
      uf,
      city
    });
  }
  
  return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
      <ImageBackground 
        source={require('../../assets/home-background.png')} 
        style={styles.container}
        imageStyle={{ width: 274, height: 368 }}
        >
        <View style={styles.main}>
          <Image source={require('../../assets/logo.png')} />
          <View>
            <Text style={styles.title}>Seu maketplace de coleta de resíduos.</Text>
            <Text style={styles.description}>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.</Text>
          </View>
        </View>

        <View style={styles.footer}>
          <TextInput 
            style={styles.input}
            placeholder="Digite a UF"
            value={uf}
            maxLength={2}
            autoCapitalize="characters"
            autoCorrect={false}
            onChangeText={setUf}
            />

          <TextInput 
            style={styles.input}
            placeholder="Digite a Cidade"
            value={city}
            autoCorrect={false}
            onChangeText={setCity}
          />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Text>
                <Icon name="arrow-right" color="#FFF" size={24} />
              </Text>
            </View>
            <Text style={styles.buttonText}>
              Entrar
            </Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

Example #25

Source File: ImagePreview.tsx From lexicon with MIT License

4 votes

export default function ImagePreview() {
  const styles = useStyles();
  const { colors } = useTheme();

  const { navigate, goBack } = useNavigation<StackNavProp<'ImagePreview'>>();

  const { params } = useRoute<StackRouteProp<'ImagePreview'>>();
  const { topicId, imageUri, postPointer, message } = params;

  const [loading, setLoading] = useState(false);
  const [imageMessage, setImageMessage] = useState(message);
  const [cursorPosition, setCursorPosition] = useState<CursorPosition>({
    start: 0,
    end: 0,
  });
  const [showUserList, setShowUserList] = useState(false);
  const [mentionLoading, setMentionLoading] = useState(false);
  const [mentionKeyword, setMentionKeyword] = useState('');

  const messageRef = useRef<TextInputType>(null);

  const user = useStorage().getItem('user');

  const { reply } = useReplyPost({
    onCompleted: () => {
      navigate('MessageDetail', {
        id: topicId,
        postPointer: postPointer + 1,
        emptied: true,
        hyperlinkUrl: '',
        hyperlinkTitle: '',
      });
    },
    onError: (error) => {
      setLoading(false);
      errorHandlerAlert(error);
    },
  });

  const { mentionMembers } = useMention(
    mentionKeyword,
    showUserList,
    setMentionLoading,
  );

  const reactNativeFile = createReactNativeFile(imageUri);

  const postToServer = (caption: string) => {
    setLoading(true);
    reply({
      variables: {
        replyInput: {
          topicId,
          raw: caption,
        },
        file: reactNativeFile,
        userId: user?.id,
        type: UploadTypeEnum.composer,
      },
    });
  };

  const onPressCancel = () => {
    goBack();
  };

  const footer = (
    <View>
      <MentionList
        showUserList={showUserList}
        members={mentionMembers}
        mentionLoading={mentionLoading}
        rawText={imageMessage}
        textRef={messageRef}
        setRawText={setImageMessage}
        setShowUserList={setShowUserList}
        viewStyle={styles.mentionList}
        fontStyle={styles.mentionText}
      />
      <View style={styles.inputContainer}>
        <ReplyInputField
          inputRef={messageRef}
          onSelectedChange={(cursor) => {
            setCursorPosition(cursor);
          }}
          onChangeValue={(imageMessage: string) => {
            mentionHelper(
              imageMessage,
              cursorPosition,
              setShowUserList,
              setMentionLoading,
              setMentionKeyword,
            );
            setImageMessage(imageMessage);
          }}
          showButton
          inputPlaceholder={t('Write your caption here')}
          loading={loading}
          disabled={loading}
          onPressSend={postToServer}
          style={styles.inputField}
          message={imageMessage}
          setMessage={setImageMessage}
        />
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <StatusBar style={'light'} />
      <SafeAreaView style={styles.fullContainer}>
        <ImageBackground
          source={{ uri: imageUri }}
          resizeMode="contain"
          style={styles.fullContainer}
        >
          <Icon
            name="Close"
            color={colors.pureWhite}
            onPress={onPressCancel}
            disabled={loading}
            style={styles.iconContainer}
          />
        </ImageBackground>
        <KeyboardAccessoryView
          androidAdjustResize
          inSafeAreaView
          alwaysVisible
          style={styles.inputViewContainer}
        >
          {footer}
        </KeyboardAccessoryView>
      </SafeAreaView>
    </View>
  );
}

Example #26

Source File: RecentlyViewed.tsx From RNChallenge_2 with MIT License

4 votes

RecentlyViewed = ({furniture, index}: Props) => {
  const {width, height} = useWindowDimensions();

  return (
    <View
      style={[
        styles.container,
        {
          width: width * 0.55,
          height: height * 0.17,
          backgroundColor: `${colors[`furniture${index % 4}`]}45`,
        },
      ]}>
      <ImageBackground
        resizeMode={'stretch'}
        style={{
          width: width * 0.45,
          height: height * 0.1,
          opacity: 0.7,
        }}
        source={furniture.images[0]}></ImageBackground>
      <View
        style={[
          styles.banner,
          {
            height: height * 0.07,
          },
        ]}>
        <View style={[styles.row]}>
          <View
            style={[
              styles.column,
              {
                width: '60%',
              },
            ]}>
            <Text numberOfLines={2} style={[styles.name]}>
              {furniture.name}
            </Text>
            <Text numberOfLines={2} style={[styles.desc]}>
              {furniture.desc}
            </Text>
          </View>
          <View
            style={[
              styles.column,
              {
                paddingLeft: 20,
                alignItems: 'flex-end',
              },
            ]}>
            <Text style={[styles.name]}>{furniture.price} $</Text>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}>
              <TouchableOpacity
                style={[
                  styles.likeBtn,
                  {
                    marginRight: 5,
                  },
                ]}>
                <Image
                  style={{
                    width: 10,
                    height: 10,
                  }}
                  source={require('../Assets/Icons/cart.png')}
                />
              </TouchableOpacity>
              <TouchableOpacity style={[styles.likeBtn]}>
                <Image
                  style={{
                    width: 10,
                    height: 10,
                  }}
                  source={require('../Assets/Icons/like.png')}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

Example #27

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

4 votes

Container: React.FC<Props> = ({
  useThemeGutterPadding,
  borderColor,
  borderWidth,
  backgroundColor,
  backgroundImage,
  backgroundImageResizeMode,
  elevation,
  style,
  children,
  theme, // eslint-disable-line @typescript-eslint/no-unused-vars
  ...rest
}) => {
  const {
    flex,
    flexGrow,
    flexWrap,
    flexBasis,
    flexShrink,
    flexDirection,
    alignContent,
    justifyContent,
    alignItems,
    padding,
    paddingTop,
    paddingBottom,
    paddingLeft,
    paddingRight,
    paddingVertical,
    paddingHorizontal,
    ...styleProp
  } = StyleSheet.flatten(style) || {};

  const containerStyle: StyleProp<ViewStyle> = {
    backgroundColor,
    borderColor,
    borderWidth,
    width: "100%",
    ...styleProp,
  };

  const innerStyle: StyleProp<ViewStyle> = {
    flex,
    flexGrow,
    flexWrap,
    flexBasis,
    flexShrink,
    flexDirection,
    alignContent,
    justifyContent,
    alignItems,
    padding,
    paddingTop,
    paddingBottom,
    paddingLeft,
    paddingRight,
    paddingVertical,
    paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,
  };

  const Wrap = elevation ? Elevation : View;

  if (elevation) containerStyle.elevation = elevation;

  return (
    <Wrap style={[containerStyle, style]} {...rest}>
      {backgroundImage ? (
        <ImageBackground
          source={
            typeof backgroundImage === "string"
              ? { uri: backgroundImage }
              : backgroundImage
          }
          resizeMode={backgroundImageResizeMode}
          style={{
            flex: 1,
          }}
        >
          <View style={innerStyle}>{children}</View>
        </ImageBackground>
      ) : (
        <View style={innerStyle}>{children}</View>
      )}
    </Wrap>
  );
}

Example #28

Source File: index.tsx From NextLevelWeek with MIT License

4 votes

Home = () => {
  const [uf, setUF] = useState<UF[]>([]);
  const [city, setCity] = useState<City[]>([]);
  const [selectedUf, setSelectedUf] = useState("0");
  const [selectedCity, setSelectedCity] = useState("0");

  const navigation = useNavigation();

  /**
   * API IBGE
   */
  useEffect(() => {
    axios
      .get(
        "https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome"
      )
      .then((response) => {
        setUF(response.data);
      });
  }, []);

  useEffect(() => {
    if (selectedUf === "0") {
      return;
    }
    axios
      .get(
        `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`
      )
      .then((response) => {
        setCity(response.data);
      });
  }, [selectedUf]);

  /**
   * Função para navegar de uma tela para a outra.
   */
  function handleNavigateToPoints() {
    navigation.navigate("Points", {
      selectedUf,
      selectedCity,
    });
  }

  /**
   * Funções do "select"
   */
  function handleSelectedUf(uf: string) {
    setSelectedUf(uf);
  }

  function handleSelectedCity(city: string) {
    setSelectedCity(city);
  }

  return (
    // KeyboardAvoidingView - Para evitar que o teclado fique por cima da aplicação.
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <ImageBackground
        source={require("../../assets/home-background.png")}
        style={styles.container}
        imageStyle={{ width: 274, height: 368 }}
      >
        <View style={styles.main}>
          <Image source={require("../../assets/logo.png")} />
          <View>
            <Text style={styles.title}>
              Seu marketplace de coleta de resíduos
            </Text>
            <Text style={styles.description}>
              Ajudamnos pessoas a encontrarem pontos de coleta de forma
              eficiente.
            </Text>
          </View>
        </View>

        <View style={styles.footer}>
          <RNPickerSelect
            placeholder={{
              label: "Selecione uma UF",
              value: "0",
            }}
            style={{
              viewContainer: {
                backgroundColor: "#FFF",
                alignItems: "center",
                justifyContent: "center",
                height: 60,
                borderRadius: 10,
                marginBottom: 8,
                paddingHorizontal: 24,
              },
            }}
            onValueChange={(item) => handleSelectedUf(item)}
            items={uf.map((item) => {
              return {
                label: `${item.sigla} - ${item.nome}`,
                value: item.sigla,
              };
            })}
          />

          <RNPickerSelect
            placeholder={{
              label: "Selecione uma cidade",
              value: "0",
            }}
            style={{
              viewContainer: {
                backgroundColor: "#FFF",
                alignItems: "center",
                justifyContent: "center",
                height: 60,
                borderRadius: 10,
                marginBottom: 8,
                paddingHorizontal: 24,
              },
            }}
            onValueChange={(item) => handleSelectedCity(item)}
            items={
              city
                ? city.map((item) => {
                    return { label: `${item.nome}`, value: item.nome };
                  })
                : []
            }
          />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Text>
                <Icon name="arrow-right" color="#FFF" size={24} />
              </Text>
            </View>
            <Text style={styles.buttonText}>Entrar</Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

Example #29

Source File: index.tsx From react-native-credit-card-display with MIT License

4 votes

CreditCardDisplay = (props: Props) => {
  let cardTypeIcon = null;

  switch (creditcardutils.parseCardType(props.number as string)) {
    case 'amex':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'dinersclub':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'discover':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'jcb':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'maestro':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'mastercard':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'unionpay':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
    case 'visa':
      cardTypeIcon = {
        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAABQCAYAAAA0snrNAAAABmJLR0QA/wD/AP+gvaeTAAAL8ElEQVR4nO2bfXBc1XXAf+ftSrJlaVf+NgwlNh+GATdpgp0EyIcaexe7AQYw9jTJpJ2MSYwkY3CmSYZMM/Wk9TSNM6Vj9EEoCQwEMmNTaM3E2JJsTEmgIYEkDi4fGVHKYJfIsqXd1Yct7bunf6ylSNp9776VJZLM3N+MZvTuPefes3v23nvuufeBw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XD80SC/bwP+6Niwu7Imc7IuZrQGwKjJ5PyeDIe353/fpkUlktOz/7HgMnz5QrmNKybvCcfyxt83d33f/5arn0y3XmXUbAiTEbxXsh2NPxh9rl3T+gXEXBas4XXnOhr/OZoFKjWptk8IpAVdBawE5pYQHAH+R0V/LSrPaUz25/Y3vh6tj98xL93yJz6yTo2ep6KzS1oPHZmOLQfLbXs88ShC+TP+u/GK+Guo+TRIGkhE0RMEVYhJ3GSfWPCVxC09Eb/sAgZztyDrQ/sQ/ctJz18FuTxYQ/cBoXYsTu+cM8TsbWjrJmBpBFMrgOWishxYL76STLVuzHQ07omgC0Ay1fz1vPJN0BhS+O5KWg/LgHNyuhdFaN7G3kzi5hMPJW45uaE237NQjbcW5Akg6pTmATuzTyxYHtWwmnTbIlG5MUxG4FjmZPyJsYJ1u6qASyw6r4TVJ9Mttw5q9Wuo/D3RHB7U0ZtRRWvTzdcrsgOI2aX1o1O26SyRnD4e2chw8tbuA4lbTqyPq1mmqv8AnIrSlyqfjdwP/l9TGEHBKG28tHlk9LHOcDmW2UvRAKerJFIt31Rlj8AFUe0MwMypir0aTVRFlH+K3rRcWJ269/ypmVWgbKePp3r9qXeS609+w1SOXPJ/A8n7FTkTJi8eq6K1rCJGNlmETvsV/v3jC4wfv9LWsngcLVVem2rZAXwjmn1W3jz+1ObBKIKJdNtakCvKabxCuXpqZhU4J6ePUnd9pnfVD+6++9pH75SjPee9FSio0Zxek275OEJIMAaC/rD/6a0nJjQvZoWlaT+THS4agclU82pBvhbFtiiIhi8hE1C9q+wOPO+cpvhpcTpA9sBtp97Ozn157eObl27/ydrfqsrpEmILe59cstRqlHq32WREY/cWlYFtpL/JC18emlyoyHeI9l38FOUeVLeJyGZE71T0HwWeBHrHtRfJ6TXpthVAKorsBHuVc3J6pOg9MsIBVfnoA0euXvzCsYvOPHnzv3ZXV4wsmtCh+quAt4KaqKu/p07RWzWsH+W5vs6GX5QwIHSklwriEte1fRhj/ixMD+hR5eZcZ9OPAyXqt8eTFQs+aZANYH5uaQ+AmJq7dAq5EoGr2LC7kj0bh8vVhel2upH9iP4dwNGTi6s+9thdC/dvbD2+aPbAWOChhf1u4FbGVFR9DkrvUUcRj12Tyxand84Z0vBoW1WK1nPxzafU8rWryldznY3BDgc4vD2fKWylIm2natJti1TN56LIFtkDsxOnTnwgCz+biv60Te8A2bkLfgY6Fsl3D9bIn//wjvOPDyTGJ2Ys67papnZ9OzN84t8nlw751Vdg+TziFUfuBl0W3h/gmRNWmTLxjGkAZgXVq+i/hTYQ0ykHc9PqdPZs9EE6xxdlzszmut0NF/afqfzt2aKVurv0fjSZbr0KCJ1qBa+1VMpTPet6jo9XPNI9amx6YuQ757pNmsC6XVUIDUHVCu/ETGxHaBsqU17Xp9fpgKrsn1zWe7pabnzyS0lfvRxQ0185r2Rkrho+ygWGjDEPlKrzwBa5j/Qn579R1KbKOxY9EC6L472cSDV/HmyLgZ3akfhngcXBEvpI39z5R4D+kGb+cJyeN9IOFMVhb/QunPU3z9zUD6Aa+/Dk+sXpnXPAlryRR3MHt5wsVaOWIA54o1Tg4yP7LHpjJoI8nFjT+vPadMsNU3e+iie6LVSA+IPs2egrEhYQLptT37JkKhZMu9OHDjUcC0p17nn9A+cd6T6/S0us64NavQFLTj+vflEAN4qi4dN7wN65v6PhP0FfDNUdj/AhUfYmUq0v1qabr4+sd5bkmrbVCn8abKY8m+24/TeFvvS/wtryKqc2xU+70wEQDgRV3bb/M+8bHK78YLGKhE7tqjwz0HnHr0vV1dXfU2dNnUrpTByIGoltArKh+sWsFJWnEqmWfXWfan5fVCUNH+UIfG/swYQ7HTV/QE5XLVrXRzk+kIjv7boyofsuqRotq1l93xWg14a26UngKPcr7OnX4Jw79Lc3vGKQG4GMrZ0SrDMxeSm5pnWNTbA2fe/lwLoQkb5s/+mxqN3k5adh7XnIlCL4GXF6Jm5+DAwE1e98cc3yx48uGTPY8/K2PPtbueSCp4IqPYnZc+7EQ7Nk/R2NzxrlaoGSs4mF+Sr6lM3xot6dhCVjlMfGZwwHDje9S0giS2ElV303/FCqBDMz0p/eegY4HFTdPTCn4ivP3VQI5jbsrgT5q7DmVGkpbAcD6gnPuQsMZevmWY86+zubXs3ULVwpyt2MS6tGZJaKPjZn9b+UjMprVzfPB0I/p4dXYmciYVN8dXK+//5yjCz0M1MogVM8wMmh2asAkr3dNwELQkQHvCr5Xkg9asIjd1VeDfvRTGDPxuFMZ9O3vJHhixB2EL5tmszCmFSUPLjxPDYD1cFG8nLp1HL4uj6VPPzMOV1igcEcgBSuHqESHsABj2R+1Bg66kQsiRkpTr/a6Du8rS/b3vS3OhJfJvBtIPTYeAyPzxRt5zbsrlSkyaJX+odtieCncqliRi9GJlItXcBFgQKe9xGMeYHgH58aE1vRf/D2/w5qombdroVePtYdZofC13IdTd+OYnMQc1e3vt/3dA9gvf0z4nsXDB1qODb6XEjqyMNhOqJ8CZG+yeUKVaAPE+Qrka5se2PobaHJzNxIBxAJHe0Y0xxqg3AwzOEAcROzJWWQEgct5dJ7sPGI+P5fgFpPtuLxfO2EAhXrmbkK9yu6e/If6COEBn96cU26bVFgfQlm1OlqWdexHL4oxadpkzG+PefuGRP9UkMImUNbu1TkNZtc1azqsVFek2r9JMKHpqP/IATzkXLkZ9TpVbOrnokyMkoi0pW75sSPbGIqlpy7kus71PT2+KLzb/hudTLVki43lZq47oF5YrCdyp3o2bspN/pgSblOD1reiduMOr1n76ac4j0/JWVjmtm+3djExJZzF46CTDgLGDg9fIXCgUSq9fVkqvnridR9l9r6qVvbthQzvBehNkxOYO/o/4nrWi5BucHW9jlT5onb9F6iKIEH+xXqy1Trj1HxYDTR8Jy7UJx+NXgrzg7xSwtXj/0diXRrF6ovK/Ib0FOeSE6VCpQlKnzM+OYTRBgkRvj+70zTrSAzGzcBIqyifns86ls2M+50UWlX0W+VqfRgb8dma0p03rpdF+Tz1IXJqBanXz1YUXQMqHoxcLGcPSBUPSshZWxxlEdzHU3PQ+E8wGj5bwVNkZq6ioUr+uCXUYRn/FfY13n7LxHeLUNF1fNaogjmRyRC+tUrcrra9vVTQaTLyw9vGX30Kyu+COEXNFT0BqmUeVH+QEPfylGiT/EzPtIL62lLO5YU5DgivwemMjZNB5LPF490Vax6ZXI0HsuvPXV4W2GfXb89LsoWi85buWt69kWJWwBqU63PCvrloHoVvRq4L0pbMz7SAWtKdgIiRVebg/BsZ+hw8uyhxRiRjmGj4yPSFtP4taee3jp2AydRueBWkAtDNZWHojocQCU0Bw9lpGPfE6frSLwDiPIB38he0x2e0Bnfrv3Kc1EQN1wRrxZ4NqI9QQwi+piv5oPZ9sbG3s5J8Ydi26YZz+hD5XTY397QjUhXiMilZw91rLwH0zvkDm/uSaZav6+iSy2iZf36BQYVXgoUUNonFw123HEcqJ9T37IkXiEfV/RahCtRLgYupPRLhIMIv8LwCzyer5w1a+/4vfh4alc3LweJEWKXoEf6Dm0p+9VtVfO4IIHHtyLepUDJ62QT+3eMQyX56bY68SWpwyOxvIkNDJw5kyn1VozD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDjeE/4fhV89r/3bSYgAAAAASUVORK5CYII=',
      };
      break;
    case 'visaelectron':
      cardTypeIcon = {
        uri: 'data:image/png;base64,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',
      };
      break;
  }

  return (
    <View style={{ height: props.height, width: props.width }}>
      <FlipCard
        style={props.cardStyles}
        flipHorizontal={true}
        flipVertical={false}
        flip={props.flipped}
      >
        <View style={props.frontStyles}>
          <View style={{ height: props.height, width: props.width }}>
            <ImageBackground
              source={props.frontImage}
              style={styles.imageBackground}
              imageStyle={{ borderRadius: props.borderRadius }}
            >
              <View style={styles.imageContainer}>
                <View style={{ flexGrow: 1 }} />

                <Text
                  style={{
                    fontSize: props.fontSize,
                    alignSelf: 'center',
                    color: props.fontColor,
                  }}
                >
                  {creditcardutils.formatCardNumber(String(props.number))}
                </Text>

                <View style={styles.rowContainer}>
                  <View style={styles.groupContainer}>
                    {props.since && (
                      <>
                        <Text
                          style={{
                            ...styles.groupLabel,
                            fontSize: props.fontSize * 0.7,
                            color: props.fontColor,
                            textAlign: 'right',
                          }}
                        >
                          CUSTOMER{'\n'}SINCE
                        </Text>

                        <Text
                          style={{
                            fontSize: props.fontSize * 0.7,
                            color: props.fontColor,
                          }}
                        >
                          {props.since}
                        </Text>
                      </>
                    )}
                  </View>

                  <View style={styles.groupContainer}>
                    {props.expiration && (
                      <>
                        <Text
                          style={{
                            ...styles.groupLabel,
                            fontSize: props.fontSize * 0.7,
                            color: props.fontColor,
                            textAlign: 'center',
                          }}
                        >
                          VALID{'\n'}THRU
                        </Text>

                        <Text
                          style={{
                            fontSize: props.fontSize * 0.7,
                            color: props.fontColor,
                          }}
                        >
                          {creditcardutils.formatCardExpiry(props.expiration)}
                        </Text>
                      </>
                    )}
                  </View>
                  <View style={styles.cardTypeIconContainer}>
                    {cardTypeIcon && (
                      <Image
                        source={cardTypeIcon}
                        style={styles.cardTypeIcon}
                        resizeMode="contain"
                      />
                    )}
                  </View>
                </View>
                <Text
                  style={{
                    fontSize: props.fontSize,
                    marginTop: 5,
                    color: props.fontColor,
                  }}
                >
                  {props.name}
                </Text>
              </View>
            </ImageBackground>
          </View>
        </View>

        <View style={props.backStyles}>
          <View style={{ height: props.height, width: props.width }}>
            <ImageBackground
              source={props.backImage}
              style={styles.imageBackground}
              imageStyle={{ borderRadius: props.borderRadius }}
            >
              <View style={{ height: '45%' }} />

              <View style={{ flexDirection: 'row' }}>
                <View style={{ width: '82%' }} />

                <Text style={{ fontSize: props.fontSize, alignSelf: 'center' }}>
                  {props.cvc}
                </Text>
              </View>
            </ImageBackground>
          </View>
        </View>
      </FlipCard>
    </View>
  );
}