
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
github.com/exponentjs/react-native-infinite-scroll-view
InfiniteScrollView is a React Native scroll view that notifies you as the scroll offset approaches the bottom. You can instruct it to display a loading indicator while you load more content. This is a common design in feeds. InfiniteScrollView also supports horizontal scroll views.
It conforms to ScrollableMixin so you can compose it with other scrollable components.
npm install --save react-native-infinite-scroll-view
Compose InfiniteScrollView with the scrollable component that you would like to get events from. In the case of a basic ListView, you would write:
import React from 'react';
import {
ListView,
} from 'react-native';
import InfiniteScrollView from 'react-native-infinite-scroll-view';
class ExampleComponent extends React.Component {
_loadMoreContentAsync = async () => {
// Fetch more data here.
// After fetching data, you should update your ListView data source
// manually.
// This function does not have a return value.
}
render() {
return (
<ListView
renderScrollComponent={props => <InfiniteScrollView {...props} />}
dataSource={...}
renderRow={...}
canLoadMore={this.state.canLoadMoreContent}
onLoadMoreAsync={this._loadMoreContentAsync}
/>
);
}
}
A more complete example that uses a ListView.DataSource
, react-redux, and supports pagination would look something like this:
import React from 'react';
import {
ListView,
RefreshControl,
} from 'react-native';
import InfiniteScrollView from 'react-native-infinite-scroll-view';
import { connect } from 'react-redux';
class ExampleComponent extends React.Component {
static propTypes = {
// Assume data shape looks like:
// {items: ["item1", "item2"], nextUrl: null, isFetching: false}
listData: PropTypes.object.isRequired,
// dispatch is automatically provided by react-redux, and is used to
// interact with the store.
dispatch: PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: this._rowHasChanged.bind(this),
}),
};
// Update the data store with initial data.
this.state.dataSource = this.getUpdatedDataStore(props);
}
async componentWillMount() {
// Initial fetch for data, assuming that listData is not yet populated.
this._loadMoreContentAsync();
}
componentWillReceiveProps(nextProps) {
// Trigger a re-render when receiving new props (when redux has more data).
this.setState({
dataSource: this.getUpdatedDataSource(nextProps),
});
}
getUpdatedDataSource(props) {
// See the ListView.DataSource documentation for more information on
// how to properly structure your data depending on your use case.
let rows = props.listData.items;
let ids = rows.map((obj, index) => index);
return this.state.dataSource.cloneWithRows(rows, ids);
}
_rowHasChanged(r1, r2) {
// You might want to use a different comparison mechanism for performance.
return JSON.stringify(r1) !== JSON.stringify(r2);
}
_renderRefreshControl() {
// Reload all data
return (
<RefreshControl
refreshing={this.props.listData.isFetching}
onRefresh={this._loadMoreContentAsync.bind(this)}
/>
);
}
_loadMoreContentAsync = async () => {
// In this example, we're assuming cursor-based pagination, where any
// additional data can be accessed at this.props.listData.nextUrl.
//
// If nextUrl is set, that means there is more data. If nextUrl is unset,
// then there is no existing data, and you should fetch from scratch.
this.props.dispatch(fetchMoreContent(this.props.listData.nextUrl));
}
render() {
return (
<ListView
renderScrollComponent={props => <InfiniteScrollView {...props} />}
dataSource={this.state.dataSource}
renderRow={...}
refreshControl={this._renderRefreshControl()}
canLoadMore={!!this.props.listData.nextUrl}
onLoadMoreAsync={this._loadMoreContentAsync.bind(this)}
/>
);
}
}
const mapStateToProps = (state) => {
return {listData: state.listData};
};
export default connect(mapStateToProps)(ExampleComponent);
InfiniteScrollView uses the onScroll
event to continuously calculate how far the scroll offset is from the bottom.
FAQs
Unknown package
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.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.