Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dynamic+static swiper

See original GitHub issue

I have a weird issue trying to use dynamic&static content in Swiper. Im not able to use both approaches to create the result I need.

My code is:

<Swiper horizontal={false}>
          <View> ...View 1 (static header)...</View>
          {this.items.map((item, key) => {
             return (
                  <View key={key} style={styles.slide1}>
                     <Text>bla bla</Text>
                  </View>
             )
            });
          }
          <View> ... View 3 (static footer) ...</View>
</Swiper>

This will produce something like:

View 1 (static header) / View 2 --> Contains 4 childviews where each view take 1/4 of the screen / View 3 (static footer)

On the other hand, if I delete header and footer and I leave the map function alone I will see the 4 views I’m expecting… any idea?

Thanks! Juan

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:26

Top GitHub Comments

3reactions

juanluisgv1commented, Sep 19, 2016

I had the same issue. I needed to create an array of views so I guess you could do sth like this:

this.toRender = [];
this.journeyData.steps.map(function(current, index) {
        this.toRender.push( () => return (<View key={index}>
          <Text style={{textAlign:'center', 'color':'#fff', fontSize:20,marginBottom:20}}>Route Step #{current.id}</Text>
        </View>))
      });

3reactions

getnashtycommented, Sep 2, 2016

Hi Juan,

Your options are to give each slide their own header/footer (swiper may need custom styles for this to work, or place the header/footer with absolute positioning):

<Swiper horizontal={false}>
          {this.items.map((item, key) => {
             return (
                  <View>
                    <View> ...View 1 (static header)...</View>
                    <View key={key} style={styles.slide1}>
                       <Text>bla bla</Text>
                    </View>
                    <View> ... View 3 (static footer) ...</View>
                  </View>
             )
            });
          }
</Swiper>

or, wrap the swiper in the header / footer:

<View style={{flex:1, flexDirection:'column'}}>
    <View> ...View 1 (static header)...</View>
    <Swiper horizontal={false}>
          {this.items.map((item, key) => {
             return (
                  <View key={key} style={styles.slide1}>
                     <Text>bla bla</Text>
                  </View>
             )
            });
          }
    </Swiper>
    <View> ... View 3 (static footer) ...</View>
</View>