Develop Reference

react native display image

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.

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>

TouchableOpacity takes more than half of width

I'm trying to arrange my cards into something like this
But heres what I got
As you can see the TouchableOpacity (yellow color) takes more than half of the container width (orange color).
I've tried may things by adding width: "50%" and set alignItems with flex-start, flex-end, etc but it only make things worse.
Here's my card component code
const SmallMateriCard = (props) => {
return (
<NativeBaseProvider >
<Box maxW={"70%"} alignItems="flex-start" style={{backgroundColor:"blue"}}>
{/* <Pressable onPress={props.onPress}> */}
<Box
borderRadius={18}
overflow="hidden"
style={{
width: "100%",
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 4,
}}>
<Box>
<AspectRatio w="100%" ratio={6/5} >
{props.cardIcon && (
<Image
borderRadius={18}
source={{uri: props.cardIcon}}
alt="image"
/>
)}
</AspectRatio>
</Box>
<Stack px="6" py="6" >
<Text
style={[
font.family.extrabold,
{ fontSize: 15, color: color.primary },
]}>
{props.title}
</Text>
</Stack>
</Box>
{/* </Pressable> */}
</Box>
</NativeBaseProvider>
);
};
export default SmallMateriCard;
and here's my screen code
const UKKSekunderScreen = ({ navigation }) => {
return (
<SafeAreaView>
<View
style={[mixins.margin(16,16)]}>
<ScrollView >
<View style={[mixins.margin(16,16), layout.display.flex, layout.justify.between, { backgroundColor:"orange", flexDirection: 'row', flexWrap: 'wrap' }]}>
{UKK_SEKUNDER.map((item, key) => (
<TouchableOpacity key={key} style={{ backgroundColor:"yellow", }}>
<View
style={[layout.margin.vertical(10)]}
>
<SmallMateriCard {...item} />
</View>
</TouchableOpacity>
))}
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
export default UKKSekunderScreen;
Thanks in advance.
EDIT
Gaurav's solution works but there's a new problem when I integrated it with my expandable component. The cards are overlaps when the component is collapsed.
EDIT 2
Solved by adding overflow: 'hidden'.

Hey check this please https://snack.expo.dev/HUhqzIpYv
Hope it helps :)

I believe your desired output would be a flex row with wrap enabled such as:
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
<View style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection:'row',
flexWrap: 'wrap'
}}>
<Box style={{width: '50%'}} {...} />
<Box style={{width: '50%'}} {...} />
<Box style={{width: '50%'}} {...} />
<Box style={{width: '50%'}} {...} />
....
</View>
</View>
You could add some padding and margin to the box to add some space in-between them.
Edit: Here's an example with plain text, just to notice the layout:
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View
style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
}}>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
<Text
style={{width: '40%', borderWidth: 2, padding: '10%', margin: '5%', textAlign: 'center'}}>
Text
</Text>
</View>
</View>

How to pass FlatList item to modal?

I have a FlatList with some items. These items are clickable from a TouchableOpacity that brings up a Modal. The Modal is gonna show some more info about the item. How can I pass the FlatList item to the modal?
CODE:
const renderItem = ({ item }) => {
return (
<View style={{}}>
<TouchableOpacity
style={{
marginLeft: 20,
marginRight: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
backgroundColor: colors.card,
}}
onPress={() => {
setModalVisible(true, item);
}}>
<View style={{ margin: 10 }}>
<Text style={{ color: colors.text }}>{item.company}</Text>
<Text style={{ color: colors.text, fontWeight: '700' }}>
{item.name}
</Text>
<Text style={{ color: colors.text }}>{item.gluten}</Text>
<Text style={{ color: colors.text }}>{item.id}</Text>
</View>
</TouchableOpacity>
</View>
);
};
............................................................................
<Modal
animationType="fade"
hardwareAccelerated={true}
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
backgroundColor: colors.Modal,
margin: 20,
padding: 35,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
borderRadius: 10,
height: '85%',
}}>
<AntDesign
name="closecircleo"
size={20}
color={colors.text}
onPress={() => setModalVisible(false)}
/>
<Text style={{ color: colors.text }}>{}</Text>
</View>
</Modal>
..........................................
<FlatList
data={filteredDataSource}
keyExtractor={(_, index) => index.toString()}
renderItem={renderItem}
/>

