From 2dff75f755ecbc1d7569fe17930ac4d975f9ef63 Mon Sep 17 00:00:00 2001
From: bairock <bairock@live.ru>
Date: Fri, 10 May 2019 16:05:33 +0900
Subject: [PATCH 1/3] Update index.js

fix index 0
---
 index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index f2a3753..5fbe99d 100644
--- a/index.js
+++ b/index.js
@@ -47,7 +47,7 @@ export default class ScrollPicker extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.selectedIndex) {
+    if (this.props.selectedIndex !== null) {
       this.scrollToIndex(this.props.selectedIndex);
     }
   }
@@ -230,4 +230,4 @@ ScrollPicker.defaultProps = {
   },
   itemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#B4B4B4'},
   activeItemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#222121'}
-};
\ No newline at end of file
+};

From aa5c02b39ea43a2be58c4bd2de932e65ea55e2f4 Mon Sep 17 00:00:00 2001
From: bairock <bairock@live.ru>
Date: Fri, 10 May 2019 16:29:02 +0900
Subject: [PATCH 2/3] purification (removing styled-components)

purification (removing styled-components)
---
 index.js | 93 +++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 55 insertions(+), 38 deletions(-)

diff --git a/index.js b/index.js
index 5fbe99d..8cd308e 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import {
   View,
   Text,
@@ -9,30 +8,48 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 
-const Container = styled.View`
-  height: ${props => props.wrapperHeight};
-  flex: 1;
-  overflow: hidden;
-  align-self: center;
-  width: ${props => props.wrapperWidth};
-  background-color: ${props => props.wrapperBackground};
-`;
-export const HighLightView = styled.View`
-  position: absolute;
-  top: ${props => (props.wrapperHeight - props.itemHeight) / 2};
-  height: ${props => props.itemHeight};
-  width: ${props => props.highlightWidth};
-  border-top-color: ${props => props.highlightColor};
-  border-bottom-color: ${props => props.highlightColor};
-  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};
-`;
+const Container = props => {
+  const style = {
+    height: props.wrapperHeight,
+    flex: 1,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    width: props.wrapperWidth,
+    backgroundColor: props.wrapperBackground
+  }
+  return (
+    <View style={style}>
+      {props.children}
+    </View>
+  )
+};
+
+export const HighLightView = props => {
+  return <View style={{
+    position: 'absolute',
+    top: (props.wrapperHeight - props.itemHeight) / 2,
+    height: props.itemHeight,
+    width: props.highlightWidth,
+    borderTopColor: props.highlightColor,
+    borderBottomColor: props.highlightColor,
+    borderTopWidth: props.highlightBorderWidth,
+    borderBottomWidth: props.highlightBorderWidth
+  }} />
+};
+
+export const SelectedItem = props => {
+  const style = {
+    height: props.itemHeight,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+  return (
+    <View style={style}>
+      {props.children}
+    </View>
+  )
+}
+
 const deviceWidth = Dimensions.get('window').width;
 export default class ScrollPicker extends React.Component {
   constructor() {
@@ -59,15 +76,15 @@ export default class ScrollPicker extends React.Component {
   }
 
   render() {
-    const {header, footer} = this.renderPlaceHolder();
+    const { header, footer } = this.renderPlaceHolder();
     return (
       <Container wrapperHeight={this.props.wrapperHeight} wrapperWidth={this.props.wrapperWidth}
-                 wrapperBackground={this.props.wrapperBackground}>
+        wrapperBackground={this.props.wrapperBackground}>
         <HighLightView highlightColor={this.props.highlightColor}
-                       highlightWidth={this.props.highlightWidth}
-                       wrapperHeight={this.props.wrapperHeight}
-                       itemHeight={this.props.itemHeight}
-                       highlightBorderWidth={this.props.highlightBorderWidth}/>
+          highlightWidth={this.props.highlightWidth}
+          wrapperHeight={this.props.wrapperHeight}
+          itemHeight={this.props.itemHeight}
+          highlightBorderWidth={this.props.highlightBorderWidth} />
         <ScrollView
           ref={(sview) => {
             this.sview = sview;
@@ -90,9 +107,9 @@ export default class ScrollPicker extends React.Component {
 
   renderPlaceHolder() {
     const height = (this.props.wrapperHeight - this.props.itemHeight) / 2;
-    const header = <View style={{height, flex: 1}}></View>;
-    const footer = <View style={{height, flex: 1}}></View>;
-    return {header, footer};
+    const header = <View style={{ height, flex: 1 }}></View>;
+    const footer = <View style={{ height, flex: 1 }}></View>;
+    return { header, footer };
   }
 
   renderItem(data, index) {
@@ -120,7 +137,7 @@ export default class ScrollPicker extends React.Component {
         this.isScrollTo = true;
       }
       if (this.sview) {
-        this.sview.scrollTo({y: verticalElem});
+        this.sview.scrollTo({ y: verticalElem });
       }
     }
     if (this.state.selectedIndex === selectedIndex) {
@@ -192,7 +209,7 @@ export default class ScrollPicker extends React.Component {
     const y = this.props.itemHeight * ind;
     setTimeout(() => {
       if (this.sview) {
-        this.sview.scrollTo({y});
+        this.sview.scrollTo({ y });
       }
     }, 0);
   }
@@ -228,6 +245,6 @@ ScrollPicker.defaultProps = {
   },
   onScrollEndDrag: () => {
   },
-  itemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#B4B4B4'},
-  activeItemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#222121'}
+  itemTextStyle: { fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#B4B4B4' },
+  activeItemTextStyle: { fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#222121' }
 };

From c2d87e1933a817ce987081732c05c61a8167aa95 Mon Sep 17 00:00:00 2001
From: bairock <bairock@live.ru>
Date: Fri, 10 May 2019 16:29:28 +0900
Subject: [PATCH 3/3] Update index.js

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 8cd308e..de69717 100644
--- a/index.js
+++ b/index.js
@@ -48,7 +48,7 @@ export const SelectedItem = props => {
       {props.children}
     </View>
   )
-}
+};
 
 const deviceWidth = Dimensions.get('window').width;
 export default class ScrollPicker extends React.Component {