rgommezz

[...]

function runSpring({
  clock,
  from,
  velocity,
  toValue,
  scrollEndDragVelocity,
  snapOffset,
  diffClampNode,

rgommezz

Let's assume our navigation bar has a height of 80, so it's driven by diffClamp(0, 80)
The position of the navigation bar is dictated by the inverse of that operation.

navBarTranslateY = multiply(diffClamp(0, 80), -1);

# Scenario 1

scrollY | navBarY | snapAmount
0       | 0       |
20      | -20     |

rgommezz

[...]
 
function runSpring({
  clock, // The clock instance
  from, // Initial value before starting the animation
  velocity, // Initial velocity of the spring animation
  toValue, // Final value of the animation
  scrollEndDragVelocity,
}) {
  const state = {

rgommezz

import Animated from 'react-native-reanimated';

const {
  event,
  Value,
  diffClamp,
  multiply,
  interpolate,
  cond,
  neq,

rgommezz

[...]
import Animated, { 
 diffClamp,
 interpolate,
 event,
 multiply
} from 'react-native-reanimated';

class CollapsibleNavBar extends React.Component {
  constructor(props) {

rgommezz

input | output
0     | 0
20    | 20
40    | 20
60    | 20
50    | 10
40    | 0
50    | 10
20    | 0

rgommezz

const isClassComponent = Component =>
  Boolean(Component.prototype && Component.prototype.isReactComponent);

function getNewElementTree(children, instanceProps) {
  const { scrollY, ...rest } = instanceProps;
  return (
    <Animated.ScrollView
      {...rest}
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],

rgommezz

import { Dimensions } from 'react-native';

// See https://mydevice.io/devices/ for device dimensions
const X_WIDTH = 375;
const X_HEIGHT = 812;

export const isIPhoneX = () => {
  const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');

  return Platform.OS === 'ios' &&

rgommezz

// @flow
import React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import SafeAreaView from '../../lib/react-native-safe-area-view';

export default function withSafeAreaView(
  WrappedComponent: ReactClass<*>,
): () => React.Element<*> {
  function EnhancedComponent(props: any) {
    return (

rgommezz

function isNetworkConnected(): Promise<boolean> {
  if (Platform.OS === 'ios') {
    return new Promise(resolve => {
      const handleFirstConnectivityChangeIOS = isConnected => {
        NetInfo.isConnected.removeEventListener(
          'change',
          handleFirstConnectivityChangeIOS,
        );
        resolve(isConnected);
      };