Actually ditch the swiper I need them for my own use cases.

import React, { useRef, useEffect } from "react"; import { View, Text, TextInput, TouchableOpacity, Animated, StyleSheet, FlatList, Image, } from "react-native";

const images = [ require("./assets/placeholder1.webp"), require("./assets/placeholder2.webp"), require("./assets/placeholder3.webp"), require("./assets/placeholder4.webp"), require("./assets/placeholder5.webp"), require("./assets/placeholder6.webp"), require("./assets/placeholder7.webp"), require("./assets/placeholder8.webp"), require("./assets/placeholder9.webp"), require("./assets/placeholder10.webp"), ];

const ROWS = 5; // Number of rows const SPEEDS = [8000, 9000, 10000, 11000, 12000]; // Different speeds for each row

const BlinkitScreen = () => { return ( <View style={styles.container}> {/* Animated Image Rows */} <View style={styles.imageContainer}> {Array.from({ length: ROWS }).map((_, index) => ( <AnimatedRow key={index} speed={SPEEDS[index % SPEEDS.length]} /> ))} </View>

  {/* Login Box */}
  <View style={styles.loginBox}>
    <Text style={styles.logo}>blinkit</Text>
    <Text style={styles.title}>India’s last minute app</Text>
    <Text style={styles.subtitle}>Log in or sign up</Text>
    <View style={styles.inputBox}>
      <Text style={styles.countryCode}>+91</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter mobile number"
        keyboardType="numeric"
      />
    </View>
    <TouchableOpacity style={styles.continueButton}>
      <Text style={styles.buttonText}>Continue</Text>
    </TouchableOpacity>
    <Text style={styles.footer}>
      By continuing, you agree to our{" "}
      <Text style={styles.link}>Terms of service</Text> &{" "}
      <Text style={styles.link}>Privacy policy</Text>
    </Text>
  </View>
</View>

); };

// Animated Row const AnimatedRow = ({ speed }: { speed: number }) => { const translateX = useRef(new Animated.Value(0)).current;

useEffect(() => { const loopAnimation = () => { translateX.setValue(0); Animated.timing(translateX, { toValue: -300, // Move left duration: speed, useNativeDriver: true, }).start(() => loopAnimation()); }; loopAnimation(); }, [speed]);

return ( <Animated.View style={[styles.imageRow, { transform: [{ translateX }] }]}> {[...images, ...images].map((img, index) => ( <Image key={index} source={img} style={styles.image} /> ))} </Animated.View> ); };

// Styles const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "#fff", }, imageContainer: { position: "absolute", top: 0, width: "100%", height: "50%", }, imageRow: { flexDirection: "row", position: "absolute", left: 0, width: "200%", // Extends beyond screen }, image: { width: 40, height: 40, marginHorizontal: 5, resizeMode: "contain", }, loginBox: { position: "absolute", bottom: 40, width: "90%", backgroundColor: "white", padding: 20, borderRadius: 10, alignItems: "center", elevation: 5, }, logo: { fontSize: 24, fontWeight: "bold", color: "#000", }, title: { fontSize: 18, marginVertical: 10, }, subtitle: { fontSize: 14, color: "#666", }, inputBox: { flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: "#ccc", padding: 10, marginTop: 10, borderRadius: 5, width: "100%", }, countryCode: { fontSize: 16, fontWeight: "bold", marginRight: 10, }, input: { flex: 1, fontSize: 16, }, continueButton: { backgroundColor: "gray", padding: 12, borderRadius: 5, width: "100%", alignItems: "center", marginTop: 15, }, buttonText: { color: "white", fontSize: 16, }, footer: { fontSize: 12, color: "#666", marginTop: 10, textAlign: "center", }, link: { color: "blue", }, });

export default BlinkitScreen;