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.
>Solution :
In your code you need to give specific numbers. Or use View with specific percent for ex. 20% and wrap your Image in it and give your image img {width: 100%;} style