{"id":4168,"url":"https://github.com/IskenHuang/react-native-scrollview-lazyload","last_synced_at":"2025-08-04T00:32:26.406Z","repository":{"id":35764278,"uuid":"40043760","full_name":"IskenHuang/react-native-scrollview-lazyload","owner":"IskenHuang","description":"React Native scrollview/listview component with image lazyload feature","archived":false,"fork":false,"pushed_at":"2016-04-26T16:22:50.000Z","size":10,"stargazers_count":77,"open_issues_count":3,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T02:34:38.127Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IskenHuang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-01T10:50:13.000Z","updated_at":"2024-04-22T07:42:04.000Z","dependencies_parsed_at":"2022-07-08T01:25:45.581Z","dependency_job_id":null,"html_url":"https://github.com/IskenHuang/react-native-scrollview-lazyload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IskenHuang%2Freact-native-scrollview-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IskenHuang%2Freact-native-scrollview-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IskenHuang%2Freact-native-scrollview-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IskenHuang%2Freact-native-scrollview-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IskenHuang","download_url":"https://codeload.github.com/IskenHuang/react-native-scrollview-lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:03.212Z","updated_at":"2024-12-07T07:31:29.620Z","avatar_url":"https://github.com/IskenHuang.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# React Native scrollview lazyload\nScrollView with image/components lazyload feature. Support all ScrollView feature. Detect ScrollView by 'renderRow' and 'dataSource' props(ListView should be add this props).\n\n\n# Component Params\n| param | type | description |\n| --- | --- | --- |\n| autoTriggerIsInScreen | boolean | default: false. Is auto trigger isInScreen to elements |\n| autoTriggerIsInScreenTime | number | default: 1500. unit: ms |\n| lazyExtra | number | default: 1000，Setup lasy load area. (doesn't include screen height) |\n\n# LazyloadView children components params\n| children props | type | description |\n| --- | --- | --- |\n| lazyloadSrc | string, object | default: none. Image component should be `\u003cImage lazyloadSrc={'URL'}\u003e` or `\u003cImage lazyloadSrc={{uri:'URL'}}\u003e`|\n| lazyRender | boolean | default: false. Using lazy reader feature. When components in screen will trigger `setState({ isRendered: true })` for component. Only trigger once. |\n| lazyInScreen | boolean | default: false. When components in screen will trigger `setState({ isInScreen: true })`，Only trigger once. |\n\n# how to use\n`npm install react-native-scrollview-lazyload --save`\n\n* Lazy load image: `\u003cImage lazyloadSrc={'LOAD_SOURCE'} /\u003e`\n* Lazy load image: `\u003cImage lazyloadSrc={{src:'LOAD_SOURCE'}} /\u003e`\n* Lazy load components: `\u003cView lazyRender={true} /\u003e`\n* Trigger components in screen: `\u003cView lazyInScreen={true} /\u003e`\n* Lazy load area(default is 1000): `\u003cLazyloadView lazyExtra={1000}\u003e\u003c/LazyloadView\u003e`\n\n```javascript\nvar React = require('react-native');\nvar {\n    AppRegistry,\n    Text,\n    View,\n    Image,\n    ListView,\n} = React;\n\nvar LazyComponent = React.createClass({\n    getDefaultProps: function() {\n        return {\n            lazyRender: false\n        };\n    },\n    getInitialState: function() {\n        return {\n            isRendered: !this.props.lazyRender,\n        };\n    },\n    shouldComponentUpdate: function() {\n        // forceRender is dont used lazy render\n        if(this.state.isRendered \u0026\u0026 !this.props.forceRender) {\n            return false;\n        }\n\n        return true;\n    },\n    renderLoading: function() {\n        return (\n            \u003cText\u003e{'Loading...'}\u003c/Text\u003e\n        );\n    },\n    render: function(){\n        var content = (\u003cView\u003e{this.props.children}\u003c/View\u003e) || null;\n\n        if(!this.state.isRendered \u0026\u0026 this.props.lazyRender) {\n            content = this.renderLoading();\n        }\n\n        return (\n            \u003cView {...this.props}\u003e\n                {content}\n            \u003c/View\u003e\n        );\n    },\n});\n\nvar InScreenComponents = React.createClass({\n    shouldComponentUpdate: function() {\n        // forceRender is dont used lazy render\n        if(this.state.isInScreen) {\n            this.setState({ title: 'Is in screen first time'})\n        }\n\n        return false;\n    },\n    render: function(){\n        return (\n            \u003cView {...this.props}\u003e\n                \u003cText\u003e{this.state.title || 'Never in screen'}\u003c/Text\u003e\n            \u003c/View\u003e\n        );\n    },\n});\n\nvar LazyloadView = require('@ali/react-native-lazyloadview');\n\n...\n\nrender: function() {\n    // ListView\n    var body = [],\n        rowStyle = {\n            flex:1,\n            height: 60,\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: 'row',\n        },\n        renderElement = function(d){\n            return (\n                \u003cView style={rowStyle} ref={d.ref}\u003e\n                    \u003cImage\n                        lazyloadSrc={d.img}\n                        style={{\n                            width: 60,\n                            height: 60,\n                            position: 'absolute',\n                            left: 0,\n                        }}\n                        /\u003e\n                    \u003cText\u003eRow: {d.index}\u003c/Text\u003e\n                \u003c/View\u003e\n            );\n        };\n\n\n\n    for(var i = 0 ; i \u003c 100; i++) {\n        body.push({\n            ref: 'row' + i,\n            img: 'https://placeholdit.imgix.net/~text?txtsize=8\u0026txt=60%C3%9760\u0026w=60\u0026h=60',\n            index: i,\n        });\n    }\n\n    return (\n        \u003cLazyloadView\n            contentInset={{top: 0, bottom: 20}}\n            dataSource={this.props.dataSource.cloneWithRows(body)}\n            renderRow={(rowData, sectionID, rowID, highlightRow) =\u003e {\n                // console.log('renderRow = ', rowData, rowID);\n                return renderElement(rowData);\n            }}\n            _onScroll={(e) =\u003e {\n                console.log('_onScroll = ', e.nativeEvent);\n            }}\n        \u003e\u003c/LazyloadView\u003e\n    );\n\n\n    // ScrollView\n    var body = [],\n        rowStyle = {\n            flex:1,\n            height: 60,\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: 'row',\n        },\n        imgStyle = {\n            width: 60,\n            height: 60,\n            position: 'absolute',\n            left: 0,\n        };\n\n    for(var i = 0 ; i \u003c 100; i++) {\n        var imageUrl = 'https://placeholdit.imgix.net/~text?txtsize=8\u0026txt=60%C3%9760\u0026w=60\u0026h=60';\n        body.push(\n            \u003cView style={rowStyle} ref={'row'+i}\u003e\n                \u003cImage\n                    lazyloadSrc={imageUrl}\n                    style={imgStyle}\n                    /\u003e\n                \u003cText\u003eRow: {i}\u003c/Text\u003e\n                \u003cLazyComponent\u003e\n                    \u003cImage source={{uri: imageUrl}}\u003e\n                \u003c/LazyComponent\u003e\n                \u003cInScreenComponents\u003e\u003c/InScreenComponents\u003e\n            \u003c/View\u003e\n        );\n    }\n\n    return (\n        \u003cLazyloadView\n            _onScroll={(e) =\u003e {\n\n            }}\u003e\n            _onScrollEndDrag={(e) =\u003e {\n\n            }}\n            _renderHeader={(e) =\u003e {\n                // when add this props please return something\n                return (\u003cText\u003eHEADER\u003c/Text\u003e);\n            }}\n            {body}\n        \u003c/LazyloadView\u003e\n    );\n},\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIskenHuang%2Freact-native-scrollview-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIskenHuang%2Freact-native-scrollview-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIskenHuang%2Freact-native-scrollview-lazyload/lists"}