<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'.
Related
I tried with customCallout from react-native-maps library but it is not working on iOS simulator.
in my issue what I was implementing the react-native-map library and i want to display the image in my custom-callout view (custom callout is annotation view in map library which show popup after clicking the marker) but if i put the image tag in that view image is not displaying.
<Callout alphaHitTest tooltip>
<CustomCallout>
<View style={{ flexDirection: "row" }}>
<Icon name="map-marker" size={30} />
<Text style={{ width: "50%" }}>
{this.state.currentAddress} //coordinates
</Text>
<Text>
<Image
source={require("./../assets/images/profile.png")}
/>
</Text>
</View>
</CustomCallout>
</Callout>
For example I want the body element not to scroll
But one of its containing elements should be scrollable
I have used ScrollView and View element from react native but I don't get any scroll within my scroll view. I have switched off scroll on the body to isolate the scroll view to no effect.
You have to give flex:1 to the parent component of Scroll View .
For Ex:
<View style={{flex:1}}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View>
{whatever you want to scroll}
</View>
</ScrollView>
</View>
I've managed to load an image from the web into my app but have an issue...
I have some local data about food. each food item has a food title, and a url to a picture online.
This is the Image component that lives inside my foodComponent.
<Image style={styles.cardImg} source={{uri:image}} />
image is a string to a url that is passed as a prop to this foodComponent.
Again it works but my problem is that the image takes time to load.
How could I only render the foodItem component once it has received/loaded an image?
I know about promises but I don't see how I could use it in this scenario.
here is my entire foodItem component:
export default function FoodItemTouchable(props){
return(
<View style={styles.container}>
<View style={styles.card}>
<View style={styles.cardHeader}>
<Text style={styles.text}>{props.item.title}</Text>
</View>
<Break/>
<CardImage image={props.item.url}/>
</View>
</View>
)
}
function Break() {
return(
<View style={{alignItems:'center'}}>
<View style={styles.break}>
</View>
</View>
)
}
function CardImage({image}){
return(
<View style={{padding:10,width:'100%'}}>
<Image
style={styles.cardImg}
source={{uri:image}}
/>
</View>
)
}
CardImage is where the image gets rendered.
the rest of the Components render first but the CardImage is delayed because it's loading the image.
If I could somehow load the image into a variable in the main Component,
and then there do a check, is image===null ? return null
so that the component renders only when the image is ready.
Have you tried like this?
{
props.item.url
&&
<CardImage image={props.item.url}/>
}
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>