app.js

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {
  Container,
  Header,
  Content,
  Body,
  Text,
  Footer,
  FooterTab,
  Button,
  Left,
  Icon,
  Right,
  Fab,
  View,
  Accordion,
} from 'native-base';
import {StyleSheet, StatusBar, ScrollView} from 'react-native';
import faker from 'faker';
import type Moment from 'moment';
import moment from 'moment';
import Calendar, {visibleMonthAndYear} from './src/calendar/Calendar';
import Events from './src/events/Events';
import Ionicons from 'react-native-vector-icons/Ionicons';

var plLocale = require('moment/locale/pl');
moment.locale('pl', plLocale);

export type EventType = {
  date: Moment,
  title: string,
  description: string,
  image: string,
};

const FAKE_EVENTS: Array<EventType> = (() => {
  const startDay = moment()
    .subtract(5, 'days')
    .startOf('day');
  return [...new Array(64)].map(_ => ({
    date: startDay.add(4, 'hours').clone(),
    title: faker.company.companyName(),
    description: faker.lorem.sentence(),
    // random dimensions to get random urls
    image: faker.image.nightlife(
      Math.floor(Math.random() * 200) + 100,
      Math.floor(Math.random() * 200) + 100,
    ),
  }));
})();

//filter events by date
const filterEvents = (date: Moment): ?Array<EventType> =>
  FAKE_EVENTS.filter(event => event.date.isSame(date, 'day'));


class HomeScreen extends Component {
  state = {
    events: filterEvents(moment()),
  };

  onSelectDate = (date: Moment) => {

    this.setState({events: filterEvents(date)})
  };



  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  render() {
    const {events} = this.state;

    return (
      <Container>
        <Header style={{backgroundColor: '#ff8000'}}>
          <View>
            <StatusBar barStyle="light-content" />
          </View>
          <Left>
            <View>

            </View>
          </Left>
          <Right>
            <Button transparent>
              <Icon name="md-funnel" style={{color: 'white'}} />
            </Button>
          </Right>
        </Header>
        <Content>
          <View style={styles.container}>
            <StatusBar hidden={false} />
            <Calendar
              showDaysAfterCurrent={30}
              showDaysBeforeCurrent={30}
              onSelectDate={this.onSelectDate}

            />
            <Events events={events} />
          </View>
        </Content>
        <View>
          <Fab
            active={this.state.active}
            direction="up"
            containerStyle={{}}
            style={(styles.fab, {backgroundColor: '#DD5144'})}
            onPress={() => this.setState({active: !this.state.active})}>
            <Icon name="ios-paw" />
            <Button style={{backgroundColor: '#ebd034'}}>
              <Icon name="md-journal" />
            </Button>
            <Button style={{backgroundColor: '#ebd034'}}>
              <Icon name="ios-create" />
            </Button>
          </Fab>
        </View>
      </Container>
    );
  }
}