Single screen application without bottom navigation bar - react-native

Question

I've analyzed the needs of my application and decided I can more efficiently develop it with mobile friendly components on the web and present it via a web view in an app.
I need permissions to access camera and gallery (to take photos / videos, and upload photos / videos).
Basically, a single-screen app with a webview presenting the site with mobile-friendly components and the above permissions.
This is my current app.js:
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
} from 'react-navigation';
//import createStackNavigator, createBottomTabNavigator, createAppContainer in our project
import HomeScreen from './pages/HomeScreen';
import { Constants, Location, Camera, Permissions } from 'expo';
const ProfileStack = createStackNavigator(
{
//Definition of Navigaton from home screen
HomeScreen: { screen: HomeScreen },
},
{
//For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: 'orange',
},
headerTintColor: '#FFFFFF',
title: '',
//Header title
},
}
);
const App = createBottomTabNavigator(
{
HomeScreen: { screen: HomeScreen },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'HomeScreen') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'orange',
inactiveTintColor: 'gray',
},
}
);
export default createAppContainer(App);
and './pages/HomeScreen':
//This is an example code for Bottom Navigation//
import React, {Component} from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet, WebView } from 'react-native';
//import all the basic component we have used
export default class ProfileScreen extends React.Component {
//Profile Screen to show from Open profile button
render() {
return (
<WebView
source={{uri: 'https://mobilesite'}}
style={{marginTop: 20}}
/>
);
}
}
So far, the site opens on a single screen as expected, but there's a bottom navigation bar present; I'd also like to preferably hide the top bar if possible too as I've accounted for that in a mobile-friendly header on the mobile site as well.
Also, via the mobile web codebase, I'm utilizing <input type="file" /> for uploading. Is this compatible with React Native Permissions?

Answer 1

You're using createBottomTabNavigator() and passing the resulting navigator to your createAppContainer() which will create a bottom tab navigator.
If you pass a StackNavigator (via createStackNavigator() which you use for ProfileStack) to the createAppContainer() it'll render the stack as opposed to the bottom tab navigator which is what you want.
To remove the header altogether you can use headerMode: 'none' in the navigationOptions param.
You can see a basic version of what you want here (sans the lack of a header) in the React Navigation docs.