some package not working when render inside the modal

[FatmaMahmoud698]

react-native-snap-carousel and react-native-range-slider-expo stuck when using inside the modal
I had two component inside the modal that not slide
my code

import { Modal, SlideAnimation } from 'react-native-modals';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import RangeSlider from 'react-native-range-slider-expo';
        return (
            <View>
                <Modal
                    visible={this.props.productModal}
                    modalAnimation={new SlideAnimation({
                        slideFrom: 'left',
                    })}
                    onTouchOutside={this.props.closeModel}
                    transparent={true}
                    style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.69)',
                        justifyContent: 'center'
                    }}
                    width={0.9}
                >
                    <View style={styles.modalContainer}>

                        <TouchableOpacity style={{ marginTop: 10, alignItems: 'center' }}
                            onPress={this.props.showGallery}
                        >
                            <Carousel
                                ref={this.props.isCarousel}
                                data={this.props.showProductImages}
                                renderItem={CarouselCardItem}
                                sliderWidth={SLIDER_WIDTH}
                                itemWidth={ITEM_WIDTH}
                                onSnapToItem={(index) => this.props.setIndex(index)}
                                useScrollView={true}
                                removeClippedSubviews={false}
                                loop={true}
                                contentContainerCustomStyle={{ alignItems: 'center' }}
                                scrollEnabled={true}
                                activeSlideAlignment="center"
                                autoplay={true}  
                                loopClonesPerSide={3}                              
                                slideStyle={{borderRadius: 20, overflow: 'hidden'}}
                            />
                            <Pagination
                                dotsLength={this.props.showProductImages.length}
                                activeDotIndex={this.props.index}
                                carouselRef={this.props.isCarousel}
                                dotStyle={{
                                    width: 10,
                                    height: 10,
                                    borderRadius: 5,
                                    marginHorizontal: 0,
                                    backgroundColor: '#345DFF'
                                }}
                                inactiveDotOpacity={0.4}
                                inactiveDotScale={0.6}
                            />
                        </TouchableOpacity>
                     <RangeSlider min={this.props.startValue} max={this.props.endValue}
                        fromValueOnChange={value => this.props.fromValue(value)}
                        toValueOnChange={value => this.props.toValue(value)}
                        initialFromValue={this.props.initialValue}
                        initialToValue={this.props.initialToValue}
                        styleSize={30}
                        fromKnobColor="#E95328"
                        toKnobColor="#E95328"
                        inRangeBarColor="#E95328"
                        step={this.props.step}
                        showRangeLabels={false}
                        showValueLabels={false}
                    />
                    </View>
                </Modal>
            </View>
        );

the ranger is not working on both android and IOS and the carousel not working on IOS
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.64.3",
"react-native-modals": "^0.22.3",
"react-native-snap-carousel": "^3.9.1",
"react-native-range-slider-expo": "^1.4.0",