Crea la pantalla de detalles de productos

Curso de App Mobile utilizando Woocommerce

Clase 8 de 15

Clase 8 / 15

const styles = StyleSheet.create({
  container: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10 -
          50
        : Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10,
  },
  imageContainer: {
    borderBottomStartRadius: 8,
    borderBottomEndRadius: 8,
    overflow: 'hidden',
  },
  itemImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width,
  },
  textContainer: {
    padding: 16,
  },
  itemPrice: {
    color: colors.darkGrey,
    fontSize: 24,
    lineHeight: 24,
    fontWeight: '700',
    marginBottom: 8,
  },
  itemTitle: {
    color: colors.grey,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: 16,
  },
  itemDescription: {
    color: colors.darkGrey,
    fontSize: 16,
  },
  buttonContainer: {
    height: sizes.ctaButton * 2,
    marginHorizontal: 8,
    padding: 8,
    borderRadius: 8,
  },
  buttonTextAdd: {
    color: colors.white,
    fontWeight: 'bold',
  },
  buttonAdd: {
    backgroundColor: colors.green,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  buttonTextDelete: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  buttonDelete: {
    backgroundColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
});

import { When } from 'react-if';
import { Image, Pressable, StyleSheet, View } from 'react-native';

import { HeaderProps } from '@/constants/types/HeaderTypes';
import { sizes } from '@/src/resources/constants';

export const Header = ({ route, navigation }: HeaderProps) => {
  const isProductScreen: boolean = route.name === 'Products';
  const handlePress = () => {
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <When condition={!isProductScreen}>
        <Pressable onPress={handlePress}>
          <Image
            style={styles.arrowIcon}
            source={{ uri: '@/assets//header/go-back-icon.png' }}
          />
        </Pressable>
      </When>
      <Image style={styles.logo} source={{ uri: '@/assets/header/logo.png' }} />
      <Image
        style={styles.cartBtn}
        source={{ uri: '@/assets/header/cart-icon.png' }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: sizes.headerHeight,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 8,
  },
  arrowIcon: {
    width: 25,
    height: 21,
  },
  logo: {
    width: 96,
    height: 17,
  },
  cartBtn: {
    width: 25,
    height: 25,
  },
});

Crea la pantalla de detalles de productos

Progreso del curso

Presentación

Preparando el proyecto

Creando tu app

Conclusiones