/**
 * Created by william on 10/05/2017.
 */
import React, { Component } from 'react';
import SettingsList from 'react-native-settings-list';
import Icon from 'react-native-vector-icons/Ionicons';
import {
    Animated,
    StyleSheet,
    Platform,
    StatusBar,
    Text,
    TouchableOpacity,
    View,
    Image,
    TextInput,
    Button
} from 'react-native';

import { randomIcon } from '../utils/random';
import passwords from '../mock/password';


export default class PwdItem extends Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <View style={{backgroundColor:'#EFEFF4',flex:1}}>
                <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>
                    <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>
                </View>
                <View style={{backgroundColor:'#EFEFF4',flex:1}}>
                    <SettingsList borderColor='#c8c7cc' defaultItemSize={60}>
                        <SettingsList.Header headerStyle={{marginTop:15}}/>
                        {
                            passwords.map( pwd => (
                                <SettingsList.Item
                                    key={pwd.name}
                                    icon={
                                        <Icon name={'ios-'+randomIcon()} style={styles.imageStyle} size={35}  color="#4F8EF7" />
                                    }
                                    hasNavArrow={true}
                                    title={pwd.name}
                                    titleInfo={pwd.account.length > 10? pwd.account.substr(0,10)+'...': pwd.account}
                                />
                            ))
                        }
                    </SettingsList>
                </View>
            </View>
        )
    }


}
const styles = StyleSheet.create({
    imageStyle:{
        marginLeft:15,
        alignSelf:'center',
        height:30,
        width:30
    },
    titleInfoStyle:{
        fontSize:16,
        color: '#8e8e93'
    }
});
@@ -190,16 +190,71 @@
 icons';%0A
+import ActionButton from 'react-native-action-button';%0A
 import %7B
@@ -250,24 +250,24 @@
 ';%0Aimport %7B%0A
-
     Animated
@@ -869,17 +869,17 @@
 rginTop:
-3
+2
 0,margin
@@ -920,24 +920,16 @@
 ze:16%7D%7D%3E
-Settings
 %3C/Text%3E%0A
@@ -1915,16 +1915,614 @@
 gsList%3E%0A
+                    %3CActionButton buttonColor=%22rgba(231,76,60,1)%22%3E%0A                        %3CActionButton.Item buttonColor='#9b59b6' title=%22Add Account%22 onPress=%7B() =%3E console.log(%22notes tapped!%22)%7D%3E%0A                            %3CIcon name=%22md-create%22 style=%7Bstyles.actionButtonIcon%7D /%3E%0A                        %3C/ActionButton.Item%3E%0A                        %3CActionButton.Item buttonColor='#3498db' title=%22Scan%22 onPress=%7B() =%3E %7B%7D%7D%3E%0A                            %3CIcon name=%22md-qr-scanner%22 style=%7Bstyles.actionButtonIcon%7D /%3E%0A                        %3C/ActionButton.Item%3E%0A                    %3C/ActionButton%3E%0A
         
@@ -2790,17 +2790,115 @@
 8e8e93'%0A
-
     %7D
+,%0A    actionButtonIcon: %7B%0A        fontSize: 20,%0A        height: 22,%0A        color: 'white',%0A    %7D,
 %0A%7D);

Add action button