Develop Reference

React native deep linking not moving through to 2nd deep link

When using react native deep linking, I am struggling to use a uri with a 2nd path. There are examples in the documentation https://reactnavigation.org/docs/4.x/deep-linking
The issue I am having is blahh://account --android will link to the correct screen however, blahh://account/keys --android will not. This is the same if I add any path to the screens in the AccountStack
I am using react navigation version 4.
const AccountStack = createStackNavigator(
{
Account: {
screen: Account,
path: '',
navigationOptions: {
...accountNavigationOptions,
...Account.navigationOptions,
},
},
AccountLoginAndSecurity: {
screen: AccountLoginAndSecurity,
path: '',
navigationOptions: () => ({
...defaultNavigationOptions,
headerTransitionPreset: 'uikit',
}),
},
CreateAccount: {
screen: CreateAccount,
path: '',
navigationOptions: () => ({
...defaultNavigationOptions,
headerTransitionPreset: 'uikit',
}),
},
KeysList: {
screen: KeysList,
path: 'keys',
navigationOptions: () => ({
...defaultNavigationOptions,
headerTransitionPreset: 'uikit',
}),
},
AccountSwitch: createAnimatedSwitchNavigator(
{
AccountLoading: {
screen: AccountLoading,
path: '',
params: {
theme: 'orange',
navigateScreen: 'CreateAccountOrLogin',
},
},
CreateAccountOrLogin: CreateAccountOrLogin,
Continue: AccountMenu,
},
{
initialRouteName: 'AccountLoading',
transition: createSwitchTransition(),
}
),
},
{
defaultNavigationOptions: accountNavigationOptions,
}
);
export const TabNavigator = createBottomTabNavigator(
{
Explore: {
screen: ExploreStack,
path: '',
},
Bookings: {
screen: YourBookingsStack,
path: '',
},
Account: {
screen: AccountStack,
path: 'account',
},
},
{
defaultNavigationOptions: ({ navigation }) => ({
// eslint-disable-next-line react/display-name
tabBarIcon: ({ focused }): React.ReactNode => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Explore') {
focused
? (iconName = require('assets/icons/bottom_tab_icons/explore_tab_icon.png'))
: (iconName = require('assets/icons/bottom_tab_icons/explore_tab_icon_unselected.png'));
} else if (routeName === 'Bookings') {
focused
? (iconName = require('assets/icons/bottom_tab_icons/bookings_tab_icon.png'))
: (iconName = require('assets/icons/bottom_tab_icons/bookings_tab_icon_unselected.png'));
} else if (routeName === 'Account') {
focused
? (iconName = require('assets/icons/bottom_tab_icons/account_tab_icon.png'))
: (iconName = require('assets/icons/bottom_tab_icons/account_tab_icon_unselected.png'));
}
return <Image source={iconName} />;
},
tabBarOptions: {
showLabel: false,
style: {
elevation: 3,
borderTopColor: 'transparent',
backgroundColor: '#fff',
height: 50,
},
},
}),
navigationOptions: () => ({
headerBackTitle: null,
headerTitleStyle: { color: 'orange' },
}),
}
);

I just looked at the codebase and Account links through to the account screen before going to the keys screen.
Account: {
screen: Account,
path: '',
navigationOptions: {
...accountNavigationOptions,
...Account.navigationOptions,
},
},
so the fix was to add an empty path to this in the accountstack then it worked fine when going to npx uri-scheme open blahh://account/keys --android

Nested tab navigator with header

I'm trying to achieve something similar to the image below.
Basically, I want to have a nested tab navigator and place it under a custom header. The main tab navigator is the one at the bottom. The nested tab navigator is the one on the top with "Recent, Tab2, Tab3". I'm all set till here, but I can't get the nested navigator to place itself under the custom header. Is there any way that I can do this? Any help will be greatly appreciated.
Here's the code of the navigators:
const TopNav = TabNavigator(
{
Recent: { screen: Recent },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
},
{
tabBarOptions: {
activeTintColor: "#f67425",
activeBackgroundColor: "#ffffff",
inactiveTintColor: "#4a4a4a",
inactiveBackgroundColor: "#ffffff",
// showLabel: false,
},
tabBarComponent: TabBarBottom,
initialRouteName: "Messages",
tabBarPosition: "top",
swipeEnabled: false,
animationEnabled: false,
}
);
const BottomNav = TabNavigator(
{
Search: { screen: Search },
Messages: { screen: TopNav },
Contacts: { screen: Contacts },
More: { screen: More },
},
{
tabBarOptions: {
activeTintColor: "#f67425",
activeBackgroundColor: "#ffffff",
inactiveTintColor: "#4a4a4a",
inactiveBackgroundColor: "#ffffff",
// showLabel: false,
},
tabBarComponent: TabBarBottom,
initialRouteName: "Messages",
tabBarPosition: "bottom",
swipeEnabled: false,
}
);

