title: How to select the center item in a scroll view from a list of items
body: <p>I have 2 scroll views in my app from both of the ScrollViews I should select 1 item each that appears at the center of the scroll and then proceed for my next activity in the code </p>
  
  <p>So how can I do this is there any prop to select the center item at the list </p>
  
  <p>This is my js file which shows 2 ScrollViews:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Image, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import TeamScroll from './TeamScroll';
  
  const a = require('./Images/over3_selected.png');
  const b = require('./Images/over3.png');
  const c = require('./Images/over5_selected.png');
  const d = require('./Images/over5.png');
  const e = require('./Images/over10_selected.png');
  const f = require('./Images/over10.png');
  
   class ChallengeScreen extends Component {
     state = {
       threePressed: false,
       fivePressed: false,
       tenPressed: false
     }
     componentWillMount() {
          this.slide1 = new Animated.Value(0);
          this.slide2 = new Animated.Value(0);
          this.slide3 = new Animated.Value(0);
  
           this.ball1();
           this.ball2();
           this.ball3();
         }
         ball1() {
               Animated.timing(
                 this.slide1, {
                  delay: 100,
                 toValue: -140,
                 duration: 700,
               }
               ).start();
             }
  
         ball2() {
                   Animated.timing(
                     this.slide2, {
                     delay: 200,
                     toValue: -160,
                     duration: 900,
                   }
                   ).start();
                 }
           ball3() {
                       Animated.timing(
                           this.slide3, {
                           delay: 300,
                           toValue: -180,
                           duration: 1100,
                         }
                         ).start();
                         }
  
  
    render() {
    return (
  &lt;Image
      source={require('./Images/bg_inner.png')} style={styles.backgroundStyle}&gt;
  
      &lt;Text style={styles.chooseteamtextStyle}&gt;
      CHOOSE YOUR TEAM
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band1Style}&gt;
      &lt;TeamScroll /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.opponentStyle}&gt;
      YOUR OPPONENT
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band2Style}&gt;
      &lt;TeamScroll /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.overstextStyle}&gt;
      OVERS
      &lt;/Text&gt;
      &lt;View style={styles.viewStyle}&gt;
  
       &lt;TouchableWithoutFeedback
       onPress={() =&gt; playFunc(3, this.props.challenge)}
       onPressIn={() =&gt; {
         this.setState({ threePressed: true });
       }}
       onPressOut={() =&gt; {
         this.setState({ threePressed: false });
       }}
       &gt;
      &lt;Animated.Image source={this.state.threePressed ? a : b}
      style={[styles.over3Style, { transform: [{ translateY: this.slide1 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; playFunc(5, this.props.challenge)}
      onPressIn={() =&gt; {
        this.setState({ fivePressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ fivePressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.fivePressed ? c : d}
      style={[styles.over5Style, { transform: [{ translateY: this.slide2 }] }]} /&gt;
  &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; playFunc(10, this.props.challenge)}
      onPressIn={() =&gt; {
        this.setState({ tenPressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ tenPressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.tenPressed ? e : f}
      style={[styles.over10Style, { transform: [{ translateY: this.slide3 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;/View&gt;
  &lt;/ Image&gt;
  );
  }
  }
  function playFunc(num, param) {
  if (num === 3 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 5 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 10 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 3 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  else if (num === 5 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  else if (num === 10 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  }
  const styles = {
    viewStyle: {
  
      flexDirection: 'row',
      justifyContent: 'flex-start'
    },
  backgroundStyle: {
     flex: 1,
     width: undefined,
     height: undefined,
     flexWrap: 'wrap',
  
   },
   chooseteamtextStyle: {
   textAlign: 'center',
     marginTop: 80,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-14deg' }]
   },
   band1Style: {
   marginTop: -10,
  resizeMode: 'stretch',
  width: 380,
  height: 150,
   },
   opponentStyle: {
     textAlign: 'center',
     marginTop: -10,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   band2Style: {
  resizeMode: 'stretch',
  marginTop: -10,
  width: 380,
  height: 150,
   },
   overstextStyle: {
     textAlign: 'center',
     bottom: 10,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   over3Style: {
     flexDirection: 'row',
  alignItems: 'flex-start',
  width: 80,
  height: 80,
  top: 170,
  left: 70,
   },
   over5Style: {
     flexDirection: 'row',
  alignItems: 'center',
  width: 80,
  height: 80,
  bottom: -170,
  left: 70
   },
   over10Style: {
     flexDirection: 'row',
  alignItems: 'flex-end',
  width: 80,
  height: 80,
   top: 170,
  right: -70
   }
   };
  export default ChallengeScreen;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is the js file where I have applied ScrollView:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Image, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import TeamScroll from './TeamScroll';
  
  const a = require('./Images/over3_selected.png');
  const b = require('./Images/over3.png');
  const c = require('./Images/over5_selected.png');
  const d = require('./Images/over5.png');
  const e = require('./Images/over10_selected.png');
  const f = require('./Images/over10.png');
  
   class ChallengeScreen extends Component {
     state = {
       threePressed: false,
       fivePressed: false,
       tenPressed: false
     }
     componentWillMount() {
    this.slide1 = new Animated.Value(0);
    this.slide2 = new Animated.Value(0);
    this.slide3 = new Animated.Value(0);
  
    this.ball1();
    this.ball2();
    this.ball3();
    }
   ball1() {
   Animated.timing(
   this.slide1, {
   delay: 100,
   toValue: -140,
   duration: 700,
   }
   ).start();
   }
  
   ball2() {
  Animated.timing(
   this.slide2, {
   delay: 200,
   toValue: -160,
  duration: 900,
  }
   ).start();
  }
   ball3() {
   Animated.timing(
     this.slide3, {
   delay: 300,
   toValue: -180,
   duration: 1100,
   }
   ).start();
   }
  
  
    render() {
    return (
  &lt;Image
      source={require('./Images/bg_inner.png')} style={styles.backgroundStyle}&gt;
  
      &lt;Text style={styles.chooseteamtextStyle}&gt;
      CHOOSE YOUR TEAM
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band1Style}&gt;
      &lt;TeamScroll /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.opponentStyle}&gt;
      YOUR OPPONENT
      &lt;/Text&gt;
      &lt;Image source={require('./Images/team-logo-band.png')} style={styles.band2Style}&gt;
      &lt;TeamScroll /&gt;
      &lt;/Image&gt;
  
      &lt;Text style={styles.overstextStyle}&gt;
      OVERS
      &lt;/Text&gt;
      &lt;View style={styles.viewStyle}&gt;
  
       &lt;TouchableWithoutFeedback
       onPress={() =&gt; playFunc(3, this.props.challenge)}
       onPressIn={() =&gt; {
         this.setState({ threePressed: true });
       }}
       onPressOut={() =&gt; {
         this.setState({ threePressed: false });
       }}
       &gt;
      &lt;Animated.Image source={this.state.threePressed ? a : b}
      style={[styles.over3Style, { transform: [{ translateY: this.slide1 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; playFunc(5, this.props.challenge)}
      onPressIn={() =&gt; {
        this.setState({ fivePressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ fivePressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.fivePressed ? c : d}
      style={[styles.over5Style, { transform: [{ translateY: this.slide2 }] }]} /&gt;
  &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;TouchableWithoutFeedback
      onPress={() =&gt; playFunc(10, this.props.challenge)}
      onPressIn={() =&gt; {
        this.setState({ tenPressed: true });
      }}
      onPressOut={() =&gt; {
        this.setState({ tenPressed: false });
      }}&gt;
      &lt;Animated.Image source={this.state.tenPressed ? e : f}
      style={[styles.over10Style, { transform: [{ translateY: this.slide3 }] }]} /&gt;
      &lt;/ TouchableWithoutFeedback&gt;
  
      &lt;/View&gt;
  &lt;/ Image&gt;
  );
  }
  }
  function playFunc(num, param) {
  if (num === 3 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 5 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 10 &amp;&amp; param === 'Computer') {
    Actions.screen4();
  }
  else if (num === 3 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  else if (num === 5 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  else if (num === 10 &amp;&amp; param === 'Team') {
    Actions.screen3();
  }
  }
  const styles = {
    viewStyle: {
  
      flexDirection: 'row',
      justifyContent: 'flex-start'
    },
  backgroundStyle: {
     flex: 1,
     width: undefined,
     height: undefined,
     flexWrap: 'wrap',
  
   },
   chooseteamtextStyle: {
   textAlign: 'center',
     marginTop: 80,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-14deg' }]
   },
   band1Style: {
   marginTop: -10,
  resizeMode: 'stretch',
  width: 380,
  height: 150,
   },
   opponentStyle: {
     textAlign: 'center',
     marginTop: -10,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   band2Style: {
  resizeMode: 'stretch',
  marginTop: -10,
  width: 380,
  height: 150,
   },
   overstextStyle: {
     textAlign: 'center',
     bottom: 10,
     fontSize: 20,
     color: 'white',
     fontFamily: 'Switzerland-Cond-Black-Italic',
     transform: [{ rotate: '-15deg' }]
   },
   over3Style: {
     flexDirection: 'row',
  alignItems: 'flex-start',
  width: 80,
  height: 80,
  top: 170,
  left: 70,
   },
   over5Style: {
     flexDirection: 'row',
  alignItems: 'center',
  width: 80,
  height: 80,
  bottom: -170,
  left: 70
   },
   over10Style: {
     flexDirection: 'row',
  alignItems: 'flex-end',
  width: 80,
  height: 80,
   top: 170,
  right: -70
   }
   };
  export default ChallengeScreen;</code></pre>
  </div>
  </div>
  </p>
  
  <p>TeamScroll.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { ScrollView, View, Image } from 'react-native';
  
  class TeamScroll extends Component {
    render() {
      return (
  &lt;ScrollView
  horizontal
  style={styles.scrollViewStyle}
      showsHorizontalScrollIndicator={false}&gt;
    &lt;View style={styles.viewStyle}&gt;
  
      &lt;View style={styles.cheStyle}&gt;
        &lt;Image
         source={require('./Images/logo-chepauk.png')}
         style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.dinStyle}&gt;
        &lt;Image
         source={require('./Images/logo-dindigul.png')}
        style={styles.logoStyle}  /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.kanStyle}&gt;
        &lt;Image
         source={require('./Images/logo-kanchi.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.karStyle}&gt;
        &lt;Image
         source={require('./Images/logo-karaikudi.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.kovStyle}&gt;
        &lt;Image
         source={require('./Images/logo-kovai.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.madStyle}&gt;
        &lt;Image
         source={require('./Images/logomadurai.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.thiStyle}&gt;
        &lt;Image
         source={require('./Images/logothiruvallur.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.tutStyle}&gt;
        &lt;Image
         source={require('./Images/logotuti.png')}
        style={styles.logoStyle} /&gt;
      &lt;/View&gt;
  
    &lt;/View&gt;
  &lt;/ScrollView&gt;
  
      );
    }
  }
  const styles = {
  viewStyle: {
   flexDirection: 'row',
   justifyContent: 'space-around',
  // position: 'relative',
   transform: [{ rotate: '-4deg' }]
  },
  
  logoStyle: {
    width: 90,
    height: 90,
    position: 'relative',
    marginLeft: 10,
    marginRight: 30,
    marginTop: 20
  },
  cheStyle: {
    bottom: 20,
  transform: [{ rotate: '16deg' }]
  },
  dinStyle: {
    bottom: 15,
    transform: [{ rotate: '16deg' }]
  },
  kanStyle: {
    marginTop: -5,
    transform: [{ rotate: '16deg' }]
  },
  karStyle: {
    top: 10,
    transform: [{ rotate: '17deg' }]
  },
  kovStyle: {
    top: 10,
    transform: [{ rotate: '16deg' }]
  },
  madStyle: {
    marginTop: 25,
    transform: [{ rotate: '16deg' }]
  },
  thiStyle: {
    marginTop: 35,
    transform: [{ rotate: '16deg' }]
  },
  tutStyle: {
    marginTop: 45,
    transform: [{ rotate: '16deg' }]
  },
  scrollViewStyle: {
    transform: [{ rotate: '-12deg' }]
  }
  };
  export default TeamScroll;</code></pre>
  </div>
  </div>
  </p>