I have a image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this
Related
I noticed that while adding 'View' with React native, it behaves as if "width: '100%'" was assigned even though I did not enter any style. Same situation exists for any component. It covers the whole area horizontally. What is the cause and solution?
return (
<View style={{flex:1}}>
{/* paints the line he is in full red but should only paint as much as the line of the text */}
<View style={{backgroundColor:'red'}}>
<Text>Example</Text>
</View >
</View>
);
If you want the background color to only encompass the text, you can use this:
<Text style={{backgroundColor: 'red', alignSelf: 'flex-start'}}>
Example
</Text>
scrollview is not taking images properly ,outputs only one image in my code ...
<ScrollView scrollEventThrottle={16}>
<View style={styles.scrollcontainer}>
<ScrollView horizontal={true}>
<Image source={require('../assets/banner.png')} style={{height:120,width:120,resizeMode:'cover'}}/>
<Image source={require('../assets/banner.png')} style={{height:120,width:120,resizeMode:'cover'}}/>
<Image source={require('../assets/banner.png')} style={{height:120,width:120,resizeMode:'cover'}}/>
<Image source={require('../assets/banner.png')} style={{height:120,width:120,resizeMode:'cover'}}/>
</ScrollView>
</View>
</ScrollView>
I created the reproduction of your issue and it seems working as expected.
https://snack.expo.io/SJMX0BQn4 Check this snack
Please also share styles.scrollcontainer details. It may be related to styling of view
I tried rgba(156, 39, 176, 1) but it does not cover the color under it.
How can I make the purple color circle cover the part of background bell?
First try setting zIndex on the badge to make it render on top. However Android has some zIndex issues, so if that doesn't work then you have to render it after. So you have this right now:
<View>
<Badge>
<Image>
</View>
You need to do:
<View>
<Image>
<Badge>
</View>
You can use react-native-icon-badge to create this notification icon symbol with count.
<View style={styles.container}>
<IconBadge
MainElement={
<View>
<Image
style={{width:60,height:60,margin:3}}
source={bell}
/>
</View>
}
BadgeElement={
<Text style={{color:'#FFFFFF'}}>3</Text>
}
IconBadgeStyle={
{width:30,
height:30,
backgroundColor: '#9c27b0'}
}
Hidden={this.state.BadgeCount==0}
/>
</View>
How to render a paragraph with image at right,
the screen design should be similar to the screenshot
React Native does not support text justification in the way you want. You could somewhat emulate this effect for one paragraph at a time by rendering each paragraph in its own Text component, then rendering the following for paragraphs that have accompanying images:
<View style={{flexDirection: 'row'}}>
<Text>Lorem ipsum dolor......</Text>
<Image source={require('./path/to/image.png')} />
</View>
You'll probably want to add some left padding to the image component so the text doesn't run right up against it.
Can you try:
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return(
<View style={styles.container}>
<Image source={pic} style={{width: 360, height: 110}}/>
<Text>React Application Works fine!</Text>
</View>
);
If I try to scroll to the bottom of my ScrollView, it bounces back to its default position and won't let me view the entirety of its content.
My ( truncated ) setup is fairly simple :
<View>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView> <------ My broken ScrollView :(
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
This is a simplified version of my actual code. But I'm reaching the conclusion that there's some kind of "unbounded height" going on as in this reference.
I did try making sure everything and all parents have flex: 1 all the way to the child <View> of my <ScrollView> and up to its parents. But that didn't seem to do the trick.
Any idea on how to debug this? I know ReactNative's website recommends this and says it would be easy to do in the inspector ( but with no instructions on how to do it ). If my assumption that there's an "unbounded height" issue, how would one go about and find this rascal unbounded node? Or is it something else?
Try taking flex out of the ScrollView entirely and just put flex: 1 on the parent. That did the trick for me.
For me the problem was setting a paddingVertical, paddingTop or paddingBottom on the ScrollView. Just don't do that. it influences the height of the content of the ScrollView, without the ScrollView adjusting to it appropriately.
The parent view must have style={{flex: 1}} then the scrollview can have style={{flex: 1}} 🥇
The bounded height thingy means the ScrollView itself must be bound.
If the ScrollView has unbounded height, it will stretch with your content and won't scroll.
You can just add height to the ScrollView and see how this works, from there on you can use absolute height or use flex in a way that will limit the ScrollView height to what you want.
This worked for me:
<View style={{flex: 1}}>
<ScrollView>
<View style={{paddingTop: 16, paddingBottom: 16}}>
<SearchBar />
<ItemsContainer />
</View>
</ScrollView>
</View>
You must make sure that ScrollView has fixed height, either by setting it for parents or for itself.
I use flex to set its height instead of specifying it directly so it works on all screen size. So for your code something like
<View style={{flex: 1}}>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView style={{flex:0.8}}>
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
More information in react native docs
This works for me
<ScrollView>
<View style={{height:2000}}>
</View>
<ScrollView>
The important thing is to put a defined height for the elements that are inside the ScrollView
<ScrollView style={{flex: 1, marginBottom: 30}} />
items
</ScrollView>
What worked for me was to wrap the ScrollView in View. Then giving the View a height and setting flex : 1 on ScrollView.
Something like this:
<View style={{ height: "60%" }}>
<ScrollView style={{ flex: 1 }}>
<List/>
</ScrollView>
</View>
The suggested answers above with parent flex: 1 and child flex: 1 work, but this thing was causing my bug.
I had <Image> with percentage height and once I replaced the percentage with a number, it fixed the issue.
this will solve your problem
<ScrollView
contentContainerStyle={{flexGrow:1,justifyContent:'space-
between'}}
>
<The Other Components or Lists/>
</ScrollView>
add <Text></Text>
at the bottom inside scrollview. it will give some space