Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-lazyload-components
Advanced tools
Readme
A `lazyload` components suit for React Native.
Component | Description |
---|---|
LazyloadScrollView | A lazyload container component based on ScrollView |
LazyloadListView | A lazyload container component based on ListView |
LazyloadView | Based on View component. This component`s content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
LazyloadImage | Based on Image component. The image content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
LazyloadScrollView
instead of ScrollView
, and specify a unique id for name
prop.LazyloadView
and LazyloadImage
instead of View
or Image
.host
prop for every LazyloadView
and LazyloadImage
, the host
prop should be same as outer LazyloadScrollView
component`s name prop.import React, {
Component
} from 'react-native';
import {
LazyloadScrollView,
LazyloadView,
LazyloadImage
} from 'react-native-lazyload';
const list = [...list data here]; // many rows
class LazyloadScrollViewExample extends Component{
render() {
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="lazyload-list"
>
{list.map((file, i) => <View
key={i}
style={styles.view}
>
<LazyloadView
host="lazyload-list"
style={styles.file}
>
<View style={styles.id}>
<Text style={styles.idText}>{file.id}</Text>
</View>
<View style={styles.detail}>
<Text style={styles.name}>{file.first_name} {file.last_name}</Text>
<Text><Text style={styles.title}>email: </Text><Text style={styles.email}>{file.email}</Text></Text>
<Text style={styles.ip}><Text style={styles.title}>last visit ip: </Text>{file.ip_address}</Text>
</View>
</LazyloadView>
<View style={styles.avatar}>
<LazyloadImage
host="lazyload-list"
style={styles.avatarImage}
source={file.avatar}
/>
</View>
</View>)}
</LazyloadScrollView>
);
}
}
Same as ListView. But it won`t render LazyloadView
and LazyloadImage
inside it, util they are scrolled into sight.
refresh - Force to trigger an update. Useful after nagivation pop/push where the memory may have been release.
Components that extend LazyloadView can accept a prop (function) to be called when the item's visibility changes.
onVisibilityChange - An optional function to be called with the new visibility, ref, and props
Example:
<LazyloadView onVisibilityChange={ this.handleItemVisibility }>
...
</LazyloadView>
...
handleItemVisibility(visibility, ref, props) {
console.log('visibility, ref, props', visibility, ref, props);
}
Clone this repository from Github and cd to 'Example' directory then run npm install
.
FAQs
lazyload for react native Image, View, ScrollView, ListView; fork from react-native-lazyload with community contributions patches and fixes merged and maintained!
The npm package react-native-lazyload-components receives a total of 4 weekly downloads. As such, react-native-lazyload-components popularity was classified as not popular.
We found that react-native-lazyload-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.