bogoslavskiy

render() {
    return (
      <SearchBarProvider currentTab={this.state.currentTab}>
        {(animation, { canJumpToTab }) => 
          <View style={initialLayout}>
            {Platform.OS === 'android' && 
               <StatusBar
                translucent={true}
                backgroundColor="transparent"
              />

bogoslavskiy

_onScrollEndDrag = e => {
  let velocity = e.nativeEvent.velocity.y;
  if(velocity == 0 || (isAndroid() && Math.abs(Math.round(velocity)) <= 2)) {
    this.props.animation.handleIntermediateState(this.scrollToOffset);
  }
};

bogoslavskiy

export default class SearchBar extends Component {
  blurInputs() {
    this.inputSearch.blur();
    this.inputLocation.blur();
    this.props.changeInputFocus(false);
  }

  render() {
    const { animation, changeInputFocus, renderTabBar } = this.props;

bogoslavskiy

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

bogoslavskiy

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

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

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

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

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

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';