Change in State in a props passed , cause to lose existing props

[henoktsegaye]

Current Behavior

I have an animated positions variable that tracks the values of the position
and i also passed scrollEnabled props to the render component which is "Scroll View"

so onSettle I change the scollEnabled behavior seems to lost other values when doing that and the animated position does not get updated anymore which I am interpolating

I manage the scrollEnabled Variable locally using a local state, which when changed causes a rerender of the component, but its not assigning other values approprietly

• What code are you running and what is happening?
• Include a screenshot if it makes sense.
  Here is a sample code I am working on

import React, { useEffect } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import { Text, Layout, Button } from '@ui-kitten/components';
import { FlatList } from 'react-native-gesture-handler';
import House from '../../components/bottomSheet/houses';
import Animated , { Value , interpolate , Extrapolate, useCode, call} from 'react-native-reanimated';
const windowHeight = Dimensions.get('window').height;
const AnimatedButton = Animated.createAnimatedComponent(Button);

export default function Example(props) {
  const {forwardRef   } = props;
  const animatedPosition = new Animated.Value(0)
  const opacity = animatedPosition.interpolate({
    inputRange:[0,.55,1],
    outputRange:[240,550,550] ,
    extrapolate:Extrapolate.CLAMP
  })
  const innerScrollBar = React.createRef(null);
  const [scrollEnabled , setScrollEnabled] = React.useState(false);
  

  function onSettle(index) {
    console.log('index is at', index);
    if(index == 0) {
      setScrollEnabled(true);
    } else {
        innerScrollBar.current.getNode().scrollTo({y: 0, animated: true})
      setScrollEnabled(false);
    }
  }

  return (
    <>  
      <AnimatedButton style={{position:'absolute', bottom:opacity , padding:10,  right:20,  zIndex:23}} onPress={p => console.log('animation pos', animatedPosition) } >
            hello there
      </AnimatedButton>
     


      <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type
        componentType="ScrollView"
        ref={forwardRef}
        innerRef={innerScrollBar}
        snapPoints={[0, 200, '55%', windowHeight - 200, windowHeight - 100, windowHeight]}
        initialSnapIndex={2}
        friction={0}
        onSettle={onSettle}
        scrollEnabled={scrollEnabled}
        animatedPosition={animatedPosition}
        renderHandle={() => (
          <Layout style={styles.header} level="1"  >
            <View style={styles.panelHandle} />
            <Text category="h6" style={{ marginVertical: 5 }} onPress={e => forwardRef.current.snapTo(windowHeight)} > Explore Houses</Text>
          </Layout>
        )}
        keyExtractor={i => i}
       
        contentContainerStyle={styles.contentContainerStyle}
      >
        <Layout level="2" style={{ paddingLeft: 10 }} >
          

          <Text category="h6" > More Houses </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}
          />
          <View>
            <Button appearance="ghost" style={{ textAlign: 'left' }} >  Explore more</Button>

          </View>
          <Text category="h6" > More Houses </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}
            
          />
          <View>
            <Button appearance="ghost" >  Explore more</Button>

          </View>
          <Text category="h6" > More Results </Text>
          <Text appearance="hint" category="c1" > Hint for this group of category  </Text>

          <FlatList
            horizontal
            data={Array.from({ length: 5 }).map((_, i) => String(i))}
            renderItem={House}
            keyExtractor={i => i}
            showsHorizontalScrollIndicator={false}

          />
          <View>
            <Button appearance="ghost" >  Explore more</Button>

          </View>

        </Layout>

      </ScrollBottomSheet>
    </>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainerStyle: {
    backgroundColor: '#F3F4F9',
    zIndex:2323
  },
  header: {
    alignItems: 'center',
    paddingVertical: 10,
    elevation:2

  },
  panelHandle: {
    width: 40,
    height: 4,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 4,

  }
});

Expected Behavior

We will have our existing state in place

• What do you expect should be happening?
• Include a screenshot or a video if it makes sense.

How to reproduce

• You must provide a way to reproduce the problem.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app, with as many details as possible.

Your Environment

	version
Platform (Android, iOS or both)	Android
react-native-scroll-bottom-sheet	0,63
react-native	0.61
react-native-gesture-handler	1.56
react-native-reanimated	1.90

[henoktsegaye]

help wanted 🙏