render is overlapping with previous screen data

[prashanthmadi]

Version

Tell us which versions you are using:
"react-native": "0.41.2",
"react-native-router-flux": "^3.37.0",

Expected behaviour

I'm trying to display a list of students if they exists else it would say Add a new student in component.

For some reason i see both of them with the code i have below.. I might be missing something simple here..

  Actions.drawer({key: 'manageStudent', type: 'replace'});

i tried different type's still couldn't figure it out.

Actual behaviour

Steps to reproduce

   <Router>
          <Scene key="root">
              <Scene key="loginScreen" component={LoginScreen} animation='fade' hideNavBar={true} initial={true}/>
              <Scene key="drawer" component={NavigationDrawer} open={false} >
                  <Scene key="manageStudent" component={ManageStudent} animation='fade' hideNavBar={true} />

            </Scene>
          </Scene>
      </Router>

 Parse.User.logIn(values.username, values.password, {
            success: function(user) {
                    Actions.drawer({key: 'manageStudent', type: 'replace'});
            },
            error: function(user, error) {
                console.warn(JSON.stringify(error));
            }
          });

/* @flow */

import React, {Component} from 'react';
import {
    View,
    Text,
    ListView,
    StyleSheet,
    ScrollView,
} from 'react-native';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {ActionCreators} from '../actions'

import Header from '../components/common/Header';
import Wallpaper from '../components/common/Wallpaper';
import hamburgerImg from '../assets/images/hamburger.png';
import UserListItem from '../components/common/UserListItem';
import AppColors from 'AppColors';
import FABButton from '../components/navigation/FABButton';


class ManageStudent extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.getStudentsList();
    }

    render() {
        const {studentsList} = this.props;
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        if (studentsList && studentsList.length !== 0) {
            return (
                <Wallpaper>
                    <Header title="Manage Students" source={hamburgerImg}/>
                    <View style={styles.container}>
                        <ListView dataSource={ds.cloneWithRows(studentsList)}
                            renderRow={(rowData) => <UserListItem student={rowData} />}
                        />
                        <FABButton/>
                    </View>
                </Wallpaper>
            );
         }
         else{
              return (
                  <Wallpaper>
                    <Header title="Manage Students" source={hamburgerImg}/>
                    <View style={styles.container}>
                        <Text>Add New Student</Text>
                        <FABButton/>
                    </View>
                </Wallpaper>
              )
         }

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 50
    },
});

function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
}

export default connect((state) => {
    return {
        studentsList: state.studentsList
    }
}, mapDispatchToProps)(ManageStudent);