May 7, 2022
0
Level 8
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?
Please or to participate in this conversation.