I am new in react native , I want to scroll the image continuously bottom to top in react native.
We can scroll image in html using marquee tag.
E.g.,
<marquee behavior="scroll" direction="up">
<img src="../t1.png"/>
</marquee>
Similar thing I want to achieve in react native.
currently I am using the below code
<Animatable.Image
animation={{
from: { translateY: 0 },
to: { translateY: -70 },
}}
duration={10000}
delay={1}
easing={t => Math.pow(t, 1.7)}
iterationCount={100}
useNativeDriver
source={require('./../assets/images/gradient_bg.png')}
style={LoginStyles.scrollerImage}>
</Animatable.Image>
this code works but it resets the the posion of image to 0 and starts again can someone help me fix this
Thanks.
Set the iteration count to infinite
iterationCount="infinite"
If you read their documentation , there's an option to make the iteration in an infinite loop.
I think you should try this package
react-native-marquee-scroll
It works for me.
Related
I am using react-slick for carousel. React-slick using centerMode true for every carousel even I don't use this attribute. How can I turn off this attribute. centerMode= false is not working this is setting for react-slick This is Slider component
I try this: centerMode = false but it didn't work
From the API reference: centerMode: false by default, which means the same result if write centerMode: false. It'd be great to debug if you provided any snippets. However, here is the working example: CodeSanbox.
Besides, please have a look at the link below to see the issue & solution visually: TestWise Replay | StackOverFlow QA - React-slick centerMode
How to handle left and right swipes in react js.
There is a div block in which I want to catch swipes.
I also wanted to determine how long the swipe was in pixels.
Thanks!
You can do this using hammerjs.
Here is an implementation :
var hammertime = Hammer(el);
hammertime.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
I have a simple webapp built with the React build of Ionic4. Two of the 'sections' in the app are comprised of full screen IonSlides, with pagination (pager={true}).
In all browsers, except iPad Air Safari, the pagination is populating correctly and the pagination bullets appear. However, in iPad Safari, there is an empty pagination node (no bullet elements have been populated).
I expect it is a race condition but I can't pinpoint where or what is causing this to occur. When I debug and trace the properties of the slides component (which is an instance of Swiper JS) I see that swiper.params.pagination.el is undefined.
Can anyone help me figure out why it's undefined and/or how to correct?
I have tried dynamically adding the slides after componentDidMount. I have tried calling swiper.update() in componentDidMount as well as when the component enters view. I have tried calling swiper.pagination.update() and other resetting/re-updating methods within swiper.
Here's my stripped down/relevant code.
In the view class, declare the slider ref -->
private slider = createRef<any>();
In the component render() -->
<IonSlides ref={this.slider} pager={true}>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
</IonSlides>
In ionViewDidEnter, some of what I've tried (commented out just for reference) -->
ionViewDidEnter() {
this.slider.current.getSwiper().then((swiper:any) => {
// swiper.init();
// swiper.pagination.type='bullets';
// swiper.pagination.el='.swiper-pagination';
// swiper.pagination.init();
// swiper.pagination.render();
// swiper.pagination.update();
swiper.update();
swiper.slideTo(0,0);
}).catch((err:any) => {});
}
I get no error messages. The pagination is just an empty node. Only in iPad Safari. In all other browsers the pagination element contains the appropriate pagination-bullet nodes.
Ok, well I kept at it and I have a solution that works... not sure it's actually solving the underlying problem because I still can't figure out what the underlying problem is... But, posting a solution here in case it's useful to others someday...
I ended up giving a value to params.pagination.el and then init, render, and updating the pagination via the swiper instance to reinstantiate it.
Code used:
this.slider.current.getSwiper().then((swiper:any) => {
swiper.params.pagination.el = '.swiper-pagination';
swiper.pagination.init();
swiper.pagination.render();
swiper.pagination.update();
swiper.update();
}).catch((err:any) => {});
I use kirjs/react-highcharts plugin for react but I have no idea how to get Highchart component in order to call reflow like: $('#container1').highcharts().reflow()
From docs its tells:
For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().
but I don't see there any reflow() method.
Any ideas?
Edit
its located under ReactHighcharts.Highcharts.charts so I can call
ReactHighcharts.Highcharts.charts[0].reflow()
but it has list of all highchart instances so I have no information what index is mine
I am using highcharts-react-official and highcharts. They are available via npm . Although I am using different packages, the working principle should be the same.
The way of using reflow() function in react-highchart is also Highcharts.charts[i].reflow(). I have prepared 2 code sandboxes for the demonstration. The first code sandbox shows the way of re-flowing every chart, and the second code sandbox shows the way of re-flowing a particular chart.
The first code sandbox link is here.
There is a button on App.js to hide and show highchart divs.
The child component is React.memo (for performance optimization), therefore the hidden highchart will not be auto resized after it becomes visible.
To let every chart window resize with respect to the window size. The following code is placed in App.js. It looks for all existing charts and re-flow them:
for (var i = 0; i < Highcharts.charts.length; i++) {
if (Highcharts.charts[i] !== undefined) {
Highcharts.charts[i].reflow();
}
}
The second code sandbox link is here.
Almost the same as the first code sandbox, but there is a ref array of referencing every chart.
The chart which needs re-flowing is placed with an id in its chart option.
Iterate every chart and get the index of the chart with that id e.g. "secondChart" for this example.
for (var i = 0; i < chartRef.current.length; i++) {
if (
chartRef.current[i].chart.userOptions.id !== undefined &&
chartRef.current[i].chart.userOptions.id === "secondChart"
)
Highcharts.charts[chartRef.current[i].chart.index].reflow();
}
Re-flow that chart.
The Reflow can be set with event load in options.
Workaround: You have to set reflow() using setTimeout() this will trigger the resizing. Time is set to 0 to avoid delay.
Solution
const options = {
chart: {
type: 'column',
style: {},
events: {
load() {
setTimeout(this.reflow.bind(this), 0);
},
},
},
title: 'Column Chart',
}
Usage
<HighchartsReact highcharts={Highcharts} options={options} />
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.