notjust-dev/igstorycomponent

igstorycomponent's Issues

Facing issue in progress bar rendering after tapping to proceed to next story

When tapped to move to next image, the progress bar for the previous image does not reach to width 100% it happens for a blink of a second and then resets to the previous value. Similar issue for moving to previous image while tapping.

Following is the code I am using:

import { Dimensions, Text, View, Image, StyleSheet, Pressable, TouchableOpacity } from 'react-native'
import React, { useEffect, useState} from 'react'
import CustomIcon from '../components/CustomIcon';
import { COLORS, FONTFAMILY, FONTSIZE } from '../theme/theme';
import data from '../data/data';
import { SafeAreaView } from 'react-native-safe-area-context';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
    Easing,
    useAnimatedReaction,
    runOnJS,
  } from 'react-native-reanimated';
import LinearGradient from 'react-native-linear-gradient';

const { height, width } = Dimensions.get('window')

interface StoryScreenProps {
    index: number,
    setSelectedItem: any,
    selectedItem: any,
    setIsHidden: any,
}

const StoryScreens: React.FC<StoryScreenProps> = ({ index, setSelectedItem, selectedItem, setIsHidden }) => {
    const [userIndex, setUserIndex] = useState(index)
    const [storyIndex, setStoryIndex] = useState(0)
    const user = data[userIndex]
    const story = user.stories[storyIndex]
    const [len, setlen] = useState(user.stories.length)

    const progress = useSharedValue(0);

    useEffect(() => {
        setlen(data[userIndex].stories.length)
        setSelectedItem(selectedItem?.map((item: any, i: any) => {
            return i == userIndex ? true : item
        }));
    }, [userIndex])

    const goToPrevStory = () => {
        setStoryIndex((index) => {
            if (index == 0) {
                goToPrevUser()
                return data[userIndex - 1].stories.length - 1;
            }
            return index - 1
        })
    }
    const goToNextStory = () => {
        setStoryIndex((index: number) => {
            if (index == user.stories.length - 1) {
                goToNextUser();
                return 0
            }
            return index + 1
        })
    }

    const goToNextUser = () => {
        setUserIndex((index: number) => {
            if (index == data.length - 1) {
                setIsHidden(false)
                return 0
            }
            return index + 1
        })
    }

    const goToPrevUser = () => {
        setUserIndex((index: number) => {
            if (index == 0) {
                setIsHidden(false)
                return 0;
            }
            return index - 1
        })
    }

    useEffect(() => {
        progress.value = 0;
        progress.value = withTiming(1, {
            duration: 5000,
            easing: Easing.linear,
        });
        
    }, [storyIndex, userIndex]);

    useAnimatedReaction(
        () => progress.value,
        (currentValue, previousValue) => {
          if ((currentValue !== previousValue) && (currentValue === 1)){
            
            runOnJS(goToNextStory)();
          }
        }
    );
    
    const indicatorAnimatedStyle = useAnimatedStyle(() => {
        return {width: `${progress.value * 100}%`}
    });


    return (
        <SafeAreaView>
            <Image style={styles.imageContainer} source={{ uri: story.story_image }}></Image>
            <Pressable style={styles.navPressable} onPress={goToPrevStory} />
            <Pressable
                style={[styles.navPressable, { right: 0 }]}
                onPress={goToNextStory}
            />
            <View style={styles.header}>
                <LinearGradient
                    colors={['rgba(0,0,0,0.7)', 'transparent']}
                    style={StyleSheet.absoluteFill}
                />
                <View style={styles.indicatorRow}>
                    {user.stories.map((_, index) => {
                        return (
                            <View key={`${user.user_id}-${index}`} style={styles.indicatorBG}>
                                <Animated.View
                                style={[
                                    styles.indicator,
                                    index === storyIndex && indicatorAnimatedStyle,
                                    index > storyIndex && {width:'0%'},
                                    index < storyIndex && {width:'100%'}
                                ]}
                                />
                            </View>
                        )})
                    }
                </View>

                <Text style={styles.username}>{user.user_name}</Text>
            </View>
            <TouchableOpacity
                style={styles.CrossContainer}
                onPress={() => {
                    setIsHidden(false)
                }}
            >
                <CustomIcon name='close' size={15} color={COLORS.primaryWhiteHex} />
            </TouchableOpacity>
        </SafeAreaView>
    );
}

export default StoryScreens

const styles = StyleSheet.create({
    imageContainer: {
        height: height,
        width: width
    },
    navPressable: {
        position: 'absolute',
        width: '30%',
        height: '100%',
    },
    StoryContainer:{
        flexDirection: 'row', 
        position:'absolute',
        top:0,
    },
    CrossContainer: {
        position: 'absolute',
        top: 20,
        right: 10,
        zIndex: 2, // Ensure it's above other components
    },
    indicatorRow: {
        gap: 5,
        flexDirection: 'row',
        marginBottom: 20,
    },

    indicatorBG: {
        flex: 1,
        height: 5,
        backgroundColor: 'black',
        borderRadius: 10,
        overflow: 'hidden',
    },
    indicator: {
        backgroundColor: 'white',
        height: '100%',
    },
    header: {
        position: 'absolute',
        top: 0,
        // backgroundColor: 'rgba(0, 0, 0, 0.25)',
        width: '100%',
        padding: 20,
        paddingTop: 10,
      },
      username: {
        color:COLORS.primaryWhiteHex,
        fontSize:FONTSIZE.size_20,
        fontFamily:FONTFAMILY.poppins_semibold,
      },
})