refactored look and feel

Author: tristola

App/Components/Song.js

@@ -1,15 +1,19 @@
 import React from 'react'
-import { TouchableOpacity, Text } from 'react-native'
+import { TouchableOpacity, Text, View } from 'react-native'
 import styles from './Styles/SongStyle'
 import { getFormattedTime } from '../Lib/TimeLib'
+import { List, ListItem, Avatar } from 'react-native-elements'
 
 const Song = ({song, file, onPress}) => (
-  <TouchableOpacity onPress={onPress} style={styles.container}>
-    <Text style={styles.text}>{song.genre}</Text>
-    <Text style={styles.text}>{song.artist}</Text>
-    <Text style={styles.text}>{song.title}</Text>
-    <Text style={styles.text}>{getFormattedTime(song.duration)}</Text>
-  </TouchableOpacity>
+  <ListItem
+    avatar={<Avatar small rounded title={song.genre.substring(0,2).toUpperCase()} activeOpacity={0.7} />}
+    onPress={() => onPress()}
+    key={song.title}
+    rightIcon={<View/>}
+    badge={{value: getFormattedTime(song.duration)}}
+    title={`Artist:${song.artist} title:${song.title}`}
+    subtitle={`${song.genre}:${getFormattedTime(song.duration)}`}
+  />
 )
 
 export default Song

App/Components/Styles/SongStyle.js

@@ -5,7 +5,9 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    paddingTop: Metrics.baseMargin
+    paddingTop: Metrics.baseMargin,
+    borderBottomColor: 'rgba(0, 0, 0, 1)',
+    borderBottomWidth: StyleSheet.hairlineWidth
   },
   text: {
     flex: 1,

App/Containers/MusicPlayerScreen.js

@@ -5,11 +5,35 @@ import { connect } from 'react-redux'
 import styles from './Styles/MusicPlayerScreenStyle'
 import PlayerArea from '../Containers/PlayerArea'
 import Filter from './../Components/Filter'
+import { SearchBar } from 'react-native-elements'
+import R from 'ramda'
+
 class MusicPlayer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      searchTerm: '',
+      currentlyDisplayed: []
+    }
+  }
+  componentWillReceiveProps(props){
+    this.setState({currentlyDisplayed: props.songs})
+  }
+  filterDisplayed(text) {
+    this.setState
+    ({
+      searchTerm: text,
+      currentlyDisplayed: this.props.songs
+    })
+    
+    this.setState({currentlyDisplayed: this.props.songs})
+  }
   render () {
+    const songs = this.state.currentlyDisplayed || []
     return (
       <View style={styles.container}>
-        <SongList style={{paddingBottom: 60}} />
+      <SearchBar round onChangeText={text => this.filterDisplayed(text)} placeholder='Type Here...' />
+        <SongList songs={songs} />
         <PlayerArea />
       </View>
     )

App/Containers/PlayerArea.js

@@ -27,7 +27,7 @@ const PlayerArea = ({ playing, play, pause, stop, metadata }) => (
       activeOpacity={1.0}
       onPress={() => setTimeout(play, 5000)}
       >
-      <Text style={{textStyle}}>Delayed Start</Text>
+      <Text style={textStyle}>Delayed Start</Text>
     </TouchableOpacity>
 
     </View>

App/Containers/SongList.js

@@ -4,33 +4,27 @@ import { connect } from 'react-redux'
 import Song from '../Components/Song'
 import styles from './Styles/SongListStyle'
 import PlayerActions from '../Redux/PlayerRedux'
+import { List, ListItem } from 'react-native-elements'
 
 class SongList extends React.Component {
   render () {
     const { songs, setSong, style = {} } = this.props
     return (
-      <View style={[styles.container, style]}>
-        <View style={{flex: 0.1, flexDirection: 'row'}}>
-          <Text style={styles.text}>Genre</Text>
-          <Text style={styles.text}>Artist</Text>
-          <Text style={styles.text}>Title</Text>
-          <Text style={styles.text}>Duration</Text>
-        </View>
+      <View style={[styles.container]}>
         <ScrollView>
-          <KeyboardAvoidingView behavior='position'>
+            <List>
             {songs.map((song, index) =>
               <Song onPress={() => setSong(song)} key={index} song={song.metadata} />
             )}
-          </KeyboardAvoidingView>
+            </List>
         </ScrollView>
       </View>
     )
   }
 }
 
 const mapStateToProps = (state) => {
-  const { songs = [] } = state.songs
-  return { songs }
+  return { }
 }
 
 const mapDispatchToProps = (dispatch) => {

App/Containers/Styles/MusicPlayerScreenStyle.js

@@ -12,6 +12,5 @@ export default StyleSheet.create({
     color: Colors.snow
   },
   songlist: {
-    paddingBottom: 10
   }
 })

App/Containers/Styles/PlayerAreaStyle.js

@@ -4,20 +4,27 @@ import { Colors } from '../../Themes/'
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
-    height: 120,
+    height: 100,
     paddingTop: 20,
     paddingLeft: 25,
     paddingRight: 25,
     borderRadius: 5,
     backgroundColor: '#d7cec7'
   },
   stop: {
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 100,
+    width: 100,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
     position: 'absolute',
-    right: 25,
-    bottom: 40
+    right: 0,
+    bottom: 10
   },
   playpause: {
-    backgroundColor: 'rgba(255, 255, 255, 0.0)',
+    borderRadius: 200/2,
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
     position: 'absolute',
     right: 40,
     bottom: -40

App/Containers/Styles/SongListStyle.js

@@ -4,8 +4,6 @@ import { Colors, Metrics } from '../../Themes/'
 export default StyleSheet.create({
   container: {
     flex: 1,
-    paddingLeft: 40,
-    paddingTop: Metrics.doubleBaseMargin,
     backgroundColor: 'rgba(0, 0, 0, 0)'
   },
   text: {

package.json

@@ -36,6 +36,7 @@
     "react-native-config": "^0.2.1",
     "react-native-device-info": "^0.10.0",
     "react-native-drawer": "^2.3.0",
+    "react-native-elements": "^0.17.0",
     "react-native-fs": "^2.1.0-rc.1",
     "react-native-i18n": "^1.0.0",
     "react-native-media-meta": "0.0.5",