Animated components breaking on refresh and disappearing

[jagan-blip]

Description

reanimated_bug.mp4

This is exactly whats happening, Animations is fixed if i go back and come to the same screen.I will attach the component code, The issue began when I installed Moti with npm install moti --legacy-peer-deps but I uninstalled It since the Animations were not working as expected.This bug is very annoying and really slowing down development also other pages are also breaking when i only refresh this page.The animations dont break when I refresh other screen where I use reanimated.

Steps to reproduce

import React, {useState, useEffect, useRef} from 'react'; import { ScrollView, Text, View, StyleSheet, Image, FlatList, useWindowDimensions,}` from 'react-native';
import DynamicHeader from '../../common/components/DynamicHeader/DynamicHeader';
import {SafeAreaView} from 'react-native';
import Animated, {
useAnimatedScrollHandler,
useSharedValue,
useAnimatedStyle,
interpolate,
withTiming,
multiply,
min,
Extrapolate,
interpolateColor,
runOnJS,
useCode,
block,
cond,
greaterOrEq,
and,
lessThan,
set,
useDerivedValue,
useValue,
FadeIn,
FadeOut,
} from 'react-native-reanimated';
import {useAnimatedValues} from 'react-native-reanimated';
import {clamp} from '../../utils/Clamp';
import getApiClient from '../../axios/axios';
import {log} from '../../common/utils';
import {Colors, Typography} from '../../styles';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {
faClock,
faStar,
faArrowLeft,
faAngleLeft,
faDotCircle,
} from '@fortawesome/free-solid-svg-icons';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/native';
import CircleLoader from '../../common/components/CircleLoader/CircleLoader';
import Lottie from 'lottie-react-native';
import TimerIcon from '../../assets/TimerIcon.svg';
import ItemCard from './Components/ItemCard';
import Filled from '../../assets/starFilled.svg';
import SectionText from './Components/SectionText';
import FssaiLogo from '../../assets/fssai2.svg';
import {useSelector} from 'react-redux';

/* import {onScrollEvent, useValue} from 'react-native-redash'; */
const FoodStoreDetails = ({route}) => {
const HEADER_HEIGHT = 200;
const progress = useSharedValue(0);
const scrollY = useSharedValue(0);
const offsetY = useSharedValue(0);
const colorprogress = useSharedValue(0);
const foodtypecolorprogress = useSharedValue(0);
const translateXprogress = useSharedValue(0);
const menutitleprogress = useSharedValue(0);
const [menu, setMenu] = useState([]);
const [allMenu, setAllMenu] = useState([]);
const [loading, setLoading] = useState(false);
const [sectionHeights, setSectionHeights] = useState([]);
const [sectionIndex, setSectionIndex] = useState(0);
const [flatListScrollOffset, setFlatListScrollOffset] = useState(0);
const flatListScrollY = useSharedValue(0);
const [foodType, setFoodType] = useState('');
const foodTypeProgress = useSharedValue(0);
const sindex = useSharedValue(0);
const {height, width} = useWindowDimensions();
const handleFlatListOnScroll = e => {
'worklet';

const offset = scrollY.value - 375;
let currentSection = 0;
let currentOffset = 0;

let stop_loop = false;
let total_height = 0;
sectionHeights.forEach((height, indexedDB) => {
  total_height += height;
});
sectionHeights.forEach((height, index) => {
  if (!stop_loop) {
    currentOffset += height;

    /*  console.log(offset, currentOffset); */
    if (currentOffset >= total_height) {
      currentSection = sectionHeights?.length - 1;
      stop_loop = true;
    }
    if (offset < currentOffset) {
      currentSection = index;
      stop_loop = true;
    }
  }
});
/*  console.log('hello', menu[currentSection]?._id[0]?.name); */
/* sindex.value = currentSection; */
sindex.value = currentSection;
/*    runOnJS(setSectionIndex)(currentSection); */
/* setSectionIndex(currentSection); */

};
/* useEffect(() => {
console.log('index', sectionIndex);
}, [sectionIndex]); */
const handleOnLayout = (index, e) => {
const {height} = e.nativeEvent.layout;
setSectionHeights(prevHeights => {
prevHeights[index] = height;
return [...prevHeights];
});
};

/* const sectionTitleAnimatedStyle = useAnimatedStyle(() => {

const inputRange = menu.map((height, i) => i);

const outputRange = menu.map((height, i) => -20 * i);

const translateYInterpolation = interpolate(
  sindex.value,
  inputRange,
  outputRange,
  {
    extrapolateLeft: Extrapolate.CLAMP,
    extrapolateRight: Extrapolate.CLAMP,
  },
);

return {
  transform: [{translateY: translateYInterpolation}],
};

}); */

/* const menuProgress = useSharedValue(0) /
const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList);
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event, ctx) => {
if (!ctx.prevY) {
ctx.prevY = 0;
}
const diff = event.contentOffset.y - ctx.prevY;
if (!scrollY?.value) {
scrollY.value = 0;
}
offsetY.value = event.contentOffset.y;
scrollY.value = clamp(scrollY.value + diff, 0, 100);
scrollY.value = event.contentOffset.y;
/ console.log(scrollY.value); */
handleFlatListOnScroll();
ctx.prevY = event.contentOffset.y;
},
});

const animatedStyle = useAnimatedStyle(() => {
if (offsetY.value > 190) {
progress.value = withTiming(1, {
duration: 300,
});
} else {
progress.value = withTiming(0, {
duration: 300,
});
}
if (offsetY.value > 190) {
colorprogress.value = withTiming(1, {
duration: 300,
});
} else {
colorprogress.value = withTiming(0, {
duration: 300,
});
}
const backgroundColor = interpolateColor(
colorprogress.value,
[0, 1],
['#fff', Colors.primary],
);
/* let transform = 200;
if (offsetY.value > 200) {
transform = withTiming(0, {
duration: 300,
});
} /
/ console.log(translateXprogress); */
const elevation = interpolate(progress.value, [0, 1], [0, 7]);
const transformy = interpolate(scrollY.value, [0, 200], [200, 0], {
extrapolateRight: Extrapolate.CLAMP,
});

/*     console.log('transform', transform); */
return {
  elevation: elevation,
  transform: [{translateY: transformy}],
  backgroundColor: backgroundColor,
};

});

const foodTypeAnimatedStyle = useAnimatedStyle(() => {
const transformy = interpolate(scrollY.value, [0, 375], [425, 50], {
extrapolateRight: Extrapolate.CLAMP,
});

if (offsetY.value > 375) {
  foodtypecolorprogress.value = withTiming(1, {
    duration: 300,
  });
} else {
  foodtypecolorprogress.value = withTiming(0, {
    duration: 300,
  });
}
const backgroundColor = interpolateColor(
  foodtypecolorprogress.value,
  [0, 1],
  [Colors.bg_gray, '#fff'],
);
const elevation = interpolate(foodtypecolorprogress.value, [0, 1], [0, 8]);
return {
  transform: [{translateY: transformy}],
  backgroundColor: backgroundColor,
  elevation: elevation,
};

});

const nameAnimationStyle = useAnimatedStyle(() => {
if (offsetY.value > 190) {
translateXprogress.value = withTiming(1, {
duration: 300,
});
} else {
translateXprogress.value = withTiming(0, {
duration: 300,
});
}
const transformx = interpolate(translateXprogress.value, [0, 1], [0, 40], {
extrapolateRight: Extrapolate.CLAMP,
});
const color = interpolateColor(
colorprogress.value,
[0, 1],
['#333', '#fff'],
);
return {
transform: [{translateX: transformx}],
color: color,
};
});
const menuTitleAnimatedStyle = useAnimatedStyle(() => {
if (offsetY.value > 400) {
menutitleprogress.value = withTiming(1, {
duration: 300,
});
} else {
menutitleprogress.value = withTiming(0, {
duration: 300,
});
}

const scale = interpolate(menutitleprogress.value, [0, 1], [0, 1]);
const height = interpolate(menutitleprogress.value, [0, 1], [0, 20]);
const elevation = interpolate(menutitleprogress.value, [0, 1], [0, 5]);
const borderBottomWidth = interpolate(
  menutitleprogress.value,
  [0, 1],
  [0, 1],
);

return {
  height: height,
  marginTop: 5,
  transform: [{scale: scale}],
  borderBottomWidth: borderBottomWidth,
  borderBottomColor: '#333',
  elevation: elevation,
};

});

const backIconAnimationStyle = useAnimatedStyle(() => {
if (offsetY.value > 190) {
colorprogress.value = withTiming(1, {
duration: 300,
});
} else {
colorprogress.value = withTiming(0, {
duration: 300,
});
}
const transform = interpolate(scrollY.value, [0, 200], [10, 10], {
extrapolateRight: Extrapolate.CLAMP,
extrapolateLeft: Extrapolate.CLAMP,
});

return {
  transform: [{translateY: transform}],
};

});

const animatedImageStyle = useAnimatedStyle(() => {
const opacity = interpolate(scrollY.value, [70, 200], [1, 0.3], {
extrapolateRight: Extrapolate.CLAMP,
});
return {
opacity: opacity,
};
});

async function getRestaurantDetails() {
const axios = await getApiClient();
setLoading(true);
/* console.log(route?.params?.restaurant?._id); /
const response = await axios.post('/v1/product/all-products', {
store: route.params.restaurant?._id,
});
if (response?.data?.success === true) {
/ log(response?.data?.data?.all_products?.length); */
setMenu(response?.data?.data?.all_products);
setAllMenu(response?.data?.data?.all_products);
setLoading(false);
} else {
console.log(response?.data?.error?.message);
setLoading(false);
alert('something went wrong');
}
}
const navigation = useNavigation();
useEffect(() => {
setLoading(true);

getRestaurantDetails();

}, []);
const getRating = rating => {
rating = parseFloat(rating);
if (rating < 1.5) {
return 'red';
} else if (rating < 3) {
return '#FA8F1A';
} else {
return '#24963F';
}
};
const cart_items = useSelector(state => state.cart.cart_items);
const [CartItems, setCartItems] = useState([]);
const [CartTotal, setCartTotal] = useState(0);
useEffect(() => {
let arr = cart_items?.filter(
item => item?.store?._id === route.params?.restaurant?._id,
);
setCartItems(arr);
let total = 0;
for (let i = 0; i < arr?.length; i++) {
total = total + parseInt(arr[i]?.product?.price);
}
setCartTotal(total);
}, [cart_items]);
const checkIfClosed = item => {
if (route?.params?.restaurant?.store_status === 'closed_for_orders') {
return 'closed';
}
let current_hour = new Date().getHours();
let current_minute = new Date().getMinutes();
let current_day = new Date().getDay();
let store_start_time = parseFloat(
route?.params?.restaurant?.time?.open_time?.hours +
'.' +
route?.params?.restaurant?.time?.open_time?.minutes
?.toString()
.padStart(2, '0'),
);
let store_close_time = parseFloat(
route?.params?.restaurant?.time?.close_time?.hours +
'.' +
route?.params?.restaurant?.time?.close_time?.minutes
?.toString()
.padStart(2, '0'),
);

let current_time = parseFloat(
  current_hour + '.' + current_minute?.toString().padStart(2, '0'),
);

if (
  current_time < store_start_time ||
  current_time > store_close_time ||
  !route?.params?.restaurant?.time?.open_days?.includes(current_day)
) {
  return 'closed';
} else {
  return 'open';
}

};

const handleTypeToggle = type => {
let arr = [];
for (let i = 0; i < allMenu?.length; i++) {
let product_arr = [];

  for (let j = 0; j < allMenu[i]?.products?.length; j++) {
    let product = allMenu[i]?.products[j]?.product;

    if (product?.product_type === type) {
      product_arr?.push({
        product: product,
      });
    }
  }
  if (product_arr?.length > 0) {
    arr?.push({
      _id: allMenu[i]?._id,
      products: product_arr,
    });
  }
}

setMenu(arr);

};
if (loading) {
return ;
}

return (
<>
<Animated.View
style={[
{
position: 'absolute',
left: 0,
right: 0,
top: 0,
zIndex: 23,
backgroundColor: '#fff',
paddingHorizontal: 10,
justifyContent: 'center',
height: 50,
},
animatedStyle,
]}>
{checkIfClosed() === 'closed' && (
<Lottie
style={{
position: 'absolute',

          width: 150,
          right: 10,
          top: -3,
        }}
        source={require('../../animations/storeclosed2.json')}
        autoPlay
        loop={false}
      />
    )}
    <Animated.Text
      style={[
        Typography.default[700],
        Typography.default.headerMedium,
        Typography.default.black,
        nameAnimationStyle,
      ]}>
      {route?.params?.restaurant?.name}{' '}
    </Animated.Text>
  </Animated.View>
  <Animated.View
    style={[
      {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        zIndex: 23,

        padding: 10,
      },
      foodTypeAnimatedStyle,
    ]}>
    <View
      style={{
        display: 'flex',

        flexDirection: 'row',
        gap: 5,
        alignItems: 'center',
      }}>
      <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => {
          /* if(foodType === "non-veg") {
            setFoodType("veg");
            handleTypeToggle('veg');
          } */

          if (foodType === 'veg') {
            setFoodType('');
            setMenu(allMenu);
          } else {
            setFoodType('veg');
            handleTypeToggle('veg');
          }
        }}>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: 5,
            alignItems: 'center',
            backgroundColor: '#fff',
            borderWidth: 1,
            borderColor: foodType === 'veg' ? Colors.primary : Colors.gray,
            paddingHorizontal: 5,
            paddingVertical: 2,
            borderRadius: 5,
          }}>
          <View
            style={{
              padding: 3,
              borderColor: '#008D3D',
              borderWidth: 1,
              width: 15,
              height: 15,
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: 4,
              /* marginBottom: 4, */
            }}>
            <View
              style={{
                width: 8,
                height: 8,
                borderRadius: 4,
                backgroundColor: '#008D3D',
              }}
            />
          </View>
          <Text
            style={[
              Typography.default.textSmall,
              {
                color: foodType === 'veg' ? Colors.primary : Colors.gray,
              },
            ]}>
            VEG
          </Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => {
          if (foodType === 'non-veg') {
            setFoodType('');
            setMenu(allMenu);
          } else {
            setFoodType('non-veg');
            handleTypeToggle('non-veg');
          }
        }}>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: 5,
            alignItems: 'center',
            backgroundColor: '#fff',
            borderWidth: 1,
            borderColor:
              foodType === 'non-veg' ? Colors.primary : Colors.gray,
            paddingHorizontal: 5,
            paddingVertical: 2,
            borderRadius: 5,
            marginLeft: 5,
          }}>
          <View
            style={{
              padding: 3,
              borderColor: '#8D2729',
              borderWidth: 1,
              width: 15,
              height: 15,
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: 4,
              /*  marginBottom: 4, */
            }}>
            <View style={[styles.triangle, styles.arrowUp]} />
          </View>
          <Text
            style={[
              Typography.default.textSmall,
              {
                color:
                  foodType === 'non-veg' ? Colors.primary : Colors.gray,
              },
            ]}>
            NON-VEG
          </Text>
        </View>
      </TouchableOpacity>
    </View>

    {menu?.length === 1 && (
      <Animated.View
        style={[
          menuTitleAnimatedStyle,
          {
            backgroundColor: Colors.gray,
            paddingHorizontal: 10,
            borderRadius: 20,

            alignSelf: 'flex-start',
          },
        ]}>
        <Text style={[Typography.default.white]}>
          {menu[sectionIndex]?._id[0]?.name}
        </Text>
      </Animated.View>
    )}
    {menu?.length >= 2 && (
      <SectionText
        menu={menu}
        sindex={sindex}
        menuTitleAnimatedStyle={menuTitleAnimatedStyle}
      />
    )}
  </Animated.View>
  <Animated.View
    style={[
      {
        position: 'absolute',
        left: 10,

        top: 0,
        zIndex: 23,

        height: 30,
        width: 30,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 15,
      },
      backIconAnimationStyle,
    ]}>
    <TouchableOpacity
      onPress={() => {
        navigation.goBack();
      }}>
      <FontAwesomeIcon icon={faArrowLeft} size={16} color="#fff" />
    </TouchableOpacity>
  </Animated.View>

  {CartItems?.length > 0 && (
    <View
      style={{
        position: 'absolute',
        width: width - 30,
        left: 15,
        bottom: 15,
        backgroundColor:
          checkIfClosed() === 'closed' ? Colors.gray : '#037857',
        zIndex: 23,
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 10,
        height: 55,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <View
        style={{
          flexDirection: 'row',
          gap: 10,
          alignItems: 'center',
        }}>
        <View>
          <View
            style={{
              paddingLeft: 10,
            }}>
            {CartItems?.filter(data => data?.product?.images?.length > 0)
              ?.length > 0 && (
              <View
                style={{
                  flexDirection: 'row-reverse',
                  height: 40,

                  alignItems: 'center',
                }}>
                {CartItems?.filter(
                  data => data?.product?.images?.length > 0,
                )
                  ?.slice(0, 5)
                  ?.map((item, i) => {
                    let length =
                      CartItems?.filter(
                        data => data?.product?.images?.length > 0,
                      )?.length > 5
                        ? 5
                        : CartItems?.filter(
                            data => data?.product?.images?.length > 0,
                          )?.length;

                    return (
                      <Animated.View
                        key={item?.product?._id}
                        entering={FadeIn}
                        exiting={FadeOut}>
                        <Image
                          source={{uri: item?.product?.images[0]?.url}}
                          style={{
                            borderRadius: 25,

                            zIndex: i + 1,

                            width: 35,
                            height: 35,

                            marginLeft: -15,
                            borderWidth: 1,

                            borderColor: '#333',
                          }}
                        />
                      </Animated.View>
                    );
                  })}
              </View>
            )}
          </View>
        </View>
        <View
          style={{
            borderLeftColor: '#fff',
            borderLeftWidth: 1,
            paddingLeft: 3,

            justifyContent: 'center',
            marginTop: 2,
            height: 48,
          }}>
          <Text
            style={[
              Typography.default[600],
              Typography.default.white,
              Typography.default.textLarge,
              {
                marginLeft: 5,
              },
            ]}>
            ₹{CartTotal}
          </Text>
          <Text
            style={[
              Typography.default[600],
              Typography.default.white,
              Typography.default.textSmall,
              {
                marginTop: 'auto',
                marginBottom: 'auto',
              },
            ]}>
            {CartItems?.length > 1
              ? CartItems?.length + ' items from this restaurant'
              : CartItems?.length + ' item from this restaurant'}
          </Text>
        </View>
      </View>
      <TouchableOpacity
        activeOpacity={0.7}
        disabled={checkIfClosed() === 'closed'}
        onPress={() => {
          navigation.navigate('checkout', {
            store: route.params?.restaurant?._id,
          });
        }}>
        <Text
          style={[
            Typography.default[600],
            Typography.default.white,
            Typography.default.textMedium,
          ]}>
          {checkIfClosed() === 'closed' ? 'Closed' : 'Checkout'}
        </Text>
      </TouchableOpacity>
    </View>
  )}

  <Animated.ScrollView
    scrollEventThrottle={16}
    vertical
    style={{
      backgroundColor: Colors.bg_gray,
    }}
    showsVerticalScrollIndicator={false}
    onScroll={scrollHandler}>
    <Animated.Image
      source={{uri: route.params?.restaurant?.images[0]?.url}}
      style={[
        {
          width: '100%',
          resizeMode: 'cover',
          height: 200,
        },
        animatedImageStyle,
      ]}
    />

    <Text
      style={
        ([Typography.default.black, Typography.default.textMedium],
        {
          backgroundColor: '#fff',
          marginTop: 50,
          paddingHorizontal: 15,
          paddingBottom: 5,
          /*      height: 30, */
          /*    backgroundColor: 'red', */
          /*             borderWidth: 1, */
          justifyContent: 'center',
          alignItems: 'center',
        })
      }>
      {route.params?.restaurant?.categories?.map((item, index) => {
        if (index === route.params?.restaurant?.categories?.length - 1) {
          return item?.name;
        } else {
          return `${item?.name}, `;
        }
      })}
    </Text>

    <View style={styles.details_container}>
      <View style={styles.inner_details_container}>
        <View style={styles.delivery_container}>
          {/*  <Text
            style={[
              Typography.default.black,
              Typography.default.textMedium,
            ]}>
            {route.params?.restaurant?.categories?.map((item, index) => {
              if (
                index ===
                route.params?.restaurant?.categories?.length - 1
              ) {
                return item?.name;
              } else {
                return `${item?.name}, `;
              }
            })}
          </Text> */}
          <View
            style={{
              width: '100%',
              alignItems: 'center',
              marginTop: 5,
            }}>
            <Lottie
              style={{width: '100%'}}
              source={require('../../animations/delivery3.json')}
              autoPlay
              loop={false}
            />
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                width: '100%',
                paddingHorizontal: '7%',
              }}>
              <Text>{route.params?.restaurant?.area?.name}</Text>
              <View style={{}}>
                <Text>
                  {route?.params?.distance_details?.distance?.text} away
                </Text>
              </View>

              <Text>Home</Text>
            </View>

            <View
              style={{
                alignItems: 'center',
                display: 'flex',
                flexDirection: 'row',
                gap: 5,

                width: '100%',
                paddingHorizontal: '7%',
                marginTop: 5,
              }}>
              <TimerIcon width={16} height={16} color="#333" />
              <Text
                style={{
                  fontSize: 13,
                  color: '#333',
                }}>
                {parseInt(
                  parseInt(
                    route?.params?.distance_details?.duration?.value,
                  ) /
                    60 +
                    parseInt(route?.params?.restaurant?.preparation_time),
                )}{' '}
                mins
              </Text>
            </View>
          </View>
        </View>
        <View style={styles.rating_container}>
          <View
            style={{
              width: '100%',
              alignItems: 'center',
              justifyContent: 'center',
              height: '65%',
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
              backgroundColor:
                route.params?.restaurant?.rating?.length > 0
                  ? getRating(route.params?.restaurant?.avg_rating)
                  : getRating(5),
            }}>
            <Filled width={36} height={36} color="#fff" />
            {/* <FontAwesomeIcon icon={faStar} color="#fff" size={36} /> */}
          </View>
          <View
            style={{
              height: '35%',
              backgroundColor: '#fff',
              width: '100%',
              marginTop: 'auto',
              alignItems: 'center',
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
              justifyContent: 'center',
            }}>
            <Text
              style={[
                Typography.default.black,
                Typography.default[600],
                Typography.default.textLarge,
              ]}>
              {route.params?.restaurant?.rating?.length > 0
                ? route.params?.restaurant?.avg_rating
                : '--'}
            </Text>
          </View>
        </View>
      </View>
    </View>
    <ScrollView
      horizontal={true}
      contentContainerStyle={{flex: 1, width: '100%', height: '100%'}}>
      <FlatList
        showsVerticalScrollIndicator={false}
        style={{
          marginTop: 35,
          paddingBottom: 10,
          backgroundColor: Colors.bg_gray,
        }}
        data={menu}
        scrollEventThrottle={16}
        onLayout={e => {
          setFlatListScrollOffset(e.nativeEvent.layout.y);
          /*             flatListScrollOffset.value = e.nativeEvent.layout.y;
        console.log(flatListScrollOffset); */
        }}
        renderItem={({item, index}) => {
          return (
            <View
              key={index}
              onLayout={handleOnLayout.bind(this, index)}
              style={{
                backgroundColor: Colors.bg_gray,
              }}>
              <Text
                style={[
                  Typography.default[700],
                  Typography.default.headerSmall,
                  Typography.default.black,
                  {
                    marginTop: 10,
                    paddingHorizontal: 10,
                    padding: 10,
                    backgroundColor: '#fff',
                  },
                ]}>
                {item?._id[0]?.name} ({item?.products?.length})
              </Text>
              <FlatList
                showsVerticalScrollIndicator={false}
                data={item?.products}
                renderItem={({item, index}) => {
                  return (
                    /*   <Animated.View entering={FadeIn} exiting={FadeOut}> */
                    <Animated.View
                      entering={FadeIn.duration(300)}
                      key={item?.product?._id}
                      exiting={FadeOut.duration(300)}>
                      <ItemCard data={item} />
                    </Animated.View>

                    /*              </Animated.View> */
                  );
                }}
              />
            </View>
          );
        }}
      />
    </ScrollView>
    <View
      style={{
        height: height / 1.5,
        paddingHorizontal: 15,
        /*  paddingBottom: 70, */
        /*       backgroundColor: 'red', */
      }}>
      <FssaiLogo height={150} width={200} />
      <Text
        style={[
          Typography.default[600],
          Typography.default.secondary,
          Typography.default.textLarge,
        ]}>
        License no: {route.params.restaurant?.fssai?.license_no}
      </Text>
      <View
        style={{
          flexDirection: 'row',
          /*      alignItems: 'center', */
          gap: 5,
          marginTop: 10,
        }}>
        <FontAwesomeIcon
          icon={faDotCircle}
          color={Colors.secondary}
          size={10}
          style={{
            marginTop: 5,
          }}
        />
        <Text style={[Typography.default.black]}>
          All prices are set by the restaurant/store, we do not have any say
          in the price of the product although we request restaurant/store
          to set same price as available offline.
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          /*      alignItems: 'center', */
          gap: 5,
          marginTop: 10,
        }}>
        <FontAwesomeIcon
          icon={faDotCircle}
          color={Colors.secondary}
          size={10}
          style={{
            marginTop: 5,
          }}
        />
        <Text style={[Typography.default.black]}>
          Goat collects a commission of 10% of the order value or Rs.50
          (whichever is lowest) on every order to the Restaurant/store.
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          /*      alignItems: 'center', */
          gap: 5,
          marginTop: 10,
        }}>
        <FontAwesomeIcon
          icon={faDotCircle}
          color={Colors.secondary}
          size={10}
          style={{
            marginTop: 5,
          }}
        />
        <Text style={[Typography.default.black]}>
          Goat doesn't collect any commission from delivery charges, It
          fully goes to the respective delivery partner
        </Text>
      </View>
    </View>
    {/* {DATA?.map((book, index) => {
      return (
        <Text
          style={{
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
          }}>
          {book?.title}
        </Text>
      );
    })} */}
  </Animated.ScrollView>
</>

);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 10,
margin: 0,
},
scrollText: {
fontSize: 19,
textAlign: 'center',
padding: 20,
color: '#000',
},
details_container: {
backgroundColor: '#fff',
padding: 10,
paddingTop: 15,
/* paddingTop: 0, /
backgroundColor: Colors.bg_gray,
/ backgroundColor: 'red', /
},
inner_details_container: {
elevation: 5,
padding: 10,
paddingVertical: 10,
borderRadius: 10,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#94A3B8',
backgroundColor: '#fff',
flexDirection: 'row',
gap: 5,
justifyContent: 'space-between',
/ marginTop: 15, */
marginTop: 5,
},
delivery_container: {
width: '75%',
},
rating_container: {
width: '25%',

height: 100,
alignItems: 'center',
justifyContent: 'center',
gap: 5,
borderRadius: 10,
borderWidth: 1,
borderColor: Colors.lightprimary,

},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
},
arrowUp: {
borderTopWidth: 0,
borderRightWidth: 4,
borderBottomWidth: 8,
borderLeftWidth: 4,
marginTop: -1,
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#8D2729',
borderLeftColor: 'transparent',
},
});
export default FoodStoreDetails;
`

Snack or a link to a repository

Cannot reproduce

Reanimated version

2.14.4

React Native version

0.71

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 4 (Android 11)

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[jagan-blip]

I was not able to reproduce the issue, thus I can produce a snack

[jagan-blip]

Found the issue, The FadeIn and FadeOut api's are causing the issue, The issue was gone when i removed It. How can I use the
FadeIn animation without breaking the app ?

[Latropos]

Hi!
Please see our documentation for instruction on how to use entering animations (https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations). Unfortunately running your code would require creating all the files manually, and we don't offer debugging private apps, except for our sponsors. Hope you understand