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.
Related
Hey so I'm very inexperienced with coding and react-native in general, but I'm trying to create a modal which pops up with a little info box for the user and blurs out the background page. I was able to get a modal working and tweaked it for my specifications until it works great! I imported the library 'expo-blur' and found an example online of it being used, but I can't figure out how I would implement the blur into my Modal. Please any help with this would be extremely appreciated! I've attached images of my Modal code and the expo-blur example I found, below.
Modal
BlurView example
I had the same problem and I have just found this example. Now it works.
https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152
In the example he is using class components, I'm using function components. The problem was I wasn't using transparent={true} for the modal
This is my code to make it work:
<Modal visible={filterScreen} animationType="slide" transparent={true}>
<View style={{ marginTop: 100, flex: 1 }}>
<BlurView
intensity={100}
style={[styles.nonBlurredContent, { height: "100%" }]}
>
<Text>Hello! I am bluring contents underneath</Text>
<Text>Hello from the modal</Text>
<TouchableOpacity
style={{ backgroundColor: "red", width: 30, height: 30 }}
onPress={() => setFilterScreen(!filterScreen)}
>
<Text>X</Text>
</TouchableOpacity>
</BlurView>
</View>
</Modal>
I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.
MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?
parent screen:
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<LeaderBoard />
<CurrentVideos />
</View>
</SafeAreaView>
);
}
video screen:
return (
<ScrollView style={{ flex: 1}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink'
}}
>
<YouTube
videoId={'BunklIatIK4'}
play={true}
apiKey={config.API_KEY}
controls={1}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</View>
</ScrollView>
);
Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
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.
In my React Native project folder I have the src files which hold the components, and also some images I want to use across both iOS and Android. If I use this:
<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />
then the image loads perfectly. However, the source in the image tag is going to be created dynamically when the user takes a photo. This code:
<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />
does not work. No errors thrown, but no image displayed. I'm sure I'm on the right track as it will return images taken by the camera and stored on the device using the same code when I replace the source with a prop (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) but for the static image it's not happening. Suggestions?
For the static images you need to specify like below source
source={require('static_image_path_relative_current_directory')
Only for remote and local files(not static) we need to specify uri in source like below
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}