make author variable like detail item and on TouchableOpacity onpress event put your item in that and you can access in your model and on model onRequestClose empty that veriable like that
const [details,setDetails] = useState(null);
<TouchableOpacity onPress={() => {
setModalVisible(true);
setDetails(item)
}}>
....
</TouchableOpacity>
<Modal
onRequestClose={() => {
setModalVisible(!modalVisible);
setDetails(null)
}}
>
<Text style={{ color: colors.text }}>{Details.company}</Text>
</Modal>
may this help you

react native view overflow

I'm trying to imitate the image.
I'm having a problem with the button with the like in the middle I can not imitate it.
Since I read it seems that native react on android has a problem with overflow.
I thought you could use a:
marginTop: -25
but it does not seem to solve the problem.
Some advice?
Link expo: https://snack.expo.io/Hk1yUyzB7
Code:
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';
//import ViewOverflow from 'react-native-view-overflow';
export default class App extends Component {
render() {
var account = (
<View>
<View
style={{
paddingTop: 20,
paddingLeft: 20,
flexDirection: 'row',
}}>
<Image
style={{ width: 50, height: 50, borderRadius: 25 }}
source={{
uri:
'http://www1.pictures.zimbio.com/bg/Number+Four+World+Premiere+h5-FoI0M8-gl.jpg',
}}
/>
<View
style={{
paddingLeft: 20,
}}>
<Text>Yulia James</Text>
<Text
style={{
color: '#ccc',
}}>
6 hrs · IIT London
</Text>
</View>
</View>
<Text
style={{
paddingTop: 20,
paddingLeft: 20,
paddingBottom: 20,
}}>
Making everyday worth it :)
</Text>
<View
style={{
paddingBottom: 20,
}}>
<Image
style={{
width: '100%',
height: 200,
}}
source={{
uri:
'http://www.wordzz.com/wp-content/uploads/2016/11/Night-Ratri.jpg',
}}
/>
</View>
</View>
);
var com = (
<View
style={{
backgroundColor: 'rgba(230,230,230,0.8)',
//height: 40,
alignItems: 'center',
//justifyContent: 'center',
padding: 5,
flex: 1,
}}>
<Text
style={{
color: '#ccc',
fontSize: 18,
}}>
Comment
</Text>
</View>
);
return (
<View
style={{
flex: 1,
backgroundColor: '#e7eff0',
}}>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.8)',
marginTop: 50,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#e7e7e7',
}}>
{account}
<View
style={{
backgroundColor: '#fff',
borderTopWidth: 1,
borderColor: '#ccc',
//alignItems: 'center',
//justifyContent: 'center',
}}>
<View style={styles.container2}>
{com}
<View
style={{
//backgroundColor: '#000',
borderRadius: 40,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ccc',
borderWidth: 1,
}}>
<Image
style={{
//resizeMode: 'cover',
height: 40,
width: 40,
}}
source={{
uri: 'http://i.imgur.com/k5jMsaH.gif',
}}
/>
</View>
{com}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container2: {
flexDirection: 'row',
},
});

Weird behavior with Text and View

I have a MapView, with a text above it:
<View style={{ height: 310, alignItems: 'center', marginBottom: 10 }}>
<MapView style={ { height: 300, width: 350, } } initialRegion= .. >
<View style={{ height: 60, backgroundColor: 'rgba(255,255,255,0.7)' , flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}} >
<Text style={{ fontSize: 20, color: 'black' }}> {this.state.title} </Text>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{ marginTop: 5, fontSize: 15, color: 'black', marginRight: 13}}> {this.state.startLoc.name} </Text>
<Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}> {buildTimeString(new Date(this.state.startDate))} </Text>
<Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}> {getDistanceOneToOne(this.state.startLoc, this.state.destinationLoc).distance} </Text>
</View>
</View>
..
</View>
Sometimes it displays the two texts (lines) right, but most of the times it displays them wrong (bot above each other):
What could be the issue?