app.jsx

import React, { PureComponent, Fragment } from 'react'
import { Search, ListView, Avatar, TabBar, Header, ScreenTitle } from 'component-library'
import { Settings } from 'component-library/icons' 

class App extends PureComponent {
  state = {
    searchValue: '',
    listItems: []
  }
  componentDidMount() {
    fetch('/get-items')
      .then(data => data.json())
      .then(listItems => this.setState({ listItems }))
  }
  handleSearchChange = e => {
    const { value } = e.target
    this.setState({
      searchValue: value
    })
  }
  render() {
    const { user, goToProfile, goToSettings } = this.props
    const { listItems, searchValue } = this.state
    return (
      <Fragment>
        <Header>
          <ScreenTitle>Transactions</ScreenTitle>
          <Settings onPress={goToSettings} />
          <Avatar src={user.src} name={user.name} onPress={goToProfile} />
          <Search align="left" initialValue="" onChange={this.handleSearchChange} />
        </Header>
        <ListView items={listItems} filter={searchValue} />
        <TabBar active="transactions" />
      </Fragment>
    )
  }
}

export default App