[NavigationExperimental] Android support?

[actonw]

Is there currently Android support for NavigationExperimental? I'm trying to use it, but when I use the NavigationCard all I get is a blank screen; when I eschew NavigationCard, the scenes don't change and animations in NavigationHeader lag pretty badly.

@ericvicenti

[ericvicenti]

I just tested NavigationCard within the UIExplorer examples and it looks fine. Can you post a code snippet and specific react-native version number?

[actonw]

Code snippet:

import React from 'react';
import {
  View,
  NavigationExperimental,
} from 'react-native';

const {
  AnimatedView,
  Card,
  Header,
} = NavigationExperimental;

import { chooseView } from '../menuItems';

export function Navigation({ navigation, onNavigate }) {
  return (
    <AnimatedView
      navigationState={navigation}
      onNavigate={onNavigate}
      renderOverlay={props => (
        <Header
          {...props}
          renderTitleComponent={props => {
            const title = props.scene.navigationState.title
            return <Header.Title>{title}</Header.Title>
          }}
        />
      )}
      renderScene={(props) => {
        return (<Card
          {...props}
          key={props.scene.navigationState.key}
          renderScene={({ scene: { navigationState } }) => {
              console.log(navigationState);
              const CurrentView = chooseView(navigationState.key);
              return <CurrentView />;
          }}
        />);
      }}
    />
  );
}

chooseView is simply a function that returns a component based on the key:

export function chooseView(key) {
  if (key === 'Home') {
    return HomeView;
  }
  else if (key === 'preferences_view') {
    return Preferences;
  }
  else if (key === 'map_view') {
    return MapPage;
  }
  else if (key === 'fun_view') {
    return Fun;
  }
  return null;
}

I'm using react-native 0.26.0.

This works fine on iOS, however shows a blank white screen on Android. Inspecting anything simply shows a blank View in the AppContainer.

[satya164]

Are using an emulator or a real device?

[actonw]

@satya164 I'm using Google's stock emulator w/ Google APIs.

[satya164]

@actonw Try using Genymotion or a Real device.

[actonw]

@satya164 I am not able to use genymotion or a real device at this point. I'm not sure exactly what relevance this has, since the NavigationCard does not involve any unique native code.

[actonw]

@ericvicenti @satya164 Adding style={{ flex: 1}} to the NavigationAnimatedView component seems to have fixed the lack of display in Android, however the opacity/animation is not quite the same.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/navigationexperimental-android-support

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.