ScrollTo is not Working in Y - axis When Data is Wrapped inside the Row

[GitHubShasiKumar]

Hi @predikament Please help me out with this issue

ScrollTo is not Working in Y - axis When Data is Wrapped inside the Row

Steps to Reproduce

Please check the above code for this bug

const SearchScreenData = ({ searchValue }) => {
const {theme} = useCustomThemes()
const [searchData, setSearchData] = useState([]);
const [showActivityIndicator, setShowActivityIndicator] = useState(false);

const scrollRef = useRef(null);

const onAssetFocus = useCallback(
({ y,}) => {
scrollRef.current.scrollTo({
top: y,
behavior: 'smooth',
});
},
[scrollRef],
);

const dummyData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,31];

return (

{dummyData.map((item, index) => (

))}

  {/* {searchData.map((item,index) => (
    <Asset data={item} onFocusAsset={onAssetFocus} rowIndex={index} />
  ))} */}
</View>

);
};

export default SearchScreenData;

const styles = StyleSheet.create({
assetsWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems:'center',
flexWrap: 'wrap',
overflowY: 'auto',
// overflowX: 'hidden',
flexShrink: 1,
// flexGrow:1,
// paddingBottom:100
},
textStyle: {
color: 'white',
fontSize: getScaled(26),
fontFamily: 'Segoe UI',
alignSelf: 'center'
},
loaderContainer:{ height: '100%', width: '100%', justifyContent: 'center',alignItems:'center'}
});

const SearchItem = ({ onFocus, onEnterPress,text }) => {
// console.log("OnFocus",onFocus)
const { ref, focused } = useFocusable({ onFocus, onEnterPress });
return (
<View
ref={ref}
style={{ height: 180, width: 150, backgroundColor: focused ? 'yellow' : 'white',margin:10,}}
>
{text}

);
};

export default SearchItem;

const styles = StyleSheet.create({});

Screen.Recording.2024-01-22.at.4.15.12.PM.mov

[predikament]

Hello @GitHubShasiKumar,

Thanks for getting in touch!

This looks a bit like an implementation issue to me. Also a bit confused with the description of the issue, when there's an attached video that clearly shows scrolling on the Y-axis?

At the moment you are scrolling on the Y-axis unnecessarily;

I would recommend you split your data virtually into rows and only change the Y-axis scroll position when the ROW focus changes.

In addition you can probably troubleshoot a bit with what values you are getting when the item is getting focused, since that should simply reflect the bounding box of the DOM element which is entirely under your control.

Best of luck to you!