react-native Swiper is blank inside a modal

Question

i use react-native and react-native-swiper

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>

I tryed to reproduce the bug with a very simplified version of my code

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"

Answer 1

I had to add a delay to get mine to work, but yes it works!

  constructor(props) {
    super(props);
    this.state = { showSwiper: false };
  }

  componentDidMount() {
    // Must use this 100-ms delayed swiper workaround to render on Android properly
    setTimeout(() => {
      this.setState({showSwiper: true});
    }, 100);
  }

  render() {
    var exampleSwiper = (
      <Swiper activeDotColor={'white'} loop={false} >
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
      </Swiper>
    );
    return (
      <Modal presentationStyle={'overFullScreen'}>
        {this.state.showSwiper ? exampleSwiper : null}
      </Modal>
    );
  }

Answer 2

Create one parent View tag and set its height based on your requirement. For example:

<View style={{height:'50%'}}>
    <Swiper {....}    />
</View>