I am using ImageBackground in my react native app, but it not covering full height of the View
You can see that there is red space which is not covered by my image.
Below is my code:
<View
style={styles.subDomainItem}>
<ImageBackground
resizeMode={'cover'}
source={ImageConfig.script_default_cloud}
style={{
width: '100%',
height: (dimensions.width - 20) / 2,
backgroundColor: 'red',
flex: 1,
justifyContent: 'center',
}}></ImageBackground>
</View>
subDomainItem: {
maxWidth: '94%',
width: '94%',
marginHorizontal: '3%',
marginVertical: 10,
overflow: 'hidden',
borderRadius: 10,
flex: 1,
elevation: 8,
},
I want my image to cover all the red spaces at top and bottom, but I don't know what I am doing wrong.
Try this. is wroking fine
import React from 'react'
import { View, ImageBackground,Text, Dimensions } from 'react-native'
const Backimage = () => {
return(
<ImageBackground
style={{width:Dimensions.get("screen").width, height:Dimensions.get("screen").height}}
source={require("./src/assets/water.png")} resizeMethod="resize">
</ImageBackground>
)
}
export default Backimage
I think you should give your subDomainItem view an explicit height when styling it. You gave it a width of 94% but you haven‘t specified a height.
ImageBackground should then work properly by giving it a height of 100% if the parent component (subDomainItem in this case) has an explicit height.
You don't want to give a height and width for ImageBackground if you want to cover all space of parent View you just need give flex: 1 or height and width to 100% for ImageBackground.
import {
View,
Text,
ImageBackground,
Dimensions,
StyleSheet,
} from 'react-native';
const WIDTH = Dimensions.get('screen').width;
const HEIGHT = Dimensions.get('screen').height;
const MainPage = () => {
return (
<View style={styles.subDomainItem}>
<ImageBackground
resizeMode="contain"
source={ImageConfig.script_default_cloud}
style={styles.bgImageStyle}
>
<Text>Sample</Text>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
subDomainItem: {
width: WIDTH,
height: HEIGHT,
alignItems: 'center',
},
bgImageStyle: {
justifyContent: 'center',
resizeMode: 'contain',
width: WIDTH,
height: HEIGHT,
}
})
Related
I want to create a View which has one rounded edge on it in react native as you can see in the image. I already have the white view as I want it to be. However, it should extend up to the black curve. What are my options and how can it be achieved?
Thank you in advance.
You can make the white view elliptical by adding a bottom border radius and scaling it up using the transform attribute.
Then if you place it partially above the second view, you will end up with the expected output.
Here is an example:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.first} />
<View style={styles.second} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: '100%',
backgroundColor: '#fff',
},
first: {
backgroundColor: '#fff',
alignSelf: 'center',
width: 100,
height: 100,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ scaleX: 4 }],
zIndex: 1,
},
second: {
backgroundColor: '#333',
marginTop: -30,
height: 200,
zIndex: 0,
},
});
Here is the example in action.
I'm attempting to create a horizontal ScrollView that snaps to an interval. I only want it to scroll one item/element at a time, no matter how much force is applied to their swipe gesture.
I've tried using the available props on ScrollView, and it does what I want nearly perfectly, other than the fact that when more force or longer swipe is applied, multiple elements get scrolled through.
I made a snack on expo here: https://snack.expo.io/BkKzYHpbE
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
export default class App extends Component {
render() {
return (
<ScrollView
style={styles.container}
horizontal= {true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}
contentInset={{
top: 0,
left: 30,
bottom: 0,
right: 30,
}}>
<View style={styles.view} />
<View style={styles.view2} />
<View style={styles.view} />
<View style={styles.view2} />
<View style={styles.view} />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {},
view: {
marginTop: 100,
backgroundColor: 'blue',
width: width - 80,
margin: 10,
height: 200,
borderRadius: 10,
},
view2: {
marginTop: 100,
backgroundColor: 'red',
width: width - 80,
margin: 10,
height: 200,
borderRadius: 10,
},
});
You can see a gentle, short swipe will scroll one element as expected. But a longer, more forceful swipe causes elements to be skipped, which is not what I'd expect.
Use 'pagingEnabled' prop of scrollView. That will solve your problem.
Also remove snapToAlignment and snapToInterval props
Trying to add elevation (shadow) to View works, however my second View, which renders circle, hides under View with elevation property. If elevation is removed, circle with position: 'absolute' is working properly.
Any ideas how to use elevation and position View absolute?
My Code:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Platform, TouchableOpacity } from 'react-native';
import { Font } from 'expo';
export default class Position extends Component {
render() {
return (
<View style={{ flex: 1, marginTop: 25 }}>
<View style={{ height: 50, backgroundColor: 'red', elevation: 3}}/>
<View style={styles.circle}><Text>HELLO</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'yellow',
width: 60,
height: 60,
top: 30,
borderRadius: 100,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
}
});
Found resolution by adding elevation to circle View as well.
Add shadow to circle as well and increase shadow level of circle by 1. So in your case add elevation 4 for circle.
I am trying to position two images at the bottom border, each side with the 50% width, so as to properly scale to any device size. But I can't seem to get any absolute positioning to behave in a reproducible way.
I've made an example Snack: https://snack.expo.io/rJd3OkVIM
The App component and the associated style is shown below:
import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Image
style={styles.img}
resizeMode="contain"
resizeMethod="resize"
source={require('./leftbg.png')}
/>
<Image
style={styles.imgr}
resizeMode="contain"
resizeMethod="resize"
source={require('./rightbg.png')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
img: {
width: '50%',
position: 'absolute',
left: 0,
},
imgr: {
width: '50%',
position: 'absolute',
right: 0,
}
});
Each device sets the image vertical centering to a random part of the screen, every time the project is opened the centering seems to change.
To achieve your requirement, let wrap 2 images to a View with flexDirection: 'row', then make the top level View with justityContent: 'flex-end'.
I made a simple code with hard code height for 200 px and put the background as goldenrod for easy recognization.
If you need to keep the ratio of image, follow this answer: Maintain aspect ratio of image with full width in React Native
import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row', height: 200, backgroundColor: 'goldenrod' }}>
<Image
style={styles.img}
source={require('./leftbg.png')}
/>
<Image
style={styles.imgr}
source={require('./rightbg.png')}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'flex-end',
},
img: {
width: '50%',
height: '100%',
resizeMode: 'cover',
},
imgr: {
width: '50%',
height: '100%',
resizeMode: 'cover',
}
});
You haven't given your images a vertical position reference ( top:x || bottom: x ), so this is probably why you are experiencing this behaviour.
Try setting bottom: 0 on img and imgr styles in order to set them to the bottom of the screen.
before , I had problem with full size of width(100%)
In react native, width : 100% is not supported..
so I use var width = Dimensions.get('window').width; //full width this code.
But in this case, I want to place buttons on what I want to place like
in this photo
I want to place the hand!! buttons on the hand of body.
like width, in react native don't support % ..
so I want to place the buttons whatever the size of phone changes
this is my all codes
const MK = require('react-native-material-kit');
import React, { Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
ScrollView
} from 'react-native';
const {
MKButton,
MKColor,
} = MK;
const ColoredButton = MKButton.button()
.withBackgroundColor(MKColor.Amber)
.build();
const Fab = MKButton.coloredFab()
.withBackgroundColor(MKColor.Teal)
.build();
class Test extends Component {
render() {
return (
<ScrollView style={styles.scrollView}>
<Image
style={styles.Bodystyle}
resizeMode='contain'
source={require('./img/body.png')}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
<View style={styles.row}>
<ColoredButton
onPress={() => {
console.warn('hi, raised button!');
}}
>
<Text pointerEvents="none"
style={styles.Buttontext}>
Hand!!
</Text>
</ColoredButton>
<Fab>
<Text style={styles.Buttontext}>
Hand!!
</Text>
</Fab>
</View>
</Image>
</ScrollView>
);
}
}
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
scrollView:{
flex:1,
},
row :{
flexDirection:'row',
},
container: {
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex:1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
Buttonstyle:{
justifyContent: 'center',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
Bodystyle:{
flexDirection:'column',
top: 0,
left: 0,
bottom: 0,
right: 0,
width: width,
height: height,
},
Buttontext:{
textAlign: 'center',
color: '#000000',
fontSize: 10,
}
});
AppRegistry.registerComponent('Test', () => Test);
I can be as simple as
const getPosition = (left, top, width, height) => ({
left: width * left,
top: height * top
})
For example
button: {
...(getPosition(0.7, 0.8, imageWidth, imageHeight))
}