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 ?
I Have found the solution.
Add removeClippedSubviews={false}
props to swiper. Then It will work.