I am new to React Native and trying to build a simple app that displays four images on the screen with Touchable function however there is margin between pictures and setting margin:0 and padding:0 are not helping at all.
What might be a solution?
render() {
return (
<View>
<SafeAreaView>
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<ImageBackground
style={styleImage.container}
source={item.pic}
>
<Text>{item.title}</Text>
</ImageBackground>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
}
}
const styleImage = StyleSheet.create({
container: {
height: "30%",
width: "30%",
padding:0,
margin:0,
},
});
1:
Try this...
Replace ImageBackground with Image
and add one property to it resizeMode='cover', it will pull the image to ends of image area
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<View>
<Image
resizeMode="cover" // or 'stretch'
style={{ height: 200, width: 200 }}
source={item.pic}
/>
<View style={{ position: "absolute", zIndex: 9 }}>
<Text>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
Style as your requirement
Related
I'm really new to react native, and Im working on a simple app with 4 images and four button, each button should change the opacity on an image, but I'm lost om how to do that....can someonne point me into the right direccion on how to do this.
<View style={styles.card}>
<Image source={require('./assets/1.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 1</Text>
</View>
<View style={styles.card}>
<Image source={require('./assets/2.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 2</Text>
</View>
const styles = StyleSheet.create({
cardImgStyle: {
width : "100%",
height : 140,
borderTopLeftRadius : 10,
borderTopRightRadius: 10,
marginBottom : 3,
opacity: .2
},
});
maybe you can useState for this case, in my opinion you can handle the id on object to selected the image, and you can use the condtional rendering when user selected, set the style.selectImage and use the opacity 0.4. you can check my code example on bottom . hope this my explanation can help you.
const data = [
{
id: 1,
image : require('../../yourpath'),
id: 2,
image: require('../../yourpath')
}
]
const = [ selected, setSelected ] = useState(0)
<FlatList
horizontal
pagingEnabled={true}
data={data}
style={{height:130 }}
renderItem={({item})=>{
const content =
selected === item.id
? style.selectImage
: style.unSelectImage;
return(
<View style={style.wrapper}>
<TouchableOpacity style={content} onPress={()=>setSelectedId(item.id)}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image source={item.image} style={{height: 65, width: 60}}/>
</View>
<Text style={{color: 'black', textAlign: 'center', marginTop: 10}}>{item.title}</Text>
</TouchableOpacity>
</View>
)
}}/>
I'm trying to get space around my items in a horizontal flatlist, no matter how I try it doesn't seem to work:
const renderItem = ({item}) => {
return (
<View style={styles.item}>
<Image
source={{uri: content.uri}}
style={styles.image}
/>
<View>
<Text style={styles.contentTitle}>{content.title}</Text>
<Text style={styles.contentText}>{content.releaseDate}</Text>
</View>
</View>
)
}
<View style={styles.container}>
{header}
<View style={{width: '100%', justifyContent: 'space-around', backgroundColor: 'green'}}>
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
width: windowWidth,
marginTop: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: Colors.borderBlue,
backgroundColor: Colors.backgroundGenericTransparent,
},
item: {
width: windowWidth / 3.1,
backgroundColor: 'red',
},
image: {
width: '100%',
height: 220,
},
})
result:
As you can see the items are all together on the left even though I have added a space-around property on the container. Not show how I can resolve this.
use ItemSeparatorComponent
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 10,
}} />
);
}}
/>
Use this prop on flatlist:
columnWrapperStyle={{ justifyContent: "space-between" }}
Not sure what you are trying to achieve.
Is that what you want?
snack here
Just add horizontal padding to your container. and no matter how big your items get you will always have spacing left and right. If the item gets too big you can start to scroll.
<View style={styles.messageGalleryContainer}>
<FlatList
data={files}
renderItem={renderImageGalleryItem}
keyExtractor={(item) => item?._id}
horizontal
showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={{ width: 10 }} />} // add this line
contentContainerStyle={styles.messageGalleryItemContainer}
/>
</View>
You should use ItemSeparatorComponent with an empty component or with any element you want.
I am trying to get the background image to take up the entire space on the screen
As you can see from the image this does not seem to be working. I think it may be something to do with the scroll view but unfortunately I cannot figure it out.
Ideally want to use flex box for the solution.
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.container}>
<ImageBackground
source={require('./src/assets/foodflixIMG.jpg')}
style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: 'red',
height: '100%',
},
container: {
flex: 1,
flexDirection: 'column',
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
text: {
color: 'grey',
fontSize: 30,
fontWeight: 'bold',
}
});
export default App;
Check your code something like this:
<ImageBackground
source={require('./assets/main.jpg')}
style={{height:"100%",
width:"100%", flex:1}}
>
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Text>Hello</Text>
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
Hope this helps!
I want my app to add text underneath the goal section but flex is not letting me do that even if I create new components in native P.S Still a beginner
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
You need to bring the listing outside the Container View, as the flex-direction of Container is row, all items will be in a row including form.
My modified code is given below
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
I think that you use to much Vieuw elements.
You should for example use a Text for where your text need to print out.
But I think I have it.
You wrapped everything into a View with a style of;
flexDirection: "row",
Not that good if you don't want to have the whole View on one line....
Issue solved?
Using React-Native I need to centre my Image and component LYDSceneQuestion:
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextButton onPress={onNext} />
</View>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
logo: {
flex: 1,
width: 300,
height: 100,
resizeMode: 'contain'
}
});
Currently my image aligns to the bottom, how I can I centre it vertically?
I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.
<View style={styles.container,{flex: 1}}>
<View style={{flex: 2}}>
<LYDSceneQuestion text="Welcome to" />
</View>
<View style={{flex: 2}}>
<Image source={theme.images.logo} style={styles.logo}/>
</View>
<View style={{flex: 2}}>
<NextButton onPress={onNext} />
</View>
</View>
I think if you follow this you can centre it vertically.