I'm working on a mobile app with React-Native and I need to implement a new component.
The exemple :
So, my question is, how can i add this shadow / blur image on my component ?
I know how to make a blur on an image but how can i do this effect?
Thanks
so,basically you work with two images, opacity, blurRadius and position absolute.
try :
<View style={{elevation:12, position:'absolute', left:100, top:100, elevation:12, borderRadius:50, borderWidth: 1, borderColor:'rgba(255, 255, 2555, 0.4)', overflow: 'hidden', opacity:0.3}}>
<Image blurRadius={10} style={{width:300, height:150}} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>
<View style={{position:'absolute', left:95, top:90, borderRadius:50, borderWidth: 0, borderColor:'rgba(255, 255, 2555, 0.4)', overflow: 'hidden'}}>
<Image style={{width:300, height:150, }} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>
Related
Following is my code
<TouchableOpacity style={{backgroundColor: 'pink', height: 100, width: 100}} activeOpacity={0.5} onPress={() => console.log('On Press'}>
<Image source={} style={{height: 50, width: 50, borderRadius: 25} imageType ={'profilePhoto'}/> />
</TouchableOpacity>
TouchableOpacity's size is bigger than theImage. If I touch outside of Image then onPress is working. But If I touch over the Image then onPress is not firing.
This is happening only in iOS. Working as expected in Android. I am using RN0.63
Am I missing anything here?
It seems that you are using an unofficial Image component. Any nested Touchable or other gesture component in it will affect your click results.
Try to use the official Image component. Or read the docs of the component you are using. It may has its own onPress event.
I have an image that should always take 100% of the parent size. The width should adjust accordingly to maintain the aspect ratio of the image. The width can be smaller or larger than the parent. The height must be equal to the parent size.
<View style={{height: 220}}>
<Image source={{uri: 'myuri.jpg'}} style={{height: '100%, ...?}} />
</View>
I only find solutions where the width is fixed and the height adjusts dynamically. I want it the other way round.
import { Dimensions } from 'react-native';
You can get the application window's width and height using the following code:
<View style={{height: Dimensions.get("window").height}}>
<Image source={{uri: 'myuri.jpg'}}
style={{
height: Dimensions.get("window").height*0.5,
width: Dimensions.get("window").width
}}
/>
</View>
Using this way you can proportion the size you want.
You can also review the document here.
Dimensions
Try this
<View style={{height: 220}}>
<Image source={{uri: 'myuri.jpg'}} style={{height: '100%, width: 'auto'}} />
</View>
Also resizeMode: 'contain' can helps you a lot.
Reference that might helps you: https://reactnative.dev/docs/image#resizemode
I have a checkbox with text next to it, requiring an Image (which is an icon) attached to the last word for more information. I haven't found a reliable way to do this. The only way is either breaking up the text into different chunks and wrapping the parent or absolute positioning of the icon - both of which end up positioned differently on different devices depending on size.
When I add the image inside of the text, I get a weird background image of a file icon.
When I keep it outside, It just defaults to the end of the text block:
My code snippet:
<View style={{ flexDirection: 'row' }}>
<Checkbox style={styles.checkbox} checked={agreedChecked} />
<View style={{ flexDirection: 'row', flex: 1 }}>
<Text style={[ styles.label]}>Yes, I agree to using this payment method for automatic monthly charges.</Text>
<Image source={require('../../assets/Icon_Info.png')} />
</View>
</View>
Blown up to show weird file background:
(note it does not have the background when outside the text element)
Can you simply copy & paste this code segment and try it? It works for me. If you want, I can create a repo for you.
Github Example Repo
https://github.com/WrathChaos/react-native-text-ends-with-icon-example
import React from "react";
import {
SafeAreaView,
Image,
View,
Text,
StatusBar,
TouchableOpacity
} from "react-native";
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={{ flexDirection: "row" }}>
{/* <Checkbox style={styles.checkbox} checked={agreedChecked} /> */}
<View style={{ flexDirection: "row", flex: 1 }}>
<Text style={{ color: "#757575" }}>
Yes, I agree to using this payment method for automatic monthly
charges.{" "}
<TouchableOpacity onPress={() => {}}>
<Image
style={{ height: 15, width: 15 }}
source={require("./assets/icon.png")}
/>
</TouchableOpacity>
</Text>
</View>
</View>
</SafeAreaView>
</>
);
};
export default App;
If anyone stumbles upon this, it was a known bug and is fixed in React Native 0.61.4!
https://github.com/facebook/react-native/pull/26653
I have an image which I want to display in top half of my screen. I'm using flux like this.
<View style={{flex:0.5}}>
<Image
style={{width:null, height:null, flex:1, resizeMode:'stretch'}}
source={require('../../../Images/salad-congo.png')}>
</Image>
</View>
<View style={{flex:0.5, backgroundColor:'yellow'}}>
<Text>Hello</Text>
</View>
Problem:
The problem is my image does not fit for all screen sizes. If I'm opening my app in landscape mode the image is centered instead of covering whole width and height of upper half. In case I use 'resizeMode='stretch'' my whole image is destroyed in pixels, and becomes un viewable. How can I make my image appear big for large screens, and small for small screens obviously covering the whole screen. Is there something I need to do with my image's resolutions? Or provide multiple images? If yes then how to handle them for both android and IOS
Import Dimensions From react native and then use it to set the size of your image
import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");
in the return of render:
<Image source={logo} style={styles.logo} />
const styles = StyleSheet.create({
logo: {
height: SCREEN_WIDTH * 0.65,
width: SCREEN_WIDTH * 0.65,
marginLeft: SCREEN_WIDTH * 0.2
}})
So I solved the issue by creating a single large image of 2056x2056, and then by using Flex properly to obtain the desired result. Tested the result on a couple of phones and tablets. Working Fine.
<View style={{flex:1}}>
<View style={{flex:0.6, alignItems:'stretch'}}>
<Image style={{flex:1, width: null, height: null }}
source={require('../../../Images/salad-congo2056x2056.png')}/>
</View>
<View style={{flex:0.1, backgroundColor:'#ffffff'}}>
// Intentional gap
</View>
<View style={{flex:0.3, backgroundColor:'red'}}>
// Anything here
</View>
</View>
I'm using react-native-maps for my react-native application. I need to post image on the MapView on the map. But, I get image from web. Whereas, as I know only local images can be added to Mapview in react-native-maps. Do you know any way to post image from uri in the react-native-maps MapView?
I tried with
<MapView style={{flex: 1}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
</MapView.Marker>
</MapView>
and the result is
And then I just deleted the <Image/> with
<MapView style={{flex: 1}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
</MapView.Marker>
</MapView>
and the result is
you can try custom marker view
<MapView.Marker coordinate={marker.latlng}>
<Image source={{uri: 'http://someCustomImageURL' }} />
</MapView.Marker>
I find out the way.
Actually, I used Native-Base in my application. So, component Thumbnail is imported from Native-base.
My code is like
<MapView style={{flex: 1, justifyContent: 'space-between'}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
<View>
<Thumbnail source={{uri: this.props.user_photo}} />
</View>
</MapView.Marker>
</MapView>