Problem in dynamic content

[krishbhattacharyya]

Thank you for sharing this.

When I tried to implement this dynamically I got problem.

This is the component ( Within the modal )- <Carousel style={this.props.size} autoplay = {false} currentPage ={this.props.currentPage} > { DynamicContent }</Carousel>

The popup is looks fine with the dynamic content. But it can't able to load the currentPage. And I need only the Carousel not loop. So if it is possible please add option to stop the loop. It will be better.

[phil-r]

@krishbhattacharyya Never thought about such use case, i'll try to add this functionality this week. P.S. PRs are always welcome ;)

[phil-r]

@krishbhattacharyya Also you can disable loop by setting autoplay prop to false

[krishbhattacharyya]

@phil-r ... Thanks.... This is really helpful .... And I know about autoplay.... In { DynamicContent } is a render elements where I have passed array for content display in modal ..... I want to use like a touch slider carousel like facebook multiple images popup.... Already worked for me .... but only two issues left as told this earlier.

[phil-r]

@krishbhattacharyya Can you provide a simple example, illustrating your problem?

[phil-r]

@krishbhattacharyya I've fixed a bunch of bugs today and added a new example with Modal Can you check whether it fixes your problems?

[krishbhattacharyya]

Thanks, I like you .... for temporary this is working fine. Tonight I will share you the demo & there is an error. If you solve this it will be great for me & also you can use in your modal.

[krishbhattacharyya]

Due to some reason I could not upload my code ( Very Soon I upload it ): Please this is my code. Only the issue is - Popup elements render two times. I just want to render this : As per given data.

Thank you.

` /----------------------- Props set -------------/

this.state = { modalVisible: false, initArray: [], index:0 };

/----------------------- function Open close-------------/

showModal = (arr,ind) => { this.setState({ modalVisible: true }); this.setState({initArray: arr}); this.setState({index: ind}); }

hideModal = () => { this.setState({ modalVisible: false }); this.setState({initArray: []}); }

/----------------------- Content element function-------------/

var DynamicContent = this.state.initArray.map(function(list) { return ( <View style={{ flex:1}} key={list.id}> <View style={{flex:1, width:width, alignItems:'center', justifyContent:'center',}}> <Image source={{uri: list.imgUrl}} style={{ width: null, alignSelf: 'stretch', flex: 1, resizeMode: 'contain' }} /> </View> </View> ); });

/----------------------- Modal ------------------------------/ <Modal animationType={'slide'} transparent={false} visible={this.state.modalVisible}

    >
     <TouchableHighlight onPress={this.hideModal} >
      <Text>Hide Modal</Text>
     </TouchableHighlight>
      <Carousel
        delay={2000}
        style={{ flex: 1 }}
        autoplay={false}
        pageInfo
        currentPage={this.state.index}
        onAnimateNextPage={(p) => console.log(p)}
      >

         { DynamicContent }
      </Carousel>
    </Modal>

/----------------------- Calling the array ------------------------------/ <TouchableHighlight onPress={() => this.showModal([ { 'id':'1', 'imgUrl':'http://images.freeimages.com/images/previews/8e8/working-early-3-1514654.jpg', 'pageNo':'1' }, { 'id':'2', 'imgUrl':'http://images.freeimages.com/images/previews/837/medical-06-1455841.jpg', 'pageNo':'2' }, { 'id':'3', 'imgUrl':'http://images.freeimages.com/images/previews/c20/contrasts-1422295.jpg', 'pageNo':'3' }, { 'id':'4', 'imgUrl':'http://images.freeimages.com/images/previews/c47/film-4-1457180.jpg', 'pageNo':'4' }, { 'id':'5', 'imgUrl':'http://images.freeimages.com/images/previews/4ff/glow-tubes-1426203.jpg', 'pageNo':'5' }],3)} > <Text>Show Modal</Text> </TouchableHighlight> <TouchableHighlight onPress={() => this.showModal([ { 'id':'1', 'imgUrl':'http://images.freeimages.com/images/previews/356/goldenhorn-1391126.jpg', 'pageNo':'1' }, { 'id':'2', 'imgUrl':'http://images.freeimages.com/images/previews/a35/the-sea-1362453.jpg', 'pageNo':'2' }, { 'id':'3', 'imgUrl':'http://images.freeimages.com/images/previews/869/duck-1403662.jpg', 'pageNo':'3' }],1)} > <Text>Show Modal2</Text> </TouchableHighlight> `

[krishbhattacharyya]

Sorry for late reply @phil-r . This is my repo... https://github.com/krishbhattacharyya/Modal Everything is working fine except one thing. Images arrays are duplicating when render. Can I stop this? I want to display only images which define on arrays.

[krishbhattacharyya]

Hi @phil-r , I am waiting for your reply. Can you help me to stop the loop?

[stief510]

+1