title: How to properly update a react native swiper component when state changes?
body: <p>I have a react native component that uses <code>react-native-swiper</code> module. One of the slides in the swiper contains text which is set in the component's state. In the component I also have a modal with form that changes the state's text when user tries to save the input data from the modal.</p>
  
  <p>The question is: in my current implementation, every time I saves a new data, the swiper gets dragged to the last slide, and re-render the slides (the process is laggy). So I wonder what's the best way to update the slides more smoothly?</p>
  
  <p>Below is my component:</p>
  
  <pre><code>'use strict';
  
  import React from 'react';
  import { 
    Dimensions, 
    StyleSheet, 
    View, 
    Text, 
    ScrollView,
    AlertIOS,
    AsyncStorage
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import Swiper from 'react-native-swiper';
  import Button from 'react-native-button';
  import { saveName, getName } from '../Utils/dataService';
  import { showAlert } from '../Utils/alert';
  import HeaderSection from './HeaderSection';
  import { styles } from '../Styles/Styles';
  import { renderPagination } from './renderPagination';
  
  class MainView extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: '',
        currIndex: 0
      };
    }
  
    componentDidMount() {
      getName(val =&gt; this.setState({'name': val}));
    }
  
    showInputModal() {
      AlertIOS.prompt(
        'Enter New Doctor Name', null,
        [
          {
            text: 'Save',
            onPress: name =&gt; saveName(name, val =&gt; this.setState({'name': val}))
          },
          { text: 'Cancel', style: 'cancel' }
        ]
      );
    }
  
    render() {
      return (
        &lt;View style={{flex: 1}}&gt;
          &lt;Swiper ref='swiper' onIndexChanged={(index) =&gt; this.setState({'currIndex': index})}&gt;
            &lt;View style={styles.slide}&gt;
              &lt;Text style={styles.text}&gt;Hello {this.state.name}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/Swiper&gt;
          &lt;Button onPress={this.showInputModal.bind(this)}&gt;
            Customize
          &lt;/Button&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default MainView;
  </code></pre>