The code
import { Image } from 'react-native';
<Image style={StyleSheet.flatten([styles.introPicSize, styles.introPicBorder])} source={require("../../assets/images/intro-pic.png")} />
const styles = StyleSheet.create({
introPicSize: {
height: responsiveWidth(160),
width: responsiveWidth(160),
resizeMode:'contain'
},
introPicBorder: {
borderWidth:8,
borderRadius:100,
borderColor:"#BDB9CD",
overflow:'hidden'
}
}
What expected is to have image with border radius 100 (circle) (On Android & IOS)
The result is fine for IOS
but for Android , it's a square not circle (it reads the borderRadius as 0 not 100
check the below image
The image
borderRadius does not work with <Image /> in Android. You can see it here: https://github.com/facebook/react-native/issues/8885
The solution is to wrap it with the View and apply borderRadius for it.
<View style = {{flex: 1, borderRadius: 100}} >
<Image style={ {width: 300, height: 100 } } source={{ uri: 'https://placekitten.com/300/100' }}> </Image>
</View>
Related
Is it possible to make StatusBar semi-transparent with an opacity of 0.8?
if I pass backgroundColor={"transparent"} like in the docs it becomes fully transparent without color. Docs https://reactnative.dev/docs/statusbar
<StatusBar style="light" backgroundColor={"red"} translucent />
You can give backgroundColor as #FF000080, and you can change color transparency by changing the last 2 digits of #FF000080
<StatusBar style="light" backgroundColor={"#FF000080"} translucent />
This is how i did it. Under StatusBar added a View with height: insets.top and style for StatusBar. This works for both OS platforms.
return (
<View>
<StatusBar style="light" translucent />
<View style={[styles.statusBar, { height: insets.top }]}></View>
<View
style={[
styles.contentContainer,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]} >
</View>
</View>
);
}
const styles = StyleSheet.create({
statusBar: {
opacity: 0.8,
backgroundColor: "red",
},
});
I have a ImageBackground over the whole screen, and I am trying to move the image, which is way bigger, to the left. When I try to position the image using left: -100 this happens (picture below). The ImageBackground is moved, but moves as a whole. What I need is to move only the underlying picture, not the View integrated in the ImageBackground. How can this be achieved?
Styling:
bgImageContainer: {
flex: 1
},
bgImage: {
left: -100
}
Code:
const screenSize = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - StatusBar.currentHeight
};
return (
<ImageBackground
source={bgImage}
resizeMode="cover"
style={{ ...screenSize, ...styles.bgImageContainer }}
imageStyle={styles.bgImage}
>
{/* content */}
</ImageBackground>
);
Try this work-around
<View style={{ ...screenSize, ...styles.bgImageContainer }}>
<Image source={bgImage} style={styles.bgImage} resizeMode="cover"/>
{/* content */}
</View>
Styling:
bgImageContainer: {
flex: 1
},
bgImage: {
position:'absolute',
width:SCREEN_WIDTH-100,
height: SCREEN_HEIGHT,
alignSelf:'flex-end' // if this not work make width full and add margin
}
wrap it with SafeAreaView component
import { SafeAreaView } from "react-native";
<SafeAreaView>
<ImageBackground
source={bgImage}
resizeMode="cover"
style={{ flex:1 }}
imageStyle={styles.bgImage}
>
{/* content */}
</ImageBackground>
</SafeAreaView>
I have a map screen with markers, I try to add image to the callout and I use same method of <image source = .. /> as I did in other place that works, but on the map it wont show me the picture.
{
this.state.markers.map(marker => (
<MapView.Marker
key={marker.id}
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}>
<MapView.Callout>
<View>
<View>
{marker.imageUri && <Image source = {{uri: marker.imageUri}}
style = {{ width: '90%', height: 100, justifyContent: 'center', flex: 1, alignContent: 'center', resizeMode: 'stretch'}}
/> }
</View>
<Text>Lat: {marker.latitude}, Lon: {marker.longitude}</Text>
<Text>{marker.email}</Text>
</View>
</MapView.Callout>
</MapView.Marker>
))
}
it gives me a blank view instead of the image.
Have I done any mistake?
Use Image inside Text component,It is strange but it works :)
<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>
https://docs.expo.io/versions/latest/sdk/webview/
import { WebView } from 'react-native-webview';
If const isAndroid = Platform.OS === 'android'; is true render a WebView... if not render a Image.
I fixed it by using a webView for android: const Img = isAndroid ? WebView: Image; return <Img source={{uri: someUri}} />
In my React Native app, I have a red box of height 300 that I want to center vertically, and an image that I want to sit inside and at the top of this red box. Here is my code so far:
import React, { Component } from 'react';
import { View, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View
style={{
borderWidth: 3,
borderColor: 'red',
width: "100%",
height: 300
}}
>
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
height: "100%",
resizeMode: "contain",
borderWidth: 3
}}
>
</Image>
</View>
</View>
);
}
}
Here's what this looks like:
The red box is the outer box I mentioned, and the black box is just the border of the Image. The problem is that this black box (ie the Image) expands to fill the red box vertically, and the image is vertically centered inside this black box, so it's vertically centered inside the red box, as opposed to at the flex-start position that I want it at. I've tried adding justifyContent: flex-start and flexShrink: 1 to the Image and neither has made a difference.
Does anyone know how I can approach this?
NOTE:
If I remove the height: 100% on the Image, I get this:
UPDATE:
To clarify, this is what I'd like it to look like. I've removed the black border here. I moved it up to where I want it by adding top: -95, but this won't work in general because the value would be different for different devices:
try doing like this
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
borderWidth: 3
}}
resizeMode={"contain"}
/>
There is a difference between Image (the view) and the content of that image. On your screenshot, the image view has the black border and its content is sitting inside of it. Because they have different aspect ratios, there is going to be either a blank space or cut-off on the content. You can't adjust position of the content as it's not laid out on flex basis. Image view is just a window that then renders image content. There is no property to tell Image where to align that content
Your problem comes from the fact that screen width differs, and aspect ratio of your container also differs (variable width but constant 300 height). What you need to do is
measure container width
determine proper aspect ratio for the image based on image resource width and height
set your image width to 100% and its height according to received aspect ratio
here, my image dimensions are 1005 * 219:
const Test = () => {
const [width, setWidth] = useState(0);
return (
<View>
<View
onLayout={e => setWidth(e.nativeEvent.layout.width)}
style={{ width: '100%', height: 300, borderWidth: 1 }}>
<Image
style={{
width: '100%',
height: (width / 1005) * 219,
borderWidth: 1,
borderColor: 'red',
}}
source={require('...')}
/>
</View>
</View>
);
};
I am interesting in how to make full screen image landscape orientation, but without height: 100%, so width will be 100% but what is with height, because in react native height: not work=
try like this
<View style={{ flexDirection: 'row',}}>
<Image
style={{
flex: 1,
width: null,
height: '100%',
overflow: 'hidden',
}}
resizeMode='contain'
source={{ uri: 'image path' }}
/>
First of all, install the package named #react-native-community/hooks ( npm i #react-native-community/hooks )
then import useDimentions and useDeviceOrientation from the package above.
Example: import {useDimentions,useDeviceOrientation } from "#react-native-community/hooks"
Destructure them like:
const { landscape, portrait } = useDeviceOrientation();
const { screen, window } = useDimensions();
landscape, portrait are booleans
screen, window are the objects with height, width and etc. ( just check it by console.log)
Then use screen.height or window.height to get the device's height