I'm playing with react native and starting to build my first app.
I render 3 images to the screen.
One is displayed while the other 2 are not.
The urls are 100% valid and opened properly when pasting the address in browser.
The Image component is created in a a loop so all of them are identical besides the uri.
What can be the problem?
<View style={[styles.flex1, styles.imageRow, {backgroundColor: 'orange'}]}>
{images.map((d, i) => (
<View key={i} style={[styles.flex1, {borderWidth: 2, borderColor: 'black'}]}>
<TouchableOpacity onPress={() => navigate('Image', {uri: d, coachName})}>
<Image source={{uri: d}} style={{height: 100, width: 100}}></Image>
</TouchableOpacity>
</View>))}
</View>
working image url:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/borochov1.jpg?alt=media&token=13f09af6-e8a9-42bc-bf8f-dee58891cca7
not working:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran1.jpg?alt=media&token=28738b27-dcdb-4c55-8af0-93413b6c6ea6
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran2.jpg?alt=media&token=301f176f-5f94-422b-a80e-ec059d091059
reducing the images size solved the issue.
Related
I'm currently creating an app using react-native for a capstone project, but have run into a small issue when I try using the snap carousel. It seems that all text does not appear under the carousel for some reason.
const YourApp = () => {
return (
<ScrollView>
<View style={styles.container}>
<View style={{width: '100%', height: 200, backgroundColor: '#c89686',}}>
<Text style={styles.txt}>SPARTAN</Text>
<Text style={styles.txt1}>FITNESS</Text>
</View>
<Text style={styles.txt2}>New Arrivals</Text>
<CarouselCards></CarouselCards>
***<Text style={{}}>Swipe to View</Text>***
</View>
</ScrollView>
);
}
I tried styling, adding margin-top to see if it was for some reason inside of the carousel, but nothing related to styling worked, it instead just added whitespace on the app. Tried adding another container for the text but it did the same thing as the styling, and didn't display.
Using react native expo.
Once performing action in one of the pages, if the action is success, it will forward to another page that will only contain a view with an image, the image inside the url can change all the time(by another user regardless to the app).
I had an issue that when image is being changed, the previous image is still in the cache so it is loading the previous image.
the solution is to add "?xxx" at the end of the url and it will refresh to the current image all the time.
The problem now, is that it takes around 2-3 seconds for the image to load, and i cant have that.
Is there a way to load the image from the url in a faster way?
Here is the code that shows the image in the final page:
return (
<SafeAreaView style={[{ flex: 1 }]}>
<View style={[{ height: "8%", backgroundColor: "#EE7629" }]}>
<TouchableOpacity style={styles.backStyle} onPress={navToTakeCart}>
<Text style={styles.backText}>Go Back</Text>
</TouchableOpacity>
</View>
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image
source={{
uri:
"https://click2lock.azurewebsites.net/Images/AdvertiseImg/Image" +
compId +
".jpeg?1",
}}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>
</SafeAreaView>
);
Thank you
Same issue for me, I'm looking for a solution of this network related issue with expo, while searching I saw some post advicing to use FastImage, Also saw that there is an implementation for Expo, but had no sucess implementing it on my app.
I'm trying to make a touch system like Instagram in react-native. How can I determine if the user has touched on the right or left side of the screen? Is it possible to use swipe without extraneous libraries?
You can get the touch coordinates like this:
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
So you can define on a function it's limits.
Or, you can do it the "Bad way", That would be using 2 transparent touchable views (touchable-opacity, pressable, touchablehighlight) side by side, each one taking half of the screen.
like this (I didn't tested it):
<View style={{flexDirection: 'row', position: 'absolute', flex: 1}}>
<touchableOpacity style={{flex: 1}} onPress={() => console.log('left side clicked')}>
</touchableOpacity>
<touchableOpacity style={{flex: 1}} onPress={() => console.log('right side clicked')}>
</touchableOpacity>
</View>
I have spent hours trying to fix this issue, but can't seem to get around it. I am using react-native-cube-navigation library to incorporate cube navigation into my app. Inside the cube navigation, I have videos that are pulled from a database that play when inserted. I have created a working pause function, but when the videos are places inside of CubeNavigation, the pause function stops working, as well as all buttons on screen. CubeNavigation uses a Animated.ScrollView, so I need to figure out how to allow touchable to work inside of this.
This is the code from the home Screen.
CubeNavigation>
{posts.map(
({url, owner, description, encores, comments, shares}) => (
<View style={[styles.container, { backgroundColor: "#ddd" }]}>
<Videos url={url} owner={owner} description={description} encores={encores} comments={comments} shares={shares}/>
</View>
)
)}
</CubeNavigation>
This is the code from Videos.js
<TouchableWithoutFeedback onPress={() => setPlaying(!playing)} >
<View style={{flex:1}}>
<Video
paused={playing}
style={[styles.backgroundVideo, {width: w, height: h}]}
source={{uri: url}}
repeat
ref={videoRef}
resizeMode="cover"
retainOnceInViewPort={false}
/>
</View>
</TouchableWithoutFeedback>
I have this in my React Native code, I am trying to parse through some API data.
{this.state.articles.map(article => (
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
and every time I run it I get a error that says:
Adjacent JSX elements must be wrapped in an enclosing tag
I have no idea what to do, can anyone help me out? Thanks!
The result of the .map call can only return one element at a time. Because the JSX-compiler sees two adjacent elements (Image and Text), it throws the mentioned error.
The solution would be to wrap the two components in a view
{this.state.articles.map(article => (
<View style={{ some extra style might be needed here}}>
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
</View>
)}