DEV Community

Cover image for Step-by-Step Guide: Implementing Snap Horizontal Scroll in React Native

Step-by-Step Guide: Implementing Snap Horizontal Scroll in React Native

Christopher Alves on February 21, 2024

The focus of this article is to assist you in creating a page with a horizontally scrollable component in snap style and a header that reflects the...
Collapse
 
mrlinxed profile image
Mr. Linxed

Have you looked into the css property scroll-snap-type

This could help you eliminate some JS.

Collapse
 
chriscode profile image
Christopher Alves

@mrlinxed thank you for your tip!
But when you are working with react-native to have a scroll, you need to use some scrollable component, like scrollview or flatlist.
The css scroll-snap-type property works very well, but only on the Web.

Collapse
 
mayderson profile image
Mayderson Mello

Muito massa essa implementação, ficou bem interessante, consegui replicar bem fácil.

Collapse
 
chriscode profile image
Christopher Alves

Obrigado Mayderson! Qualquer dúvida só chamar!

Collapse
 
luuan profile image
Luan Tomarozzi

Amazing article Chris! Thanks for sharing.

Collapse
 
chriscode profile image
Christopher Alves

No problem @luuan , I'm happy to help