grahammendick

// Tabs.js
import React, {useState, useMemo, useContext} from 'react';
import {Platform} from 'react-native';
import {StateNavigator} from 'navigation';
import {NavigationHandler, NavigationContext} from 'navigation-react';
import {NavigationStack, Scene, TabBar, TabBarItem, NavigationBar} from 'navigation-react-native';
import Home from './Home';
import Notifications from './Notifications';
import Tweet from './Tweet';
import Timeline from './Timeline';

grahammendick

const App = () => (
  <>
    <NavigationHandler>
      <NavigationStack>
        ...
      </NavigationStack>
    </NavigationHandler>
    <Player style={{ position: absolute, bottom: 10 }} />
  </>
)

grahammendick

<NavigationHandler>
  <NavigationStack>
    <Scene key="home"><Tabs /></Scene>
    <Scene key="profile"><Profile /></Scene>
  <NavigationStack>
<NavigationHandler>
      
const Tabs = () => (
  <TabBar>
    <TabBarItem>

grahammendick

const [tab, setTab] = useState(0);

<TabBar tab={tab} onChangeTab={setTab}>
  <TabBarItem>
    <Button onPress={() => setTab(1)} />
  </TabBarItem>
</TabBar>

grahammendick

const App = () => (
  <CoordinatorLayout>
    <NavigationHandler>
      <NavigationStack>
        ...
      </NavigationStack>
    </NavigationHandler>
    <BottomSheet />
  </CoordinatorLayout>
)

grahammendick

import React from 'react';
import ReactDOM from 'react-dom';
import {NavigationHandler} from 'navigation-react';
import createStateNavigator from './createStateNavigator';
import Twitter from './Twitter';

const stateNavigator = createStateNavigator();

stateNavigator.start();

grahammendick

import React, {useContext, useMemo, useState, useEffect} from 'react';
import { StateNavigator } from 'navigation';
import { NavigationContext } from 'navigation-react';
import { NavigationStack } from 'navigation-react-native';

const Stack = ({children, ...props}) => {
  const {stateNavigator, state} = useContext(NavigationContext);
  const {scenes, firstScene} = useMemo(() => (
    React.Children.toArray(children)
      .reduce(({scenes, firstScene}, {props: {name, view}}) => (

grahammendick

describe('Start Transition', function () {
    it('should not wait for slow render', function(){
        const View = () => {
            const [ slow, setSlow ] = useState(false)
            return (
                <>
                    <button
                        onClick={() => {
                            startTransition(() => {
                                setSlow(true)

grahammendick

const [offset] = useState(new Animated.Value(0));
  const translateY = offset.interpolate({
    inputRange:  [-64, 0],
    outputRange: [.9, 1],
  });
  const scaleY = offset.interpolate({
    inputRange:  [-64, 0],
    outputRange: [30, 0],
  });
  return (

grahammendick

class NavigationHander extends React.Component {
  constructor() {
    this.navigate = this.navigate.bind(this);
    this.state = {
      context: {
        url: window.location.href,
        navigate: this.navigate
      }
    };