React Native swiper not working in StackNavigator for IOS

Question

In my app, I have Login Screen, ForgotPassword Screen and SignUp Screen. In SignUp Screen I have used react-native-swiper to displays three step's slides of signup process. And I have wrap-up these screens in StackNavigator and render this StackNavigator as a root component in my App.js.

Here is my StackNavigator :

Router.js

import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';

const AuthStackNavigator = createStackNavigator({
    Login: {
        screen: Login
    },
    ForgotPassword: {
        screen: ForgotPassword
    },
    SignUp: {
        screen: SignUp
    },
});

const Router = createAppContainer(AuthStackNavigator)

export default Router

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';
import Router from './Router';

const store = configureStore()

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router />
            </Provider>            
        );
    }
}

export default App

SignUp.js

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import Colors from '../../config/Colors';
import Logo from '../components/Logo';
import MText from '../components/MText';
import StepButton from '../components/StepButton';
import SignUpStepOne from './SignUpStepOne';
import SignUpStepTwo from './SignUpStepTwo';
import SignUpStepThree from './SignUpStepThree';

class SignUp extends Component {

  static navigationOptions = ({navigation}) => ({
    header: null
  });

  constructor(props) {
    super(props);
    this.state = {
      activeStep: 0
    };
  }

  slideToNext = () => {
    this.swiper.scrollBy(1, true);
    this.setState(prevState => ({
      activeStep: prevState.activeStep + 1
    }))
  }

  slideToPrev = () => {
    this.setState(prevState => ({
      activeStep: prevState.activeStep - 1
    }), () => {
      this.swiper.scrollBy(-1, true);
    })
  }

  render() {
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <View style={{ flex: 1, paddingHorizontal: 10 }}>

          <Logo />

          <Swiper
            style={{
              
            }}
            ref={(swiper) => { this.swiper = swiper; }} 
            containerStyle={{ flex: 1 }}
            showsButtons={false}
            showsPagination={false}
            loop={false}
            scrollEnabled={false}
            onIndexChanged={(activeStep) => {
              this.setState({
                activeStep
              })
            }}
          >
            <SignUpStepOne onNext={this.slideToNext} />
            <SignUpStepTwo onNext={this.slideToNext} onPrev={this.slideToPrev} />
            <SignUpStepThree onNext={this.slideToNext} onPrev={this.slideToPrev} />
          </Swiper>

        </View>
      </KeyboardAvoidingView>
  }
}

But, the problem is that when I navigate from Login screen to SignUp screen using this.props.navigation.navigate('SignUp'), Swiper componen not displaying anything in SignUp screen. It just blank. For android it working properly, For IOS it is not working.

And another thing to note is that If I just render SignUp screen as a root in App.js then it is working properly.

And also If I set SignUp screen as a initial screen in my StackNavigator then also it's working.

Please anyone help me what's going wrong here ?

Answer 1

I Have found the solution.

Add removeClippedSubviews={false} props to swiper. Then It will work.

Answer 2

If Swiper isn't working use these props

removeClippedSubviews={false}
scrollEnabled={true}