bogoslavskiy

_setStateBar(state) {
  let toValue = state == 'full' ? this.maxActionAnimated : 0;
  Animated.timing(this.actionAnimated, {
    toValue: toValue,
    duration: 250,
    useNativeDriver: true,
  }).start();
}

minimizeBar = () => {

bogoslavskiy

maxActionAnimated = 88; // Location input height + padding (Bottom part)
actionAnimated = new Animated.Value(0);  

getTransformWrapper() {
  let byScroll = Animated.add(
    Animated.multiply(this.clampedScroll, -1),
    this.scrollY.interpolate({ // To negative
      inputRange: [0, 1],
      outputRange: [0, -1],
    }).interpolate({ // Add bottom height part 

bogoslavskiy

scrollToOffset(offset, animated) {
  if(offset != this.scrollY._value) {
    this.initialState.scrollToOffset({offset, animated});
  }
}

minimizeBar = () => {
  if(Math.round(this.scrollY._value) == 0) { // Full
    this.scrollToOffset(this.topPartHeight);
  } else { // Clamped

bogoslavskiy

constructor(initialState) {
  this.initialState = initialState;

  this._createClampedScroll();
  this.scrollY.addListener(this._updateScroll);
}

_updateScroll = ({value}) => {
  const diff = value - this._scrollValue;
  this._scrollValue = Math.max(value, this.topPartHeight); // Fix normal state

bogoslavskiy

import React from 'react';
import { StyleSheet, Dimensions, Animated, View, Platform, StatusBar } from 'react-native'; 
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import { SearchBarProvider } from './searchBarAnimation';

import SearchBar from './components/SearchBar';
import Tab from './tabs/Tab';

import SearchBarSuggestion from './components/SearchBarSuggestion';
import SearchBarLocationSuggestion from './components/SearchBarLocationSuggestion';

bogoslavskiy

import React from 'react';
import { View, StyleSheet } from 'react-native'; 
import { FlatList } from '../searchBarAnimation';

export default class Tab extends React.PureComponent {
   constructor(props) {
    super(props);

    this.state = {
      dataSource: Array(20).fill().map((_, index) => ({id: index}))

bogoslavskiy

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

class FlatListHelper extends React.PureComponent {
  componentDidMount() {
    let { tabRoute, animation, addHandlerScroll } = this.props;

    addHandlerScroll(tabRoute, this.scrollToOffset);

    setTimeout(() => { // Fix bug initialScroll set
      this.scrollToOffset(animation.initialScroll, false)

bogoslavskiy

export default class SearchBarProvider extends React.Component {
  constructor(props) {
    super(props);

    this.searchBarAnimation = new SearchBarAnimation({
      scrollToOffset: (configScroll) => {
        let tab = configScroll.tab ? configScroll.tab : this.props.currentTab;

        let scrollToOffset = this._handlersScroll[tab];
        scrollToOffset && scrollToOffset(configScroll.offset, configScroll.animated);

bogoslavskiy

export default class SearchBarAnimation {
  statusBarHeight = 21;
  wrapperHeight = 177;
  paddingStatusBar = 41;
  arrowHeight = 36 - ifIphoneX(2, 0);
  topPartHeight = this.arrowHeight + 45 + 10; // arrowHeight + inputHeight + padding (Top part)
  fullHeight = this.topPartHeight + 131; // = 222
  distanceRange = this.fullHeight - this.topPartHeight;
  maxClamp = this.fullHeight - (this.paddingStatusBar + this.statusBarHeight);
  minClamp = this.topPartHeight;

bogoslavskiy

getOpacitySearchBar() {
  return {
    opacity: this.scrollY.interpolate({
      inputRange: [...],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    })
  };
}