Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c-bata/react-native-focus-scroll
React Native Library to detect children that are focused on ScrollView.
https://github.com/c-bata/react-native-focus-scroll
Last synced: about 2 months ago
JSON representation
React Native Library to detect children that are focused on ScrollView.
- Host: GitHub
- URL: https://github.com/c-bata/react-native-focus-scroll
- Owner: c-bata
- License: mit
- Archived: true
- Created: 2017-05-24T17:18:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-03T05:21:27.000Z (over 7 years ago)
- Last Synced: 2024-08-16T17:53:48.749Z (5 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-focus-scroll
- Size: 24.2 MB
- Stars: 38
- Watchers: 4
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-focus-scroll ★26 - react-native-focus-scroll can detect which children are focused when scrolling. (Components / UI)
- awesome-reactnative-ui - react-native-focus-scroll - bata/react-native-focus-scroll/raw/master/example/anim.gif)| (Others)
- awesome-react-native - react-native-focus-scroll ★26 - react-native-focus-scroll can detect which children are focused when scrolling. (Components / UI)
- awesome-reactnative-ui - react-native-focus-scroll - bata/react-native-focus-scroll/raw/master/example/anim.gif)| (Others)
- awesome-react-native - react-native-focus-scroll ★26 - react-native-focus-scroll can detect which children are focused when scrolling. (Components / UI)
- awesome-react-native - react-native-focus-scroll ★26 - react-native-focus-scroll can detect which children are focused when scrolling. (Components / UI)
README
# react-native-focus-scroll
react-native-focus-scroll can detect which children are focused when scrolling.
## Installation
```console
$ npm i react-native-focus-scroll
```
## TODO
- [x] Add FocusScrollView
- [x] Support horizontal scroll
- [ ] Add an android sample
## Usage
```jsx
import React, { Component } from 'react';
import {
View,
Image,
} from 'react-native';
import { FocusScrollView } from 'react-native-focus-scroll';
class BeerComponent extends Component {
render() {
let style;
if (this.props.isFocused) {
style = {opacity: 1};
} else {
style = {opacity: 0.4};
}
return (
)
}
}
export default class example extends Component {
render() {
const urls = [
"https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/paulaner.jpg?raw=true",
"https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/kilkenny.jpg?raw=true",
"https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/guiness.jpg?raw=true",
"https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true",
];
return (
{urls.map((url, index) => )}
);
}
}
```
## Properties
All props is propagate to `ScrollView` wrapped by `FocusScrollView` .
#### threshold
- type: `integer`
- required?: optional
- default: `100`
If the distance between the center of FocusScrollView and the center of each children exceed a threshold,
The item of FocusScrollView is focused.
#### whetherIsFocused
- type: `function(size, margin) bool {}`
- required?: optional
To replace the judge whether the child is focused.
The default function is below.
```jsx
whetherIsFocused(size, margin) {
const distance = Math.abs((size.y + size.height / 2) - this.getCenterY());
return distance < margin;
}
```
## LICENSE
[MIT License](https://github.com/c-bata/react-native-focus-scroll/raw/master/LICENSE)