diff --git a/index.js b/index.js
index 535fb3d..24ebaf3 100644
--- a/index.js
+++ b/index.js
@@ -4,7 +4,6 @@ import {
   View,
   Text,
   ScrollView,
-  Dimensions,
   Platform,
 } from 'react-native';
 import PropTypes from 'prop-types';
@@ -17,6 +16,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};
@@ -27,28 +27,42 @@ 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};
 `;
-const deviceWidth = Dimensions.get('window').width;
+
+export const ItemText = styled.Text`
+  color: ${props => props.color};
+  font-size: 20px;
+  line-height: 26px;
+  text-align: center;
+`;
+
 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 (typeof this.props.selectedIndex !== 'undefined') {
-      this.scrollToIndex(this.props.selectedIndex);
+    if (this.props.selectedIndex !== undefined) {
+      setTimeout(() => {
+        this.scrollToIndex(this.props.selectedIndex);
+      }, 0);
     }
   }
 
@@ -59,7 +73,8 @@ 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}>
@@ -81,7 +96,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>
@@ -95,9 +110,10 @@ export default class ScrollPicker extends React.Component {
     return {header, footer};
   }
 
-  renderItem(data, index) {
+  renderItemDefault(data, index) {
     const isSelected = index === this.state.selectedIndex;
-    const item = <Text style={isSelected ? this.props.activeItemTextStyle : this.props.itemTextStyle}>{data}</Text>;
+
+    const item = <ItemText color={isSelected === true ? this.props.activeItemColor : this.props.itemColor}>{data}</ItemText>;
 
     return (
       <SelectedItem key={index} itemHeight={this.props.itemHeight}>
@@ -197,6 +213,7 @@ export default class ScrollPicker extends React.Component {
     }, 0);
   }
 }
+
 ScrollPicker.propTypes = {
   style: PropTypes.object,
   dataSource: PropTypes.array,
@@ -215,13 +232,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',
   onMomentumScrollEnd: () => {