Untitled

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    TouchableWithoutFeedback,
    TextInput,
    Dimensions,
    FlatList,
    ScrollView
} from 'react-native';
import {
	Container,
	Header,
	Content,
	List,
	ListItem,
	Left,
	Body,
	Right,
	Thumbnail,
	Text,
	Button,
	Icon
} from 'native-base';
import { StackNavigator } from 'react-navigation';
import {connect} from 'react-redux'
import {_getAllStores} from './../../api/api';
import {loadStores} from '../../actions/stores';

const {width, height} = Dimensions.get('window')

class StoreList extends Component {
	componentWillMount(){
	    this.props.dispatch(loadStores());
	}
	constructor(props) {
		super(props);
		this.state = {
			text: '',
			data: ''
		};
	};
	static navigationOptions = {
		header: null
	};
	filter(text) {
		const {stores} = this.props.stores.stores;
		const newData = stores.filter(function(item) {
			const itemData = item.name.toUpperCase();
			const textData = text.toUpperCase();

			return itemData.indexOf(textData) > -1;
		});
		this.setState({
			data: newData,
			text: text
		});
	};
	deleteData() {
		this.setState({text: '', data: ''});
	};
	_renderItem(item) {
		return (
			<ListItem>
				<Left>
					<Thumbnail source={{uri: item.logo}}/>
				</Left>
				<Body>
					<Text style={{color: 'black'}}>{item.name}</Text>
				</Body>
				<Right />
			</ListItem>
		);
	};
	renderList(stores) {
		console.log("CTM");
		//this.chargeData(stores);
		return(
				<Container>
					<Header>
						<Left>
							<TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('HomeScreen')}>
								<Text style={styles.backButtonText}>Back</Text>
							</TouchableWithoutFeedback>
						</Left>
						<Body>
							<TextInput
							value={this.state.text}
							onChangeText={(text) => this.filter(text)}
							style={styles.input}
							placeholder="Search"
							placeholderTextColor="grey"
							/>
						</Body>
						<Right>
							<Button>
								<Icon name='options' onPress={() => this.props.navigation.navigate('CategoryList')} />

							</Button>
						</Right>
					</Header>
					<List
						dataArray={stores.stores}
						renderRow={(item) => this._renderItem(item)}>
					</List>
				</Container>
		)

	}
	render() {
		const {stores} = this.props.stores;
		return (
			<Container>
			{stores.stores ? this.renderList(stores) : null}
			</Container>
		);
	};
};

const styles = StyleSheet.create({
	input: {
		height: 35,
		backgroundColor: '#e5e7f2',
		width: width / 2,
		marginHorizontal: 10,
		paddingLeft: 10,
		borderRadius: 3
	},
	backButtonText: {
		color: 'white',
		fontSize: 15
	}
});

const mapStateToProps = state => {
	return {stores: state.storesReducer}
}

export default connect(mapStateToProps)(StoreList);