Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React-Native Element changing size while scrolling

$
0
0

I'm trying to make a react-native scrollview with 3 (or more) elements where the element in the middle of the screen is always 1.75 times the normal element size, and while scrolling the size changes dynamically. Can I find when the element is in the center of screen if the size of the scrollview will be changing? Is it possible to do without some complicated mathematical approach? I was trying putting conditions to all elements' styles but can't find a way to determine when the condition is met.

 handleScroll(event) {
    var x = event.nativeEvent.contentOffset.x;
    var page = x / this.state.totalWidth;
    this.setState({ position: page })
}

isElementFocused(start, stop) {
    return (this.state.position >= start && this.state.position < stop);
}

Element:

<View style={styles.swipeBox,
                {
                    backgroundColor: this.isElementFocused(1, 2) ? this.getColor(1) : colors.primary,
                    width: this.isElementFocused(1, 2) ? this.getWidth(1) : this.state.baseWidth,
                    height: this.isElementFocused(1, 2) ? this.getHeight(1) : this.state.baseHeight,

                }}>
                    <Text>test</Text>
                </View>

Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>