React-native-swiper: Swiper is blank on modal

[alainib]

Which OS ?

Android

Version

Which versions are you using:

• react-native-swiper v1.5.13?
• react-native v0.51.0

Actual behaviour

I display a Modal with swiper inside it. I get a blank display, only the button of the swiper but not the content :

Expected behaviour

To show the content of the swiper inside a modal

How to reproduce it>

try it in snack
https://snack.expo.io/rk8rb3ZzM

or my code

    import React, { Component } from "react";
import { Text, View, Modal, Dimensions } from "react-native";
import Swiper from "react-native-swiper"; // 1.5.13
import { Button } from "react-native-elements"; // 0.18.5

import "@expo/vector-icons"; // 6.2.1

var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items:[
        { title: "Hello Swiper", css: thisstyles.slide1 },
        { title: "Beautiful", css: thisstyles.slide2 },
        { title: "simple", css: thisstyles.slide3 },
        { title: "And simple", css: thisstyles.slide3 }
      ],
      modalVisible: false
    };
  }
  componentDidMount() {

  }
  // affiche / cache la modal avec l'image en plein écran
  toggleModalVisible = () => {
    this.setState({ modalVisible: !this.state.modalVisible });
  };

  // vue plein écran avec zoom sans info
  renderFullScreen() {
    if (!this.state.modalVisible) {
      return null;
    }
    return (
      <Modal
        animationType={"slide"}
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => this.toggleModalVisible()}
      >
        <View style={thisstyles.modalFullScreen}>
          <Text>I have component and text here</Text>
          <Swiper style={thisstyles.wrapper} showsButtons={true}>
            {this.state.items.map((item, key) => {
              console.log("item", item);
              return (
                <View key={key} style={item.css}>
                  <Text style={thisstyles.text}>{item.title}</Text>
                </View>
              );
            })}
          </Swiper>
        </View>
      </Modal>
    );
  }

  render() {
    return (
       <Swiper style={thisstyles.wrapper} showsButtons={true}>
            {this.state.items.map((item, key) => {
              console.log("item", item);
              return (
                <View key={key} style={item.css}>
                  <Text style={thisstyles.text}>{item.title}</Text>
                  {this.renderFullScreen()}
                    <Button
                      title="modal"
                      onPress={() => this.toggleModalVisible()}
                      icon={{ name: "close", type: "font-awesome" }}
                    />
                </View>
              );
            })}
          </Swiper>

    );
  }
}

const thisstyles = {
  modalFullScreen: {
    height: height,
    width: width
  },
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#9DD6EB"
  },

  slide2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#97CAE5"
  },

  slide3: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },

  text: {
    color: "black",
    fontSize: 30,
    fontWeight: "bold"
  }
};

Steps to reproduce

1. run the app
2. click on the button "x modal"

[alainib]

no one have an idea please ?

[alenoir]

Set width and heightin Swiper Component fix Android for me.

const { height, width } = Dimensions.get('window');

<Swiper
        ...
        height={height}
        width={width}
      >
    ...
</Swiper>

[alainib]

this doesn't work for me :<
try the snack demo

[okkan]

Same issue here, no slolution yet ?

[marcoizzo]

me too :(

[sunweiyang]

I was able to solve this by delaying render using componentDidMount -- my solution is based on a suggestion by @WhiteClouds2009 plus a small delay (see my comment on #435).

[marcoizzo]

I'm passed on react-native-modalbox, it works like native modal so code changing is very limitated

[SMSwiti]

add style={{flex:1}} to the Modal component

[a3diti]

Fixed it. Check my comment here https://github.com/leecade/react-native-swiper/issues/716#issuecomment-370617689 , works for modal too

[dann1609]

I have this issue on some ios devices (X works but 7 do not). Basically, it looks like modal or swipe need to have a height value. if both have flex, this error will be visible.

[partriv]

Set width and heightin Swiper Component fix Android for me.

const { height, width } = Dimensions.get('window');

<Swiper
        ...
        height={height}
        width={width}
      >
    ...
</Swiper>

this solved the issue of a single image not loading for me.