gistfile1.txt

import React, {Component} from 'react';

import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Image,
  ImageBackground,
  ScrollView,
  TouchableOpacity,
  Modal,
  Animated,
} from 'react-native';
import HomeFragment from './fragment/HomeFragment';
import EventsFragment from './fragment/EventsFragment';
import SearchFragment from './fragment/SearchFragment';
import JobsFragment from './fragment/JobsFragment';
const AnimatedView = Animated.createAnimatedComponent(View);

const {width, height} = Dimensions.get('window');
export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchFragment: false,
      animatedValue: new Animated.Value(0),
      modalVisibility: false,
      fragmentId: 1,
      itemsList: [
        {
          companyName: 'WWF',
          title: 'clean our wildlife',
          remaining: '£2.068',
          img: require('../assets/item_1.png'),
          fav: false,
        },
        {
          companyName: 'Greenpeace',
          title: 'Save our rainforests',
          remaining: '£1.055',
          img: require('../assets/item_2.png'),
          fav: false,
        },
        {
          companyName: 'Cosan Foundation',
          title: 'Pay for my food.',
          remaining: '£20',
          img: require('../assets/item_3.png'),
          fav: false,
        },
      ],
      selectedSort: {type: 'interests', id: 0},
      sortList: [
        {type: 'Popular', id: 1},
        {type: 'in-need of donations', id: 2},
        {type: 'global charities', id: 3},
        {type: 'recently donated', id: 4},
      ],
    };
  }

  renderSortList = () => {
    return this.state.sortList.map(item => {
      return (
        <TouchableOpacity
          key={item.id}
          activeOpacity={0.8}
          onPress={() => {
            this.setState({modalVisibility: false});
            const tempSelectedSort = this.state.selectedSort;
            const sortList = this.state.sortList.filter(
              sort => sort.id !== item.id,
            );
            sortList.push(tempSelectedSort);
            this.setState({sortList: sortList, selectedSort: item});
          }}
          style={{
            backgroundColor: '#F4F3F3',
            height: height * 0.05,
          }}>
          <View
            style={{
              height: 1,
              width: width * 0.8,
              backgroundColor: 'grey',
              alignSelf: 'center',
            }}
          />
          <View style={{flex: 1, justifyContent: 'center'}}>
            <Text
              style={{
                fontFamily: 'OpenSans',
                paddingLeft: width * 0.1,
              }}>
              {item.type}
            </Text>
          </View>
        </TouchableOpacity>
      );
    });
  };

  renderCategoriesModal = () => {
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.state.modalVisibility}>
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => this.setState({modalVisibility: false})}
          style={{
            height: height,
            width: width,
            justifyContent: 'flex-end',
          }}>
          <View style={{height: height * 0.85}}>
            <View style={{flex: 1}}>{this.renderSortList()}</View>
          </View>
        </TouchableOpacity>
      </Modal>
    );
  };

  renderFragment() {
    switch (this.state.fragmentId) {
      case 0:
        return <EventsFragment />;
      case 1:
        return <HomeFragment />;
      // return this.renderHomeFrag();
      case 2:
        return <JobsFragment />;
      default:
        return <HomeFragment />;
    }
  }

  renderSearchHeader = () => {
    const translateY = this.state.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [width, 0],
    });
    return (
      <Animated.View
        style={{
          height: height * 0.1,
          width: width,
          elevation: 6,
          // alignItems: 'center',
          justifyContent: 'flex-start',
          // paddingLeft: width * 0.05,
          // paddingRight: width * 0.05,
          backgroundColor: '#F4F3F3',
          flexDirection: 'row',
          transform: [{translateX: translateY}],
        }}>
        <TouchableOpacity
          style={{
            height: '100%',
            flex: 1,
            // alignItems: 'center',
            justifyContent: 'center',
            paddingLeft: width * 0.05,
          }}>
          <Image
            resizeMode="contain"
            style={{width: width * 0.05}}
            source={require('../assets/ic_add_photo_512.png')}
          />
        </TouchableOpacity>
      </Animated.View>
    );
  };

  renderHeader = () => {
    const translateY = this.state.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [width, 0],
    });
    return (
      <Animated.View
        style={{
          ...styles.headerContainer,
        }}>
        <TouchableOpacity style={styles.headerItem}>
          <Image source={require('../assets/ic_menu.png')} />
        </TouchableOpacity>
        <TouchableOpacity style={{...styles.headerItem, flex: 6}}>
          <Image source={require('../assets/bigbenlogo.png')} />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.startAnimation();
            this.setState({searchFragment: true});
          }}
          style={styles.headerItem}>
          <Image source={require('../assets/ic_search.png')} />
        </TouchableOpacity>
      </Animated.View>
    );
  };
  renderFooter = () => {
    return (
      <View style={styles.footerContainer}>
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => {
            this.setState({fragmentId: 0});
          }}
          style={styles.foobarItem}>
          <Image source={require('../assets/ic_events.png')} />
          <Text
            style={{
              ...styles.foobarText,
              color: this.state.fragmentId === 0 ? '#F65E38' : null,
            }}>
            Events
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => {
            this.setState({fragmentId: 1});
          }}
          style={[styles.foobarItem, {marginBottom: height * 0.06}]}>
          <Image source={require('../assets/ic_donate.png')} />
          <Text
            style={{
              ...styles.foobarText,
              color: this.state.fragmentId === 1 ? '#F65E38' : null,
            }}>
            Donate
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => {
            this.setState({fragmentId: 2});
          }}
          style={styles.foobarItem}>
          <Image source={require('../assets/ic_jobs.png')} />
          <Text
            style={{
              ...styles.foobarText,
              color: this.state.fragmentId === 2 ? '#F65E38' : null,
            }}>
            Jobs
          </Text>
        </TouchableOpacity>
      </View>
    );
  };

  renderSortBar = () => {
    return (
      <View style={styles.homeFragBar}>
        <View
          onPress={() =>
            this.setState({modalVisibility: !this.state.modalVisibility})
          }>
          <Text style={{fontFamily: 'OpenSans', fontSize: 16}}>
            {this.state.selectedSort.type}
          </Text>
        </View>
        <TouchableOpacity
          onPress={() =>
            this.setState({modalVisibility: !this.state.modalVisibility})
          }
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text
            style={{
              fontFamily: 'OpenSans',
              fontSize: 16,
              alignSelf: 'center',
            }}>
            Sort
          </Text>
          <Image
            source={require('../assets/ic_chevron_down.png')}
            style={{
              alignSelf: 'center',
              height: height * 0.02,
              marginLeft: width * 0.01,
            }}
          />
        </TouchableOpacity>
      </View>
    );
  };

  startAnimation() {
    Animated.spring(this.state.animatedValue, {
      toValue: 1,
      tension: 20,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={{justifyContent: 'space-between'}}>
        {this.renderCategoriesModal()}

        <View>{!this.state.searchFragment && this.renderHeader()}</View>
        <View>{this.state.searchFragment && this.renderSearchHeader()}</View>
        <View>{this.state.searchFragment && <SearchFragment />}</View>
        <View>{!this.state.searchFragment && this.renderSortBar()}</View>
        <View style={{height: height * 0.71}}>
          {!this.state.searchFragment && this.renderFragment()}
        </View>
        <View>{!this.state.searchFragment && this.renderFooter()}</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headerContainer: {
    height: height * 0.1,
    width: width,
    alignItems: 'center',
    justifyContent: 'space-between',
    // paddingLeft: width * 0.05,
    // paddingRight: width * 0.05,
    backgroundColor: '#19252E',
    flexDirection: 'row',
  },
  footerContainer: {
    height: height * 0.2,
    width: width,
    alignItems: 'center',
    justifyContent: 'space-between',
    // paddingLeft: width * 0.1,
    // paddingRight: width * 0.1,
    backgroundColor: '#F4F3F3',
    flexDirection: 'row',
    paddingBottom: height * 0.13,
  },
  foobarItem: {
    alignItems: 'center',
    marginTop: height * 0.05,
    paddingLeft: height * 0.05,
    paddingBottom: height * 0.05,
    paddingTop: height * 0.02,
    paddingRight: height * 0.05,
  },
  foobarText: {
    fontSize: 12,
  },
  homeFragBar: {
    height: height * 0.05,
    elevation: 6,
    backgroundColor: '#F4F3F3',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: '10%',
    paddingRight: '10%',
  },
  circle: {
    alignSelf: 'center',
    alignItems: 'center',
    borderRadius:
      Math.round(
        Dimensions.get('window').width + Dimensions.get('window').height,
      ) / 0.2,
    width: Dimensions.get('window').width * 0.5 * 0.16,
    height: Dimensions.get('window').width * 0.5 * 0.16,
    justifyContent: 'center',
    borderWidth: 2,
    borderColor: 'white',
  },
  headerItem: {
    height: '100%',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});