Hi everyone I would like to display an image but I don't know why, I can't display it. I think it's propobaly because i'm using wrong the height and the witdh but I'm searching and I didn't found any solution.

There is my code :

import React, {Component, useState, useEffect, useRef} from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  useWindowDimensions,
  ScrollView,
  TouchableOpacity,
  Modal,
  Pressable,
  Alert,
  TextInput,
  Button,
  Linking,
  Animated,
  LayoutAnimation,
} from "react-native";
import {Formik} from "formik";
import {useDispatch} from "react-redux";
import * as yup from "yup";
import RenderHtml from "react-native-render-html";
import AsyncStorage from "@react-native-async-storage/async-storage";
<ScrollView>
      <View style={styles.descriptionPage}>
        <View
          style={{
            alignItems: "center",
            backgroundColor: "#fff",
            height: "25%",
          }}
        >
          <Pressable onPress={() => {}}>
            <Image
              style={{
                width: "20%",
                height: "20%",
              }}
              source={require("../../assets/images/cloche.png")}
            />
          </Pressable>
          <Image
            style={styles.imageProduct}
            source={{uri: data["image_url"]}}
          />
          <TouchableOpacity
            onPress={() => {
              navigation.goBack();
            }}
          >
            <Text style={styles.category}>{category}</Text>
          </TouchableOpacity>
          <Text style={styles.title}>{data["titre"]}</Text>
          <View style={{display: "flex", flexDirection: "row", marginTop: 7}}>
            <Text style={{color: "grey", top: 38}}>à partir de </Text>
            <Text style={styles.price}>{data["prix"]} €</Text>
          </View>
          <TouchableOpacity style={{top: "10%"}} onPress={toggleText}>
            <Text>Description Produit</Text>
          </TouchableOpacity>
        </View>
        {showText && (
          <ScrollView>
            <Animated.View
              style={{
                transform: [{scaleY: scaleYInterpolation}],
                height: "auto",
                width: "85%",
                left: "5%",
              }}
            >
              <RenderHtml contentWidth={width} source={short_description} />
            </Animated.View>
          </ScrollView>
        )}
        <View
          style={{
            backgroundColor: "#EBEBEB",
            right: "2%",
            width: "110%",
            bottom: "0.15%",
          }}
        >
          <Text
            style={{fontWeight: "bold", fontSize: 22, top: "2%", left: "5%"}}
          >
            {offerCpt} offres
          </Text>

          {offers.map((element, index) => {
            const date = new Date(element["updated_at"]);
            const dateOnly = date.toISOString().split("T")[0];
            return (
              <View style={styles.allOffer}>
                <Text
                  style={{
                    color: "#ff7c00",
                    fontSize: 25,
                    paddingLeft: 10,
                    fontWeight: "bold",
                    top: 7,
                  }}
                >
                  {element["prix"]} €
                </Text>
                <Text
                  style={{
                    paddingLeft: 10,
                    color: "grey",
                    fontSize: 11,
                    top: 5,
                  }}
                >
                  TVA incl.
                </Text>
                <Text
                  style={{
                    color: "#8F8A84",
                    paddingLeft: 10,
                    fontSize: 10,
                    top: "15%",
                    width: "45%",
                  }}
                >
                  Annonce valable aujourd'hui, mise à jour le : {dateOnly}
                </Text>
                <TouchableOpacity
                  onPress={() => Linking.openURL(element["url"])}
                >
                  <Text
                    style={{
                      left: "70%",
                      bottom: "55%",
                      color: "#ff7c00",
                      borderRadius: 20,
                      fontSize: 15,
                      borderColor: "#ff7c00",
                      borderWidth: 1,
                      width: "25%",
                      textAlign: "center",
                    }}
                  >
                    Voir l'offre
                  </Text>
                </TouchableOpacity>
              </View>
            );
          })}
        </View>
        <View style={styles.centeredView}>
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
              Alert.alert("Modal has been closed.");
              setModalVisible(!modalVisible);
            }}
          >
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <Pressable style={{left: "50%"}}>
                  <Button
                    style={{left: "50%", color: "black"}}
                    onPress={() => setModalVisible(!modalVisible)}
                    title="X"
                    color={"#ff7b0d"}
                  />
                </Pressable>
                <Text style={{fontSize: 22, right: "25%", bottom: "5%"}}>
                  Prix trop élevé ?
                </Text>
                <Text style={styles.modalText}>Saisir le montant souhaité</Text>
                <Formik
                  initialValues={{
                    targetPrice: "",
                  }}
                  validationSchema={formSchema}
                  onSubmit={handleSubmit}
                >
                  {(props) => (
                    <View>
                      <TextInput
                        style={styles.input}
                        placeholderTextColor="#fff"
                        onChangeText={props.handleChange("targetPrice")}
                        value={props.values.targetPrice}
                      />
                      <Text
                        style={{
                          fontSize: 25,
                          color: "#ff7b0d",
                          left: "90%",
                        }}
                      >
                        €
                      </Text>
                      <Button
                        color="#ff7b0d"
                        title="Valider"
                        onPress={props.handleSubmit}
                      />
                    </View>
                  )}
                </Formik>
              </View>
            </View>
          </Modal>
        </View>
      </View>
    </ScrollView>

style :

imageProduct: {
    alignSelf: "center",
    width: "50%",
    height: "50%",
    top: "5%",
  },
  category: {
    fontWeight: "bold",
    fontSize: 15,
    color: "#324160",
    marginTop: 10,
  },
  title: {
    fontWeight: "bold",
    fontSize: 26,
    marginTop: 10,
  },
  price: {
    color: "#ff7b0d",
    fontSize: 22,
    fontWeight: "bold",
    paddingLeft: 5,
  },

so if someone could explain me where is this "problem". thanks you in advance I continu by my side.

CodePudding user response：

In your code you need to give specific numbers. Or use Pressable with specific percent for ex. 100% and wrap your Image in it and give your image img {width: 100%;} style.

So the answer is you need to give the component a width

<Pressable style = {{width: "100%"}}> 
   <Image style={{ width: "20%", height: "20%"}} source={require('../../../picture.png')} /> 
</Pressable>