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.
Related
<View style={{alignItems:'center',marginTop: 15, height:320,backgroundColor:'#fff',paddingTop:10}}>
<TouchableOpacity style={{position:'absolute',right:15,top:25,elevation:2}}>
<Icon name="share-social-outline" size={30} color="#0057ff"/>
</TouchableOpacity>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => renderPage(image, index, navigation))}
</Carousel>
</View>
</View>
I used TouchableOpacity on icon and Gave Elevation to Touchable Opacity which is on image carousel, Its Not working. Please Help
I got the answer by experimenting myself; In Order To get Touchableopacity on icon over Image Carousel, we just need to use 'zIndex=3' Not 'elevation'.
I am trying to create an animation in react native where a character do some push ups.
Going up and down is done at the moment I want.
So I separated a gif animation in 2 gifs, without repetition. One to make him going up and the other one to make him going down..
These images are locally stored
The problem is that there is a flickering when the gif change.
I tried react-fast-image, but the gif animation is too slow and the gif is looped automatically.
I tried to put a transition image in the meatime images are switching but still a flicker behaviour.
The image onLoadEnd callback seems to be called too early, before the image actually ends up to load.
here how I switch the images
if (up.includes(this.props.timer))
this.setState({ currentGif: upGif, cacheImage: downPng })
if (down.includes(this.props.timer))
this.setState({ currentGif: downGif, cacheImage: upPng })
Here is the render:
render() {
return (
<View
style={{ position: 'absolute', bottom: 70 }}
>
<Image
source={this.state.cacheImage}
style={{ width: 400, height: 330, position: 'relative', bottom: 70 }}
fadeDuration={0}
/>
<Image
source={this.state.currentGif}
style={{ width: 400, height: 330, position: 'absolute', bottom: 70 }}
fadeDuration={0}
onLoadEnd={() => {this.setState({cacheImage: null})}} // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
/>
</View>
)
}
You can use the Image.getSize API.
To get the size, RN downloads and caches the image. It's stated in the docs that this method can be used for preloading images. They also mention that a more explicit API will be provided in the future, so you can use this for now and switch to a better API when it's available.
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>
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 trying to create custom buttons with assets that I've been sent by the designer. I want to use touchable highlight to create the buttons with the images in them.
<TouchableHighlight style={styles.touch}
onPress={() =>
Alert.alert('You tapped Sign In!')
}>
<Image
style={styles.button}
source={require('./signin/SignInButton.png')}
/>
</TouchableHighlight>
touch: {
backgroundColor: 'pink',
},
button: {
padding: 10,
width: Dimensions.get('window').width*0.7,
resizeMode: 'contain',
// height: Dimensions.get('window').height/3,
},
That's the code, the problem is the touchable area is too big, I want it to be just the button area. But I also want the button to be sized dynamically with the screen, for different screen sizes. So is there a way to fix the size of the Touchable based on the image size?