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!
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'm having trouble getting 'scrollView' to take up 8 times the space as 'adContainer', using 'Flex'. Instead, the screen renders as if both are set to 'Flex: 1', each taking up an equal amount of space.
Code:
const CreateAccountScreen = (props) => {
return (
<View style={styles.mainContainer}>
<ScrollView style={styles.scrollView}>
<CreateAccountForm/>
</ScrollView>
<View style={styles.adContainer}>
<Advertisement/>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainContainer:{
flex: 1,
},
scrollView: {
flex: 8
},
adContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
}
})
The ScrollView functions properly, but it isn't taking up the amount of space I would like (8 times that of the adContainer). I've tried adding a 'View' around the ScrollView, and placing 'Flex: 8' on it.
Code:
const CreateNewAccountScreenA = (props) => {
return (
<View style={styles.mainContainer}>
<View style={styles.scrollViewContainer}>
<ScrollView style={styles.scrollView} >
<CreateAccountFormA/>
</ScrollView>
</View>
<View style={styles.adContainer}>
<Advertisement/>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainContainer:{
flex: 1,
},
scrollViewContainer: {
flex: 8
},
scrollView: {
flex: 1
},
adContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
}
})
This does have the effect I would like as far as the amount of space taken up by the 'scrollViewContainer', however then the ScrollView child inside of it will cease to function properly.
And I'm not sure I understand what 'contentContainerStyle' does on ScrollViews, I tried using that too, however I'm not sure I used it correctly.
Code:
const CreateNewAccountScreenA = (props) => {
return (
<View style={styles.mainContainer}>
<View contentContainerStyle={styles.contentContainer}>
<ScrollView style={styles.scrollView} >
<CreateAccountFormA/>
</ScrollView>
</View>
<View style={styles.adContainer}>
<Advertisement/>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainContainer:{
flex: 1,
},
contentContainer: {
flex: 8
},
scrollView: {
flex: 1
},
adContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
}
})
The code above resulted in 'adContainer' taking up the entire space of the screen.
I'm not sure what I'm doing wrong, but any help would be greatly appreciated! Thanks, peace.
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?
I am coding a navbar in React Native. Think of it as double layered -- the upper layer is a burger menu, a title, and a search icon, the second layer consists of three touchable titles to navigate to the relevant screens.
a mock-up of the navbar I'm trying to create
When I apply inline styles, they work. When I do Stylesheet.create and apply styles down there, they don't. I am new to programming and very confused.
My plan is to code a single navbar that is split into two rows (views): navbarTop and navbarBottom. I would very much appreciate some insight into whether doing so makes sense, and also how to fix my styling issue. Thank you all very much!
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<View>
<TouchableHighlight
onPress={() => {
this.props.navigation.openDrawer();
}}
>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
</View>
<View>
<Text
style={{
fontWeight: 'bold',
color: 'white',
fontSize: 20,
marginRight: 70
}}
>
Dashboard
</Text>
</View>
<View>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
</View>
<View style={styles.navbarBottom}>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> RECORDINGS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> PATIENTS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> DEVICES </Text>
</View>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
});
In line styles over write the style which are present in the stylesheet.
Let's say there is a style component :
<View style = {[styles.demoView,{marginTop:50}]}/>
export default StyleSheet.create({
demoView: {
marginTop:20,
flexDirection: "row",
padding: "10rem",
justifyContent: "space-between",
alignItems: "center",
},
In the above style the inline style will replace the value of marginTop because it has high priority and the it would least concern even if you remove the marginTop property from the stylesheet as it is been supressed by inline style. Hope it gives you clear vision.
Happy Coding :)
Edit :
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<TouchableHighlight
onPress={() => { this.props.navigation.openDrawer()}}>
<Image style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
<Text style={{fontWeight: 'bold',color: 'white',fontSize: 20,marginRight: 70}}>
Dashboard
</Text>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
<View style={styles.navbarBottom}>
<Text style={styles.navBarText}> RECORDINGS </Text>
<Text style={styles.navBarText}> PATIENTS </Text>
<Text style={styles.navBarText}> DEVICES </Text>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
navBarText:{
color: 'white',
fontSize: 15,
marginRight: 70
}
});