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>
Related
using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.
this component only has one parent div with no properties.
<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />
do you know what could be the reason ? Let me know if i need to provide more info.
thankyou in advance
Setting height of your element via style attribute should override tailwind default.
<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
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>
<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'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 this sample code that works as I want:
<ScrollView orientation="horizontal">
<GridLayout columns="*,*,*,*,*,*" >
<Label class="gridlabel" col="0" text="Monday" />
<Label class="gridlabel" col="1" text="Tuesday" />
<Label class="gridlabel" col="2" text="Wednesday" />
<Label class="gridlabel" col="3" text="Thursday" />
<Label class="gridlabel" col="4" text="Friday" />
<Label class="gridlabel" col="5" text="Saturday" />
</GridLayout>
</ScrollView>
That is, the labels within the GridLayout scroll horizontally.
I have a component that generates a GridLayout, and now I need to wrap that in a horizontal ScrollView.
That is, I for each label:
let label = new Label();
// Add tap event handler for each tab
label.on("tap", function () {
onTabTap(label, "tabTap");
}.bind(label));
label.id = key;
label.text = key;
label.class = "gridtab";
this.addColumn(new ItemSpec(1, GridUnitType.STAR));
GridLayout.setColumn(label, i);
GridLayout.setRow(label, 0);
this.addChild(label);
But when I try to add the ScrollView, I get errors. If I try to add the labels to the ScrollView, such as scrollView.addChild(label) (where scrollView is an instance of ScrollView), I get "scrollView.addChild is not a function". (See this similar SO post). If, as suggested in the mentioned post, I use scrollView.content = this; then I get the error, Error: View already has a parent.
So, the question is, from code, how do I replicate the hierarchy from my sample xml? That is, how can I wrap the generated GridLayout in a horizontal ScrollView?
Edit 7/17/2020
Upon reflection, I don't think this can work given my component's current design. That is, it subclasses GridLayout, and I want the generated GridLayout to be wrapped by a ScrollView, but that would be external to the content generated by the component, yes? It almost seems I'd need to subclasss ScrollView, and then generate the GridLayout within.
So, I was ultimately able to resolve this by subclassing StackLayout, then within the StackLayout adding a ScrollView, and within the ScrollView adding the GridLayout. The "magic" is:
scroll.content = grid;
this.addChild(scroll);
Where scroll is the ScrollView instance, and grid is the GridLayout instance.
Then, after spending a day on this I found I didn't actually need horizontal scrolling after all, but at least I know what to do should the need arise.