CODEWITHSUNDEEP
reactjsreact-nativeuse-ref
vibhu
vibhu

Reputation: 377

React Native scrollTo target element

I'm new to React Native. I made a simple app with the latest version in a functional component.

I'm trying to achieve on leftside icon onPress right side scroll to that element and this is two siblings in screen you can name it with left side screen and right side screen left side screen with style={{flex:1}} and rightside style={{flex:2}}

The left side has a list of 5 elements and right side screen have all 5 elements have 7 items on every list with title in a scroll view from react-native.

I want when the user clicks on the left side screen icon right side screen scrolls to the title position or something similar to that. The app is similar to when the user clicks on an item it scrolls to that item on the screen. I look into many tutorials not able to achieve what I'm trying to.

  function leftside(){
<TouchableOpacity style={styles.left_container} onPress={itemA}>
        <MaterialCommunityIcons
      name={"itesname"}
      size={35}
      color={"#000"}
    />
    <Text>Item</Text>
  </TouchableOpacity>
 <TouchableOpacity>
 ... till 5
 </TouchableOpacity>
  }

Right side:

   import React from "react";
   import { Text, View, Image } from "react-native";

   function rightside({ uri, text }) {
    return (
<View style={{ flexDirection: "column", backgroundColor: "#fff" }}>
  <View
    style={{
      justifyContent: "center",
      alignItems: "center",
      paddingLeft: "5%",
    }}
  >
    <Image
      source={{
        uri,
      }}
      style={{ width: 60, height: 80 }}
    />
    <Text>{text}</Text>
  </View>
</View>
   );
  }

  export default rightside;

I tried to useRef and pass the ref to scroll view not work for me or maybe I'm approaching it in the wrong way.

any reference to any blog or post or solution appreciated it.! Image reference here..

image for refrence

Upvotes: 4

Views: 687

Answers (1)

Gavin D&#39;mello
Gavin D&#39;mello

Reputation: 433

The solution you are looking for can be achieved using Flatlist

 <FlatList
     ref={ref => {
         this.flatListRef = ref;
     }}
     data={MainResults}
     renderItem={({item, index}) => this._renderItemRight(item, index)}
     keyExtractor={({id}) => id.toString()}
/>

To scroll to a particular index, the index of the item as done below:

scrollToIndex = index => { this.flatListRef.scrollToIndex({animated: true, index}); }; ;

To provide a solution to your question, I have created the entire feature including:

  1. DummyData
  2. LeftSide (currently I have just provided a list of 6 items to meet your design. I would recommend to use a FlatList/ScrollView for the left side as well as the list grows)
  3. RightSide (currently each element has 8 items and more can be added)
  4. ScrollToIndex

For better understanding of the solution, check out this gist

Note: The entire implementation is built as per this design(image for reference) which was provided in the question.

Flag my solution if you find it helpful. Cheers!

Upvotes: 1

Related Questions