Home > Net >  How to scroll down a specific value in react native?
How to scroll down a specific value in react native?

Time:06-10

I would like to scroll to an element that is y unit under my touchableopacity(when I press on it). I tried using ref and useref but it was not what I wanted. Is it possible to scroll down a specific length when you press on a button? Here is some code to illustrate :

return (
                  <View>
                    <Text
                      onPress={() => {
                          idData = data.id;
                          totalid  ; // here is the total, the length 
                          //that I want to scroll down
                          alert("mon id est: "   idData);
                          viewRef.current?.focus();
                        }
                      }}
                    >
                      {Data.name}
                    </Text>
                  </View>

and somewhere bellow:

<View ref={viewRef}>

CodePudding user response:

Although this isn't needed, I suggest you change your View component to ScrollView, since whenever you want to have something that is scrollable it's always better to have the option to swipe up and down, regardless of how many navigation buttons you have:

return (
                  <ScrollView>
                    <Text
                      onPress={() => {
                          idData = data.id;
                          totalid  ; // here is the total, the length 
                          //that I want to scroll down
                          alert("mon id est: "   idData);
                          viewRef.current?.focus();
                        }
                      }}
                    >
                      {Data.name}
                    </Text>
                  </ScrollView>

Now, since I don't have the list of items that you are trying to Scroll through I suggest you read this, keeping in mind that although the example is using View, you can use ScrollView, but this all depends on the size of the data: https://aboutreact.com/scroll_to_a_specific_item_in_scrollview_list_view/

  • Related