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

Create DrawerNavigator inside StackNavigator

I have a bottomTabNavigator which looks like this.
const tabNavigator = createBottomTabNavigator({
[SCREEN1]: {
screen: StackNavigator1
},
[SCREEN2]: {
screen: StackNavigator2
},
[SCREEN3]: {
screen: SplashScreen
},
},
Now, how I do I go about creating a DrawerNavigator on each of the screens ? Creating on a normal screen is fairly straightforward. How to create it within a stackNavigator ?

its pretty straight forward. You set the DrawerNavigator as the screen component.
For example:
const dn1 = createDrawerNavigator({
[Screen1]: {
screen: Screen01
}
});
const dn2= createDrawerNavigator({
[Screen1]: {
screen: Screen02
}
});
const dn3 = createDrawerNavigator({
[Screen1]: {
screen: Screen03
}
});
const tabNavigator = createBottomTabNavigator({
[SCREEN1]: {
screen: dn1
},
[SCREEN2]: {
screen: dn2
},
[SCREEN3]: {
screen: dn3
},
}
This way you would have a separate DrawerNavigator for each tab.

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

React-navigation tabs in mid of the screen

I am using react-navigation in my react-native project and i want tab navigator in mid of my screen default it gives top or bottom position.
const Routes = {
RECENT: { screen : Upcomings},
UPNEXT : { screen : Upcomings},
UPCOMING :{ screen : Upcomings},
};
const TabConfig = {
stateName: 'MainNavigation',
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},style: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: 'gray',
}
},
};
// register all screens of the app (including internal ones)
export const screenRoute = (SignIn) => {
return StackNavigator({
LOG_IN:{screen:Login},
SIGN_UP:{screen:SignUp},
CHARITY:{screen:Charity},
FETCH_FRIEND:{screen:FetchFriend},
DASHBOARD:{screen: Dashboard},
PAYPAL:{screen: Paypal},
FPASSWORD:{screen: ForgetPassword},
ADDFRIEND:{screen: AddFriend},
UPCOMINGS : {screen :TabNavigator(Routes, TabConfig)},
},{
headerMode: 'none',
mode:'modal',
initialRouteName: SignIn ? 'UPCOMINGS':'LOG_IN'
});
};
Could this been done by any way Thanks in advance.

remove title bar or add button to it in sencha

This is screenshot of my sencha app deployed on android. I view two blue bars on the top. what i want is just to remove one of them. Any idea how to do it?
The codeis given below. hope this will help
Ext.define('appointMeDr.view.signUp.SignUp',{
extend:'Ext.form.Panel',
xtype:'signUpXType',
config:{
scrollable:'vertical',
items:[
{
xtype: 'toolbar',
title: 'Sign Up',
docked: 'top',
items:[ {
xtype:'button',
text: 'Back',
ui: 'back',
cls: 'back',
name: 'backToLogin'
}
]
},
{
xtype:'fieldset',
defaults :{
labelWidth : '120px'
},
items:[
{
xtype:'textfield',
label:'<sup>*</sup> Full Name: ',
placeHolder:'Full Name',
name:'name'
},
{
xtype: 'emailfield',
label: '<sup>*</sup> Email',
placeHolder:'Email',
name: 'email'
},
{
xtype:'textfield',
label:'<sup>*</sup> User Name: ',
placeHolder:'User Name',
name:'username'
},
{
xtype: 'passwordfield',
label: '<sup>*</sup> Password',
placeHolder:'Password',
name: 'password'
},
{
xtype:'textfield',
label:'<sup>*</sup> Age: ',
placeHolder:'Age',
name:'age'
},
{
xtype: 'selectfield',
name:'gender',
label: 'Gender',
options: [
{
text: 'Male',
value: 'Male'
},
{
text: 'Female',
value: 'Female'
}
]
},
{
xtype:'textfield',
label:'<sup>*</sup> Address : ',
placeHolder:'Address',
name:'address'
},
{
xtype: 'selectfield',
name:'Domain',
label: 'Select Domain',
options: [
{
text: 'Patient',
value: 'first'
},
{
text: 'Doctor',
value: 'second'
},
{
text: 'Guardian',
value: 'third'
},
{
text: 'Attendant',
value: 'forth'
}
]
}
]
},{
xtype:'panel',
margin:'10px',
items:[
{
xtype:'button',
text:'Sign Up',
flex:1,
name:'userSignUpBtn',
docked:'right'
}
]
}
]
}
});

youre probably using a navigation view and loading another panel which contains a toolbar into the navigation view so what you get is
1. blue bar from the navigation view
2. 2nd blue bar from the panel view
What you could do is load the view directly into the viewport instead of the navigation view
hope this helps :)