Gabotronix's avatar

React Native: render String/Instance of component name into component

Hi everybody, in my react-native app I want to render a component by its string name or by an instance of it!

I want to dinamically load items for snap-carousel, I tried

import CarouselItem1 from '@components/cards/CarouselItem1';

const [ ads, setAds ] = useState([ 
        {id:1,component:CarouselItem1 },
        {id:2,component:CarouselItem1},
        {id:3,component:CarouselItem1}, 
    ]);

I also tried using string instead, like: 'CarouselItem1' but I get error strings must be rendered inside a Text component.

<Carousel loop={true} autoplay={true} autoplayDelay={1000} autoplayInterval={10000} firstItem={0} onSnapToItem={slideIndex => {  setActiveSlide(slideIndex) }} enableSnap data={ads} renderItem={({ item }) => 
                <TouchableOpacity key={item.id} style={{ width:'100%',borderWidth:0,height:250,position:'relative',borderRadius:25,overflow:'hidden',marginBottom:15}}>
                       
                        {item.component}
                       
                    </TouchableOpacity>}
                             
                             sliderHeight={225} itemHeight={225} itemWidth={uiStore.width-30} vertical={false} sliderWidth={uiStore.width}/>

Is it possible to get this to work?

0 likes
0 replies

Please or to participate in this conversation.