react-native#ImageBackground TypeScript Examples

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

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

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

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

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

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

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

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

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

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

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

AnimatedImageBackground = createAnimatedComponent(ImageBackground)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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,iVBORw0KGgoAAAANSUhEUgAAAH0AAABQCAYAAAA0snrNAAAABmJLR0QA/wD/AP+gvaeTAAAKnklEQVR4nO2ceXRU1R3HP3eWzIQQskISBAxhVyKgYhUoOCzFatVWT61EBaxS7bHWtZW4joomaF2qdTuHHitgNYrHXU8KYUArioCN7EtYgsSEAAlkm8lkZm7/COEAaubN3DfzhnPe5x9yJvf9fr+8L3fefb/7+10wMTExMTExMTExMTExMTExMTExMTExMTExUUIYHYAuuD02fJZCLMEhhBiEIBeBE0RGdAZlIxIfkjqQVVgsO0hiI25XQN/AjeHUFf2+itMJid8B04DzgZ4x9tgCfAWyAitvM2/Kzhj7ixmnluhujw0fVyLkrcA4Too/yWphcFYyBZlOetitpCfb6AhKWvxBDrT62XHQS01Tu07BiDVI+TKtvtd5/mK9jMaFU0N0t9uCf9JMpHwIyO/62G4VTBucyS+GZOIqSOeMPinYLN3/SU3tAVZVN+HZ1ciHWw+ypb5NNbp64Ckc4jncLp+qsXiQ+KLPXX4OQrwEcmzXR/kZTm4b14+iUTn06ZmkZH7NviYWrK3ltW/qaA+EVExVI+VfKJ3ytlJAcSCBRZeCe1f8GSmfAJIA+qU5mDetgKJROdit+oZe09RO6cq9vLS6hmBIKliSS/Bb/shTroO6BacziSn63eUp2OxlCC4BsAjB7eP78fDUgfRMssbUdWVtCze9u42v9zWpmKlBcjmlk9fpFZeeJJ7od5f3wW7/GDgXoHeKnUVXncH0IZlxCyEQkjzmqeaR5XsIyahnfRuIWZS4lugZmx4kluj3LE3DYvGAGAMwKq8nn84eRV6q2nM7WpZsPMC1b21WedYHEWI2j7sW6xmXKokj+h2rknH4liEYBzAhP40PZ55FutNmaFieXY1cvmgDze3BaE0EkXJGIi3wLEYHcAyn7+9dghfmpiSE4ACuggzev64Qhy3qW2VFiIXcV3GennGpkBiiz/VcA8wB6J/mYOnvRyeE4F24CjJYcMVwFRNOQuId7i7vo1dMKhgvevGyLCzyWQCbRfDG1WeSE+G7964GLzsbvJrHf/VdU8Rf19eOzuGm8/pGdM1J9CMp6R8qBvTCeNGxPIkkG+CByfmMPz1N85W1zX6ue2szw55ezbe1LZqv++fa78l/4kse81TTEdS+On/2V0MYlt1D8/gfIOVvKV5+RfQG9MFY0Ys9w4FZAIOzkvnrxAGaL31zfT0jn/2axZX7CUSRTGnwdnD/0l2c9+JaNu5v1XSN02bhld8MQ6gtf5/m1k8cShYUMVZ0KYu7YnjmkiE4NS6W5q/cS1HZJhq8HcohVNa2cMFL61ha1aBp/KSB6fz6jN4qLk8nxXmDigFVjBP93s/yEMyAzvfxS4Zlabrs/qW7mFu+k+hzJj+kxR/ksoUbWLHrsKbxD07OV5vtgmLcHsNWqgbO9GARYAe4Z+IATTfxnY0HeHxFdUyi8QVCXPn6Rk0LwtF5PZk2WClD2I92LlIxoIJxokt5LUCa06bp63LfkXZmL9mi6ww/mQZvB7Pe1ubj+nPyFL2FDPuKN0b0ez/LA0YDXFXYh2R7+DDu+qSKFn/UWTHNfFF9hEWVdWHHXT4im1SHyuaPuIg7ViUrGIgaY0QPdVzY9ePFGp7lG/e38taG+lhGdALuZbvDbrQk2y1cODDKErxOnDjax6sYiBZjRLeICZ3/CCYNTA87/OXVNTEP6Xh2N/oo3xF+Ne8aFD72brHIyWoGonRrhFOkGAEwJCuZjOTuF7EhKXlzffxmeRf/rtwfdsz5/XupOQmJkWoGosOghZwcCjC8T/js1qb9bRxqU38fj5TP9xwJO2ZYb4XsHICQI9QMREf8Re98P+0LMCgz/Dpm9XdKFSxRU33YR22zv9sxmcl2MpPtKm4G4nbHXYP4i+6zpXJ0H1/LTpp+JcuR870G32lOpfItK21TU1QMREP8RbeGjjUl9NTwyqNHqjVaDrSG991LeQu4LVXRQMTEX3RBRHfJori7oYI1HnfHYo97LVj8RfeGmrt+bNGwp53dQ+mZqUTvlPB6NPlU29ts4VeMOhN/0f3eY6If1nDD+qcbswspBPTrFd63lr+hGyTOQHP4YfoSf9E7+74OAJo2N8YN0F5UoSdDs3qQndL9t0yDt4NGr5Lo+4zohDXoPV1sBdiqoY9scFYy/dLiP9snasgUbjug2AcnxUY1A9FhjOiCTQA7Dnk1zZSZY3JjHtLJzDo7vM+vVHMIltB6NQNRujXCKaHQZ9CZYl25O3zhwpyxfbGG6UbVk8LcFE21est3Nip6EksVDUSFMaIHAhWABPh0+6Gww/MznNysVokaESXTB4Ud09YR1PQfthtaafb9V8VAtBgj+t+m1yP5EqBsfT3ejvBtQ49OK4i4NDoaLhuRral06/3NB1W6XgDeM+owAyMLI18DOOIL8P6W8F29Gck2lhSNJCmGGZP8DKfmpoZ/fRO+0KJ7Qq8oGogaA8ulgmVAM0DpympNJUoT8tN44bKhMcnSZfWw8+HMs+gd5jUNOitotVbP/gTrKZn6uYoBFYwTff60Iwj5IsC3tS18tE1bD/+NY/NYdNUIXQ8l6NvLgefGMYzM0bb38XDFbtVavQeUrlbE4Lp3+1NAK8CdH1fh09gSXDQqhxVzxjBUpdvkKJcOz2bdLedSmKtN8GVVjby3WeGQCckqSiZ/EL0BdYwVvWTiAeARgKpDXuav3Kv50nED0qi8dSwPTcmPak97RJ8evHH1mXwws5Bcjf3v3o4Qt3ywPWJfx+FHWm9WMaAHxvenuz022uUaYLTNIvDcOIYJ+ZGlXpvbg7T6g5rFqzrkpSDTGfHaYM67W1mwpjaia05A8iClkx+N3oA+GN/A6HYFCFlnAm2BkGRG2aawFSsnk+qwahYcOlO7kQq+8H91aoJDBU5RomJAL4wXHWD+pA1IcRt0NjVMf7VSdSNDV5bvbOQP725TMbEHv7g6UY4ZTQzRAUpdC5A8A7ChrpVLF65PCOGX7+w8fkTh3Jk6CE1PpCPGjH+mn4AUFHte5Wj7cmFuCp/OHsVpGva1Y0HZ+npmLdmiIng9hFyUTN2sZ1yqJM5MB0BIqg7eALwAnTN+zPNrNOXn9SQQkjxcsYeiMqWTpaqwMjHRBIeEm+nHUVwxF8Q8wGoRgj9dcBqPThtIL0dsO3zX1jRz83vbWFejVNBSjrTPoPTnqttwMSFxRQeY67kQIRcDpwHkpSbxyNQCZp6do3sOfu9hH4+vqGbB2lqVY0LbkeIhnCufxO1WOmg2liS26AB3ebJJkqXA9Rx9HPVPc3Db+P5cMyonole1H+PLvUdYsKaWxZX78QeVdPoPQevtPDFpi1JAcSDxRe+iePnPQJSAdHV9ZLUIpgzKOHb0d2FOz7A5+cO+AF9UH6GiqvPo76pD2k+l+gnWgXBT4vpI1VC8OHVE7+I+z/lI7kTKSwHn8b+yWwUDMzoP+U912MhItuEPhGj2B6lv6WD7wTb2t0SW+PkJ/EhRDjxHqWuZHgbjyaknehduTzrtXImQvwQmdR1LFjMEB4GVSFmOo+Md3Bcp7a0ayakr+glIQfGKYcBwkEOR5GIhBUk6IsJ8q5QSwWEkLQjqkGIHVrmFea7tIGJ4+ImJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYnJKcP/AbggaBuvdl+QAAAAAElFTkSuQmCC',
      };
      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,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',
      };
      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>
  );
}