Skip to content
This repository has been archived by the owner on May 16, 2019. It is now read-only.

c-bata/react-native-focus-scroll

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

react-native-focus-scroll

react-native-focus-scroll can detect which children are focused when scrolling.

Example - vertical Example - horizontal

Installation

$ npm i react-native-focus-scroll

TODO

  • Add FocusScrollView
  • Support horizontal scroll
  • Add an android sample

Usage

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 (
            <Image style={[style, {width: 200, height: 200, position: "absolute"}]} source={{uri: this.props.url}} />
        )
    }
}

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 (
            <View style={styles.container}>
                <FocusScrollView threshold={100}>
                    {urls.map((url, index) => <BeerComponent key={index} imageUrl={url} />)}
                </FocusScrollView>
            </View>
        );
    }
}

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.

whetherIsFocused(size, margin) {
    const distance = Math.abs((size.y + size.height / 2) - this.getCenterY());
    return distance < margin;
}

LICENSE

MIT License

About

React Native Library to detect children that are focused on ScrollView.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published