Solución:
Paso mucho tiempo luchando con esto hasta que lo descubrí, así que aquí está mi solución si ayuda a alguien.
https://snack.expo.io/H1CnjIeDb
El problema era que todos estos eran necesarios y la paginación debería estar desactivada
horizontal={true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}
Absolutamente puedes hacer eso con ScrollView o mejor, FlatList. Sin embargo, la parte realmente complicada es el efecto de chasquido. Puedes usar accesorios snapToInterval y snapToAlignment para lograrlo (ver la respuesta de Vasil Enchev); desafortunadamente, estos son solo para iOS.
Un compañero de trabajo y yo creamos un complemento que responde a esta necesidad particular. Terminamos obteniéndolo de código abierto, así que es todo tuyo para que lo pruebes: react-native-snap-carousel.
El complemento ahora está construido sobre FlatList (versiones> = 3.0.0), que es ideal para manejar una gran cantidad de elementos. Proporciona vistas previas (el efecto que buscas), efecto de chasquido para iOS y Android, imágenes de paralaje, Soporte RTL, y más.
Puede echar un vistazo a la vitrina para hacerse una idea de lo que se puede lograr con ella. No dudes en compartir tu experiencia con el complemento ya que siempre estamos tratando de mejorarlo.
Editar: se han introducido dos nuevos diseños en la versión 3.6.0 (uno con efecto de pila de cartas y el otro con efecto de yesca). ¡Disfrutar!
Puede pasar un apoyo horizontal a su vista de desplazamiento:
https://facebook.github.io/react-native/docs/scrollview.html#horizontal
Y luego puede crear una vista interior para especificar sus requisitos de ancho.
<ScrollView
ref={(snapScroll) => { this.snapScroll = snapScroll; }}
horizontal={true}
decelerationRate={0}
onResponderRelease={()=>{
var interval = 300; // WIDTH OF 1 CHILD COMPONENT
var snapTo = (this.scrollingRight)? Math.ceil(this.lastx / interval) :
Math.floor(this.lastx / interval);
var scrollTo = snapTo * interval;
this.snapScroll.scrollTo(0,scrollTo);
}}
scrollEventThrottle={32}
onScroll={(event)=>{
var nextx = event.nativeEvent.contentOffset.x;
this.scrollingRight = (nextx > this.lastx);
this.lastx = nextx;
}}
showsHorizontalScrollIndicator={false}
style={styles.listViewHorizontal}
>
{/* scroll-children here */}
</ScrollView>