I am unable to upgrade to a newer version of Swiper, so unfortunately I have to stick to the version that I am on.
The issue I'm having is that when I try and link thumbs I get an error, I have seen in this post that a workaround for this is to check for the destroyed key. However, this key isn't even available from what I can see on this version.
Does anyone know of how I can link thumbs without an error?
<Swiper
onSwiper={setMainSwiper}
slidesPerView={1}
navigation
loop
centeredSlides
loopAdditionalSlides={swiperSlide.length}
loopedSlides={swiperSlide.length}
thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }} > // ERRORS Here when adding thumbs
...
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
loop
centeredSlides
slidesPerView={swiperSlide.length}
watchSlidesProgress
loopedSlides={swiperSlide.length}
...
</Swiper>
Related
I've seen some threads on how to remove the leaflet attribution in the bottom right.
It seems like the creators of leaflet have no issue with it, so to save space I'd like to remove mine.
Here is a thread on it, but no answers relate to Vue unfortunately.
https://gis.stackexchange.com/questions/192088/how-to-remove-attribution-in-leaflet
I'm using nuxt but would greatly appreciate help if it's directed toward Vue.
The l-tile-layer has an attribute-prop which indeed helps me add attributions, but removing it made me realize the attribution seem to be connected to the l-map component as it's visible with no tile layer.
TLDR: I want to remove the "Leaflet"
Suggestions?
With the Leaflet API, it is removed by this config.
https://leafletjs.com/reference-1.7.1.html#map-attributioncontrol
L.map('map', {
attributionControl: false
}
With vue2-leaflet it seems it is possible to do the same with the options prop
https://vue2-leaflet.netlify.app/components/LMap.html#props
<l-map
:options="{attributionControl: false}"
>
...
</l-map>
As Kunukn pointed out (and which answer also kindly was provided by mikeu here: Link to github
The solution for Vue is to add the attributionControl:false option.
However, my requirement was to keep my other attributions, but fortunately after experimenting a tiny bit I just had to add the l-control-attribution component with an empty prefix.
In HTML
<l-map :zoom="8" :center="[59.3293, 18.0686]" :options="{ attributionControl: false }">
<l-tile-layer url="http://localhost:8080/styles/mytheme/{z}/{x}/{y}.webp" :attribution=attribution>
</l-tile-layer>
<l-control-attribution position="bottomright" prefix=""></l-control-attribution>
</l-map>
In scripts
data(){
return{
attribution:
'©OpenMapTiles ©OpenStreetMap contributors'
}
}
I have a requirement in my project to show timer when the video is playing. I know there are libraries available for this in React Native, but my requirement is to show the Timer below the video player. As the video progresses the time should decrease till the video gets finish. Please help me.
Thanks in advance :)
Finally, I solved it by myself.
I just used the following approach:
<Video
resizeMode={'contain'}
style={{ height: 312 }}
url={url}
placeholder={"https://baconmockup.com/300/200/"}
onProgress={e => this.progress(e)}
ref={(ref) => { this.video = ref }}
/>
progress(e) {
console.warn('Time' + parseInt(e.currentTime))
}
I am using react-native-af-video-player and onProgress solved my purpose which is provided by react-native-video.
I am trying to find a way to load image reference I get from places api into places photo API using Image component of react-native like below,
const imageLink = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CmRaAAAAuZ36wzrMYCVNWM1smQkRKuQyXecPgRpcsMfrSqbJM0EUTXZ62j8Ljxtk8HsxohXbtAwZAwmj_F3HmDwLoQaH9qt2TZJhhA6EuXK41UFo0Ow750MJujtrr5hgHR2lF7EXEhCkWj_dZ4LefrYzLU1_5RF1GhTR7Ggem5IJ-v7V2U8fjKoU9tBUOg&key=--MyKey--'
return (
<View >
<TouchableHighlight >
<View>
<Image
style={{width:64, height:64,flex:1,backgroundColor:'red'}}
source={{uri: imageLink}}
/>
</View>
</TouchableHighlight>
</View>
);
I am getting only empty placeholder with above code. However, I am able to load this link in browser.One caveat is that google places photo's link is redirecting to some other url which then displays image in browser. Am I doing it right? or is there any other way I can accomplish the same. Note: I tried react-native-network-image library as well.
You can have a look at the ImagePrefetch function in googleplace module:
https://github.com/srirangan/googleplaces.js/blob/master/test/ImageFetchTest.js
However, I am having issue with the whole module at the moment because of the line var https = require("https"); called in this specific function.
Not sure if it's an issue with new version of RN (upgraded to 0.55 recently) or just some other error in my new setup.
This worked perfectly in previous RN (was running on 0.48)
I have implemented the RefreshControl component which works great, except that when my view initially loads, I see part of another Refresh control showing above the NEW GAME button. Once I pull down, I get my data and the bug disappears until I restart the app. Everything else works great but it seems like the 'title', 'tintColor' and 'titleColor' props are causing the problem, because there is no bug without them.
Here is my code:
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
title={I18n.t('coming')}
tintColor="#dceafd"
titleColor="#dceafd"
/>
Just add backgroundColor: 'transparent', i think :)
I want to get html in web view.
I read react-native-doc(https://facebook.github.io/react-native/docs/webview.html#content) but I cannot found it.
Can I do this?
None of the answers above worked for me, but this did. It displays the received html content of the webview in the console:
const jsCode = 'window.ReactNativeWebView.postMessage(document.documentElement.innerHTML)'
return (
<WebView
injectedJavaScript={jsCode}
source={{ uri: 'https://www.whatever.com' }}
onMessage={event => console.log('Received: ', event.nativeEvent.data)}
javaScriptEnabled
/>
)
I found this.
https://github.com/alinz/react-native-webview-bridge
But I could not use this in android. This works only in android.
I don't know this problem is only my problem or library problem.
In Android I use onNavigationStateChange.
Read https://github.com/facebook/react-native/issues/586#issuecomment-90826117
I think this is not good way. But I really need this. so I used this.
In case anyone comes across this in the future. You options here is to use javascript. You can use injectedJavaScript on the webview to inject a window.postmessge($('body').html()) and then handle the reply in the onMessage function on the webview. The cleaner way would be to fetch the page yourself and then load it into the webview.