RefreshComposite
This widget allows you to implement a “pull-to-refresh” function and a “loading” indicator to visualize a long-running task. There is an option to disable the refresh component, so RefreshComposite will work just like its parent widget Composite. It is useful in situations where you need to temporarily prevent a user from updating the page. The class property refreshEnabled can be used for disabling the refresh function and set to true initially.
Also, take a look at refreshIndicator property. It determines if the loader animation is displayed. This property should be set to false manually once all the tasks on the page are finished and you want to hide reloading animation.
Here is a simple example of using RefeshComposite. Run it using QR code scanner inside your Tabris.js Developer App.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { RefreshComposite, TextView, contentView } from 'tabris'; contentView.append( <RefreshComposite stretch refreshEnabled onRefresh={handleRefresh} refreshMessage='Reloading...'> <TextView stretchX top={32} alignment='centerX' font='black 24px'> Pull to refresh </TextView> <TextView id='log' stretchX top='prev() 32' alignment='centerX' lineSpacing={1.4} /> </RefreshComposite> ); const refreshComposite = $(RefreshComposite).only(); const log = $(TextView).only('#log'); function handleRefresh() { setTimeout(() => { refreshComposite.refreshIndicator = false; log.text = `last refresh: ${new Date()}\n${log.text}`; }, 1000); } |
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
