App.js

import React, { Component } from 'react';
import { Ionicons } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom } from 'react-navigation';

import {styles} from "./js/styles";
import FileList from './js/fileList';
import Viewer from './js/viewer';

export default TabNavigator(
  {
    FileTab: {
      screen: FileList,
    },
    ViewerTab: {
      screen: Viewer,
    },
/*
    Settings: {
      screen: SettingsScreen,
    },
    */
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          case 'FileTab':
            iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            break;
          case 'ViewerTab':
            iconName = `ios-link${focused ? '' : '-outline'}`;
            break;
          case 'Settings':
            iconName = `ios-options${focused ? '' : '-outline'}`;
        }
        return (
          <Ionicons
            name={iconName}
            size={28}
            style={{ marginBottom: -3 }}
            color={focused ? styles.tabIcon_Selected : styles.tabIcon}
          />
        );
      },
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

fileList.js

import React from 'react';
import { StackNavigator, NavigationActions } from 'react-navigation';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';

import {styles} from "./styles";

let mTabNav;

class FileListNav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list:   [{id:0, name:"Project A"}
                    ,{id:1, name:"Folder A"}
                    ,{id:2, name:"Project B"}
                    ,{id:3, name:"My 3D File", type:"versions"}
            ],
        }
    }

    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.headerTitle}`,
    });

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.list}
                    keyExtractor={item => item.id}
                    onRefresh={this.handleRefresh}
                    refreshing={this.state.refreshing}
                    renderItem={ ({item}) => 
                         <TouchableOpacity style={styles.listitem} 
                            onPress={ () => {
                                if (item.type == 'versions')
                                    mTabNav.navigate('ViewerTab', {urn: item.id, refreshing:true})
                                else {
                                    navigate('Links', {headerTitle:item.name, selectedItem:item, refreshing:true} );
                                }
                            }}> 
                            <Text>{item.name}</Text>
                         </TouchableOpacity>

                    }
                />
            </View>
        );
    } 
}

const StackNav = StackNavigator({
    Links: {
        screen: FileListNav,
        navigationOptions: {
            headerBackTitle: null
        },
    }
}, {
    initialRouteParams: {
        headerTitle: 'Hubs',
        type: 'hubs',
        refreshing: false
    }
});

export default class FileList extends React.Component {
    render() {
        mTabNav = this.props.navigation;
        return <StackNav / >
    }
}

styles.js

import { StyleSheet, Dimensions } from 'react-native';

let width = Dimensions.get('window').width;

const primaryColor = "#a24";
const dullColor = "#aaa";

export const styles = StyleSheet.create({
	h1: {
	    fontSize:22,
	    color: primaryColor
	},

	container: {
	    flex: 1,
	    backgroundColor: '#fff',
	    alignItems: 'center',
	    justifyContent: 'center',
	},

	webview: {
		width: width
	},

	listitem: {
		flexDirection: 'row',
		padding: 10,
		borderBottomWidth: 1,
		borderStyle: 'solid',
		borderColor: '#ecf0f1',
        width: width
	},

	photo: {
		width:50,
		height:50
	}

});

styles.tabIcon_Selected = primaryColor;
styles.tabIcon = dullColor;

styles.viewerHTML = `
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" href="https://developer.api.autodesk.com/derivativeservice/v2/viewers/style.min.css?v=v2.17" type="text/css">
            <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js?v=v2.17"></script>
            <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=v2.17"></script>
            <!--script src="https://viewer-nodejs-tutorial.herokuapp.com/extensions/Viewing.Extension.Markup3D.min.js"></script-->
        </head>
        <body style="margin:0"><div id="viewer"></div></body>
        <script>
            var viewer;
            var viewerDiv = document.getElementById('viewer');
            document.addEventListener("message", function(msg) { }, false);

            function initializeViewer(urn, token) {
                var options = {
                    env: "AutodeskProduction",
                    useConsolidation: false,
                    useADP: false,
                    accessToken: token
                };

                function onSuccess(doc) {
                    // A document contains references to 3D and 2D viewables.
                    var viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
                    var initialViewable = viewables[0];
                    var svfUrl = doc.getViewablePath(initialViewable);
                    var modelOptions = {
                        sharedPropertyDbPath: doc.getPropertyDbPath()
                    };

                    var viewerDiv = document.getElementById('viewer');
                    viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
                    viewer.start(svfUrl, modelOptions);
                    viewer.setBackgroundColor(200,200,200,255,255,255);
                };
                Autodesk.Viewing.Initializer(options, function onInitialized(){
                    Autodesk.Viewing.Document.load(urn, onSuccess);
                });
            };
        </script>
    `;

viewer.js

import React, { Component } from 'react';
import { Text, View, Button, WebView, Image, AsyncStorage } from 'react-native';
import {styles} from "./styles";

import { Constants, AuthSession } from 'expo';

export default class Viewer extends Component {

    constructor(props) {
      super(props);
      this.state = {token:"", profileurl:""};
    }

    // Handle Viewer Launch
    componentDidUpdate() {
        const {state} = this.props.navigation;
        if (state.params)
          this.loadViewer(state.params.urn, this.state.token);
    }

    loadViewer(urn, token) {
      var js = `initializeViewer("urn:${urn}","${token}")`;
  		this.viewer.injectJavaScript( js );
  	}

  	render() {
      return (
        <View style={styles.container}>
          <WebView
              source={{ html: styles.viewerHTML }}
              style={styles.webview}
              javaScriptEnabled={true}
              ref = {webview => { this.viewer = webview; }}
          />
        </View>
      );
  }
}