React-Native Element changing size while scrolling

Question

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>

Answer 1

I think you want to use smoothScrollToPosition()

please visit https://www.programcreek.com/java-api-examples/?class=android.support.v7.widget.RecyclerView&method=smoothScrollToPosition