React native WhatsApp status like change image on click

...

i have images that i want change on tap like WhatsApp status.ontap left side previous email mage and onclick right side next image

...

... I try it many time but failed

i have images that i want change on tap like WhatsApp status.ontap left side previous email mage and onclick right side next image

...

        import { View, Text, SafeAreaView, StyleSheet, TouchableOpacity, Dimensions, Image, ImageBackground, Pressable, StatusBar, ScrollView } from 'react-native'
    import React, { useState } from 'react';
    
    
    
    //FOR SLIDING
    const images = [
      'assets/amelia.png',
      'assets/girl1.jpg',
      'assets/girl2.jpg
    
              

Const app=()=>{
const [imageActive, setimageActive] = useState(0)

  onchange = (nativeEvent) => {
    if (nativeEvent) {
      const slide = Math.ceil(nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width);
      if (slide != imageActive) {
        setimageActive(slide);
     }
   }
  }
return (

<View style={styles.centerContPartOne}>
            <ScrollView onScroll={({ nativeEvent }) => onchange(nativeEvent)}
              showsHorizontalScrollIndicator={false}
              pagingEnabled
              horizontal style={styles.wrap}>
              {images.map((e, index) =>
                <ImageBackground key={e} resizeMode='cover'
                  style={styles.wrap}
                  source={{ uri: e }}>

                  <View style={styles.imgBackField}>
                    <TouchableOpacity>
                      <Image source={require('../../../assets/Info.png')} style={styles.partOneIcon} />
                    </TouchableOpacity>
                   <View>
                    <TouchableOpacity onPress={() => setFavSelect(!favselect)}>
                      {favselect ?
                        (
                          <Image source={require('../../../assets/blackfavourite.png')} tintColor='#000' style={styles.partOneIcon} />
                        )
                        :
                        (
                          <Image source={require('../../../assets/Favorite.png')} style={styles.partOneIcon} />
                        )
                      }
                    </TouchableOpacity>
                    </View>
                  </View>
                </ImageBackground>)}

                </ScrollView>
                <View style={styles.wrapdot}>
                  {
                    images.map((e, index) =>
                      <Text key={e}
                        style={imageActive == index ? styles.dotActive : styles.dot}>
                        <View></View>
                      </Text>)}
                </View>

    )
    }

    const styles = StyleSheet.create({
    wrapdot: {
    position: "absolute",
    flexDirection: "row",
    alignSelf: "center",
  },

  dotActive: {
    margin: 4,
    marginTop: 8,
    color: "black",
    height: 2,
    width: "27%",
    borderRadius: 1,
    borderWidth: 1,
    borderColor: '#187498',
  },
  dot: {
    margin: 4,
    marginTop: 8,
    color: "red",
    height: 2,
    width: "27%",
    borderRadius: 1,
    borderWidth: 1,
    borderColor: '#969696',
  },
    })