Added animation to dropdown

lib/items.js

@@ -7,9 +7,12 @@ const {
   View,
   ScrollView,
   TouchableWithoutFeedback,
-  Text
+  Text,
+  Easing,
+  Animated
 } = React;
 
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 const window = Dimensions.get('window');
 
 const styles = StyleSheet.create({
@@ -19,14 +22,27 @@ const styles = StyleSheet.create({
   },
   container: {
     borderColor: '#BDBDC1',
-    borderWidth: 2 / window.scale,
+    borderWidth: 1,
     backgroundColor : "#ffffff"
   }
-})
+});
 
 class Items extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      height : new Animated.Value(0)
+    };
+  }
+
+  componentDidMount() {
+    const { height } = this.props;
+
+    Animated.timing(this.state.height, {
+        toValue: height * 3,
+        duration: 200,
+        easing :  Easing.linear
+    }).start();
   }
 
   render() {
@@ -40,21 +56,21 @@ class Items extends Component {
 
       return (
         <TouchableWithoutFeedback onPress={() => onPress(item.props.children, item.props.value) }>
-          <View style={{ padding: 10 }}>
-            <Text>{item.props.children}</Text>
+          <View>
+            {item}
           </View>
         </TouchableWithoutFeedback>
       );
     });
 
     return (
       <View style={[styles.container]}>
-        <ScrollView
-          style={{ width: width - 2, height: height * 3 }}
+        <AnimatedScrollView
+          style={{ width: width - 2, height: this.state.height }}
           automaticallyAdjustContentInsets={false}
           bounces={false}>
           {renderedItems}
-        </ScrollView>
+        </AnimatedScrollView>
       </View>
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-selectme",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A better Select dropdown menu for react-native",
   "main": "lib/index.js",
   "scripts": {