picker.js

import React, { Component } from 'react';
import {
  TouchableHighlight,
  TouchableOpacity,
  Image,
  ImageBackground,
  View,
  Text,
  StatusBar,
  ScrollView,
  Dimensions,
  CameraRoll,
  Platform,
  FlatList,
  Animated,
  Button,
  MaskedViewIOS,
  InteractionManager,
} from 'react-native';

//import { observer, inject } from 'mobx-react/native';
const AFlatList = Animated.createAnimatedComponent(FlatList);
//import Icon from 'react-native-vector-icons/Ionicons';
//import Svg, { LinearGradient, Stop, Rect } from 'react-native-svg';

//import styles from '../../configs/styles';

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

class ImageItem extends React.PureComponent {
  selectImage(item) {
    this.props.selectImage(item);
  }

  render() {
    const { item } = this.props;
    return (
      <TouchableHighlight onPress={() => this.selectImage(item)}>
        <Image
          source={{ uri: item.node.image.uri }}
          style={{
            width: width / 4 - 5,
            height: width / 4 - 5,

            margin: 2,
            borderWidth:
              this.props.selectImageItem.node.image.uri === item.node.image.uri
                ? (width / 4 - 5) / 2
                : 0,
            borderColor:
              this.props.selectImageItem.node.image.uri === item.node.image.uri
                ? 'rgba(255,255,255,0.4)'
                : 'transparent',
          }}
        />
      </TouchableHighlight>
    );
  }
}