React Native - Combine 2 Navigation Type in single apps

I trying to implement 2 type of Navigation in my apps, Tab Navigation and Stack Navigation.
My Desire Output:
But so far with my code, I only able to implement one of them.
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600',
}
}
});
const Go = StackNavigator({
First: { screen: ProfileScreen },
Second: { screen: SecondActivity } },
});
export default rootNav;
What change should I make to my code to implement these 2 Navigation in my Apps?
Thank you.

You need a root StackNavigator, which has one route to your TabNavigator and one to your other StackNavigator. Then you can navigate from the TabNavigator to your other StackNavigator.
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});

const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
Method above can achieve the desire result however it may cause some issue, such as when perform Navigation to Screen, there will pop out 2 Header on Top of the Screen.
Improvement for Code above:
const rootNav = StackNavigator({
app: {screen: App},
First: { screen: ProfileScreen },
Second: { screen: SecondActivity },
});

React Native - Two Apps Bar Being Display in One Screen

My issue is I tried to implement 2 type of Nagivation Type in my Apps, TabNavigation and StackNavigation, so I using a root StackNavigator, which has one route to myTabNavigator and one to my other StackNavigator(Code Snippet of App.js). However, when I navigate to View Screen which is SecondActivity.js there will be two header pop out. I try to use header:null on SecondActivity.js but it will cause both header gone.
Is there any way to remove only 1 of the header from the SecondActivity.js Screen?
App.js (using RootNavigator to combine Tab and Stack Navigation in this Apps)
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600'
}
}
});
const Go = StackNavigator({
First: { screen: ProfileScreen },
Second: { screen: SecondActivity }
});
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
export default rootNav;
ProfileScreen.js
static navigationOptions = {
tabBarLabel: 'View/Edit',
header: null
}
// This Line Used to Navigate to SecondActivity.js Screen
OpenSecondActivity(id) {
this.props.navigation.navigate('Second', { ListViewClickItemHolder: id });
}
// The ListView onPress will call the function above.
<ListView
automaticallyAdjustContentInsets={false}
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.OpenSecondActivity.bind(this, rowData.RecipeID)}> {rowData.RecipeName} </Text>}
/>
SecondActivity.js
static navigationOptions = {
title: 'View Details',
};

Each StackNavigator has its own header.
this is happening you are using nested stackNavigator, so one header is because of Go (stackNavigator), and another one is because of rootNav (stackNavigator).
The Go StackNavigation is unnecessary instead change the rootNav into this:
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600'
}
}
});
const rootNav = StackNavigator({
app: {screen: App},
First: { screen: ProfileScreen },
Second: { screen: SecondActivity }
});
export default rootNav;

This is happening because of the fact that the tab navigator is being rendered within the stack navigator.
Create a util file, and put this method on it. It resets the stack and put tab navigator on top
const resetActivities = (navigation, rootPath,props) => {
const stackAction = NavigationActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: rootPath,params:props })],
});
navigation.dispatch(stackAction);
}
and pass the 'App', and the navigation object

No view Manager defined for class RCTMap

I'm trying to use the MapView for Android with react-native. Here is my (very basic) code :
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
TextInput,
View,
ToastAndroid,
MapView,
ToolbarAndroid
} = React;
var SwitchAndroid = require('SwitchAndroid');
var toolbarActions = [
{title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
{title: 'Filter'},
{title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
];
var velib = React.createClass({
getInitialState: function() {
return {
actionText: 'Example app with toolbar component',
toolbarSwitch: false,
colorProps: {
titleColor: '#3b5998',
subtitleColor: '#6a7180',
},
};
},
render: function() {
return (
<View>
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('image!ic_menu_black_24dp')}
onActionSelected={this._onActionSelected}
onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
style={styles.toolbar}
subtitle={this.state.actionText}
title="Toolbar"
/>
<MapView
showsUserLocation="true"
/>
</View>
)
},
onActionSelected: function(position) {
if (position === 0) { // index of 'Settings'
showSettings();
}
}
});
var styles = StyleSheet.create({
toolbar: {
backgroundColor: '#e9eaed',
height: 56,
},
map: {
height: 150,
margin: 10,
borderWidth: 1,
borderColor: '#000000',
},
});
AppRegistry.registerComponent('velib', () => velib);
But I always get this error :
Here are my logcat errors :
W/ReactNativeJS(18572): 'Warning: Native component for "RCTModalHostView" does not exist'
W/ReactNativeJS(18572): 'Warning: Native component for "RCTTextView" does not exist'
W/ReactNativeJS(18572): 'Warning: Native component for "RCTTextField" does not exist'
D/ReactNativeJS(18572): 'Running application "velib" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF'

Maps for android haven't been open sourced in the initial android release. There's a list of views and modules that will be open sourced over time here.