From eb2b7b6712069b989430fe7df36bc741b2196a4e Mon Sep 17 00:00:00 2001
From: artem <artexoid@gmail.com>
Date: Tue, 10 Jul 2018 19:15:52 +0300
Subject: [PATCH] Fixed problem with property selectedIndex="0". Property
 renderItem now works. Little fixes.

---
 index.js | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 8c7f166..f521d1a 100644
--- a/index.js
+++ b/index.js
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import {
   View,
   ScrollView,
-  Dimensions,
   Platform,
 } from 'react-native';
 import PropTypes from 'prop-types';
@@ -16,6 +15,7 @@ const Container = styled.View`
   width: ${props => props.wrapperWidth};
   background-color: ${props => props.wrapperBackground};
 `;
+
 export const HighLightView = styled.View`
   position: absolute;
   top: ${props => (props.wrapperHeight - props.itemHeight) / 2};
@@ -26,33 +26,39 @@ export const HighLightView = styled.View`
   border-top-width: ${props => props.highlightBorderWidth}px;
   border-bottom-width: ${props => props.highlightBorderWidth}px;
 `;
+
 export const SelectedItem = styled.View`
   height: 30px;
   justify-content: center;
   align-items: center;
   height: ${props => props.itemHeight};
 `;
+
 export const ItemText = styled.Text`
   color: ${props => props.color};
   font-size: 20px;
   line-height: 26px;
   text-align: center;
 `;
-const deviceWidth = Dimensions.get('window').width;
+
 export default class ScrollPicker extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+
     this.onMomentumScrollBegin = this.onMomentumScrollBegin.bind(this);
     this.onMomentumScrollEnd = this.onMomentumScrollEnd.bind(this);
     this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this);
     this.onScrollEndDrag = this.onScrollEndDrag.bind(this);
+
+    this.renderItem = (this.props.renderItem || this.renderItemDefault).bind(this);
+
     this.state = {
       selectedIndex: 1,
     }
   }
 
   componentDidMount() {
-    if (this.props.selectedIndex) {
+    if (this.props.selectedIndex !== undefined) {
       setTimeout(() => {
         this.scrollToIndex(this.props.selectedIndex);
       }, 0);
@@ -67,6 +73,7 @@ export default class ScrollPicker extends React.Component {
 
   render() {
     const { header, footer } = this.renderPlaceHolder();
+
     return (
       <Container wrapperHeight={this.props.wrapperHeight} wrapperWidth={this.props.wrapperWidth} wrapperBackground={this.props.wrapperBackground}>
         <HighLightView highlightColor={this.props.highlightColor}
@@ -87,7 +94,7 @@ export default class ScrollPicker extends React.Component {
           onScrollEndDrag={this.onScrollEndDrag}
         >
           {header}
-          {this.props.dataSource.map(this.renderItem.bind(this))}
+          {this.props.dataSource.map(this.renderItem)}
           {footer}
         </ScrollView>
       </Container>
@@ -101,9 +108,9 @@ export default class ScrollPicker extends React.Component {
     return { header, footer };
   }
 
-  renderItem(data, index) {
+  renderItemDefault(data, index) {
     const isSelected = index === this.state.selectedIndex;
-    const item = <ItemText color={isSelected ? this.props.activeItemColor : this.props.itemColor}>{data}</ItemText>;
+    const item = <ItemText color={isSelected === true ? this.props.activeItemColor : this.props.itemColor}>{data}</ItemText>;
 
     return (
       <SelectedItem key={index} itemHeight={this.props.itemHeight}>
@@ -139,6 +146,7 @@ export default class ScrollPicker extends React.Component {
       this.props.onValueChange(selectedValue, selectedIndex);
     }
   }
+
   onScrollBeginDrag() {
     this.dragStarted = true;
     if (Platform.OS === 'ios') {
@@ -148,6 +156,7 @@ export default class ScrollPicker extends React.Component {
       clearTimeout(this.timer);
     }
   }
+
   onScrollEndDrag(e) {
     this.props.onScrollEndDrag();
     this.dragStarted = false;
@@ -171,12 +180,14 @@ export default class ScrollPicker extends React.Component {
       10,
     );
   }
+
   onMomentumScrollBegin() {
     this.momentumStarted = true;
     if (this.timer) {
       clearTimeout(this.timer);
     }
   }
+
   onMomentumScrollEnd(e) {
     this.props.onMomentumScrollEnd();
     this.momentumStarted = false;
@@ -193,6 +204,7 @@ export default class ScrollPicker extends React.Component {
     this.sview.scrollTo({ y });
   }
 }
+
 ScrollPicker.propTypes = {
   style: PropTypes.object,
   dataSource: PropTypes.array,
@@ -211,13 +223,14 @@ ScrollPicker.propTypes = {
   onMomentumScrollEnd: PropTypes.func,
   onScrollEndDrag: PropTypes.func,
 };
+
 ScrollPicker.defaultProps = {
   dataSource: [1, 2, 3],
   itemHeight: 60,
   wrapperBackground: '#FFFFFF',
   wrapperHeight: 180,
   wrapperWidth: 150,
-  highlightWidth: deviceWidth,
+  highlightWidth: '100%',
   highlightBorderWidth: 2,
   highlightColor: '#333',
   activeItemColor: '#222121',