export default class Picker extends Component {
  //static navigationOptions = {
  //  header: false,
  //};

  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      loading: false,
      images: null,
      selectImage: null,
    };

    this.scrollY = new Animated.Value(0);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.selectImage !== this.state.selectImage) {
      return true;
    }
    return false;
  }

  componentWillMount() {
    this.fetch();
  }

  fetch() {
    const fetchParams = {
      first: 1000,

      groupTypes: 'SavedPhotos',
      assetType: 'Photos',
    };

    if (Platform.OS === 'android') {
      delete fetchParams.groupTypes;
    }

    CameraRoll.getPhotos(fetchParams).then(data => this.appendImage(data), e => console.log(e));
  }

  appendImage(data) {
    const allImages = data.edges;
    // const images = allImages.slice(0, 100);
    // const images = allImages.slice(0, 9);
    const images = [...data.edges];
    this.setState({ selectImage: data.edges[0], images, allImages, loading: true });
    // if (assets.length > 0) {
    //   newState.lastCursor = data.page_info.end_cursor;
    //   newState.images = this.state.images.concat(assets);
    //   newState.dataSource = this.state.dataSource.cloneWithRows(
    //     this._nEveryRow(newState.images, this.props.imagesPerRow),
    //   );
    //   this.setState({ loading: true });
    // }
  }

  setAnimate() {
    Animated.timing(this.scrollY, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }

  selectImage(image) {
    this.setState({ selectImage: image }, this.setAnimate());
  }

  gridRender(color = 'rgba(255,255,255,0.5)', lineSize = 0.5) {
    return (
      <View style={{ position: 'absolute', zIndex: 1 }}>
        <View
          style={{
            position: 'absolute',
            width,
            height: lineSize,
            backgroundColor: color,
            top: width / 3 * 2,
          }}
        />
        <View
          style={{
            position: 'absolute',
            width,
            height: lineSize,
            backgroundColor: color,
            top: width / 3,
          }}
        />
        <View
          style={{
            position: 'absolute',
            width: lineSize,
            height: width,
            backgroundColor: color,
            top: 0,
            left: width / 3,
          }}
        />
        <View
          style={{
            position: 'absolute',
            width: lineSize,
            height: width,
            backgroundColor: color,
            top: 0,
            left: width / 3 * 2,
          }}
        />
      </View>
    );
  }

  imageRender(image) {
    let imageHeight = width;
    let imageWidth = width;

    if (image.width > image.height) {
      imageHeight = width;
      imageWidth = image.width / (image.height / width);
    } else {
      imageHeight = image.height / (image.width / width);
      imageWidth = width;
    }

    return (
      <Image
        resizeMode={'contain'}
        source={{ uri: image.uri }}
        style={{
          height: imageHeight,
          width: imageWidth,
        }}
      />
    );
  }

  render() {
    if (!this.state.loading) {
      return (
        <View>
          <Text>Resimler Yükleniyor...</Text>
        </View>
      );
    }
    if (this.state.images.length < 1) {
      return (
        <View>
          <Text>Galeride resim bulunamadı!</Text>
        </View>
      );
    }

    const imageTranslate = this.scrollY.interpolate({
      inputRange: [0, width],
      outputRange: [0, -width],
      extrapolate: 'clamp',
    });

    return (
      <View style={{ flex: 1, backgroundColor: '#000' }}>
        <StatusBar hidden />

        <AFlatList
          // shouldItemUpdate={(p, s) => {
          //   console.log(p, s);
          //   return true;
          // }}
          // onEndReached={this.appendImage2(100)}
          // onEndReachedThreshold={200}
          // onEndReachedThreshold={10}
          contentContainerStyle={{ marginTop: width + 50, paddingBottom: width + 50 }}
          numColumns={4}
          keyExtractor={item => item.node.image.uri}
          data={this.state.images}
          scrollEventThrottle={1}
          style={{ flex: 1, backgroundColor: '#000', paddingLeft: 2 }}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.scrollY } } }], {
            useNativeDriver: true,
          })}
          renderItem={({ item }) =>
            (<ImageItem
              selectImage={this.selectImage.bind(this)}
              selectImageItem={this.state.selectImage}
              item={item}
            />)}
        />

        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            backgroundColor: '#000',
            overflow: 'hidden',
            transform: [{ translateY: imageTranslate }],
          }}
        >
          <View style={{ width, height: 50, backgroundColor: 'red' }}>
            <View
              style={{
                flex: 1,

                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}
            >
              <View style={{ flex: 0 }}>
                <TouchableOpacity
                  onPress={() => {}}
                  style={{ paddingTop: 5, paddingLeft: 10, paddingRight: 15 }}
                >
                  <Icon name="ios-close" size={35} color="#FFF" />
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text
                  style={{ flex: 0, color: '#FFF', fontSize: 17, fontWeight: '500', paddingTop: 5 }}
                >
                  Foto Galeri
                </Text>
              </View>
              <View style={{ flex: 0 }}>
                <TouchableOpacity
                  onPress={() => {}}
                  style={{ paddingTop: 5, paddingLeft: 15, paddingRight: 10 }}
                >
                  <Icon name="ios-checkmark" size={35} color="#FFF" />
                </TouchableOpacity>
              </View>
            </View>
          </View>

          <View
            onStartShouldSetResponder={(e) => {
              if (width - 50 <= e.nativeEvent.locationY) {
                this.setAnimate();
              }
            }}
            style={{
              width,
              height: width,
              marginBottom: 4,
            }}
          >
            {this.gridRender()}

            <MaskedViewIOS
              style={{ flex: 1 }}
              maskElement={
                <View
                  style={{
                    flex: 1,
                    backgroundColor: 'rgba(0,0,0,0.4)',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <View
                    style={{
                      width,
                      height: width,
                      borderRadius: width / 2,
                      backgroundColor: '#FFF',
                    }}
                  />
                </View>
              }
            >
              <ScrollView
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                horizontal
                contentContainerStyle={{
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <ScrollView
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                  contentContainerStyle={{
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  maximumZoomScale={3}
                  minimumZoomScale={1}
                >
                  {this.imageRender(this.state.selectImage.node.image)}
                </ScrollView>
              </ScrollView>
            </MaskedViewIOS>
          </View>
        </Animated.View>
      </View>
    );
  }
}