I am trying to pass props from login screen to the whole app because every fetch request depend on user credentials so how can I achieve this.
routeConfig file:
export const sendStack = StackNavigator({
send:{
screen:Send,
},
confirm:{
screen:ConfrimPay,
}
});
export const transactionStack = StackNavigator({
transaction:{
screen:Transaction,
},
details:{
screen:Details,
}
});
export const Tab=TabNavigator({
send:{
screen:sendStack,
},
receivers:{
screen:Receipt,
tabBar:{
swipeEnabled:false
}
},
transaction:{
screen:transactionStack
},
},
{
tabBarPosition: 'bottom',
swipeEnabled: false,
tabBarOptions: {
activeTintColor: 'white',
labelStyle:{
fontSize:5
}
}
}
);
export const Logst =StackNavigator({
first:{
screen:First
},
login:{
screen:App ,
},
tab:{
screen:Tab,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
Root nav:
import React, { Component } from 'react';
import {Tab, Logst,Root} from './mainNav';
import App from './App';
class List extends Component {
render() {
return(<Logst />) ;
}
}
This my login page and I use this.props.navigation.navigate('tab',{user:user,pwd:pwd}); and it's getting me an error that mean the props has not been passed
this.props.navigation.navigate('tab',{user:user,pwd:pwd});
+this.props.navigation.state.params.user+'&pwd='+this.props.navigation.state.params.pwd+'&func=2
Note* I am passing props from stackNav to stackNav nested in TabNav
Related
I'm trying to use https://github.com/expo/react-native-action-sheet with switch navigator.
I'm not sure how to do the basic setup as the example in the readme is different than my App.js. I'm using react 16.8 so I should be able to use hooks.
My App.js
import { useActionSheet } from '#expo/react-native-action-sheet'
const AuthStack = createStackNavigator(
{ Signup: SignupScreen, Login: LoginScreen }
);
const navigator = createBottomTabNavigator(
{
Feed: {
screen: FeedScreen,
navigationOptions: {
tabBarIcon: tabBarIcon('home'),
},
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: tabBarIcon('home'),
},
},
},
);
const stackNavigator = createStackNavigator(
{
Main: {
screen: navigator,
// Set the title for our app when the tab bar screen is present
navigationOptions: { title: 'Test' },
},
// This screen will not have a tab bar
NewPost: NewPostScreen,
},
{
cardStyle: { backgroundColor: 'white' },
},
);
export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: stackNavigator,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
const { showActionSheetWithOptions } = useActionSheet();
);
Update, I'm getting this error when calling the showActionSheetWithOptions inside my component:
Hooks can only be called inside the body of a function component. invalid hook call
This is my code:
import React, { Component } from 'react';
import { useActionSheet } from '#expo/react-native-action-sheet'
export default class NewPostScreen extends Component {
_onOpenActionSheet = () => {
const options = ['Delete', 'Save', 'Cancel'];
const destructiveButtonIndex = 0;
const cancelButtonIndex = 2;
const { showActionSheetWithOptions } = useActionSheet();
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
destructiveButtonIndex,
},
buttonIndex => {
console.log(buttonIndex);
},
);
};
render () {
return (
<View>
<Button title="Test" onPress={this._onOpenActionSheet} />
</View>
)
}
}
update 2
I also tried using a functional component, but the actionsheet does not open (console does print "pressed")
// ActionSheet.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { useActionSheet } from '#expo/react-native-action-sheet'
export default function ActionSheet () {
const { showActionSheetWithOptions } = useActionSheet();
const _onOpenActionSheet = () => {
console.log("pressed");
const options = ['Delete', 'Save', 'Cancel'];
const destructiveButtonIndex = 0;
const cancelButtonIndex = 2;
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
destructiveButtonIndex,
},
(buttonIndex) => {
console.log(buttonIndex);
},
);
};
return (
<TouchableOpacity onPress={_onOpenActionSheet} style={{height: 100,}}>
<Text>Click here</Text>
</TouchableOpacity>
);
};
Problem
As you can see here. You are not connecting your application root component.
Solution
import connectActionSheet from #expo/react-native-action-sheet and connect your application root component to the action sheet.
Simply modify your App.js to reflect the following:
// ... Other imports
import { connectActionSheet } from '#expo/react-native-action-sheet'
const AuthStack = createStackNavigator({
Signup: SignupScreen,
Login: LoginScreen
});
const navigator = createBottomTabNavigator({
Feed: {
screen: FeedScreen,
navigationOptions: {
tabBarIcon: tabBarIcon('home'),
},
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: tabBarIcon('home'),
},
},
});
const stackNavigator = createStackNavigator({
Main: {
screen: navigator,
// Set the title for our app when the tab bar screen is present
navigationOptions: { title: 'Test' },
},
// This screen will not have a tab bar
NewPost: NewPostScreen,
}, {
cardStyle: { backgroundColor: 'white' },
});
const appContianer = createAppContainer(
createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
App: stackNavigator,
Auth: AuthStack,
}, {
initialRouteName: 'AuthLoading',
})
);
const ConnectApp = connectActionSheet(appContianer);
export default ConnectApp;
Now on any of your application screens (i.e. Feed, Profile, Main, etc.) you can access the action sheet as follows:
If Stateless Component
// ... Other imports
import { useActionSheet } from '#expo/react-native-action-sheet'
export default function Profile () {
const { showActionSheetWithOptions } = useActionSheet();
/* ... */
}
If Statefull Component
// ... Other imports
import React from 'react'
import { useActionSheet } from '#expo/react-native-action-sheet'
export default Profile extends React.Component {
const { showActionSheetWithOptions } = useActionSheet();
/* ... */
}
Note: You can also access the action sheet as stated below from the docs
App component can access the actionSheet method as this.props.showActionSheetWithOptions
I'm using react-navigation v3 for react native app.
When I createDrawerNavigator inside createStackNavigator I can't openDrawer but if I createDrawerNavigator in root navigator I can open it.
Here is my code. Anyone have a solution for me?
AppNavigator.js
const AppNavigator = createSwitchNavigator(
{
StackNavigatorMain: StackNavigatorMain,
StackMenu: StackMenu
},
{
headerMode: "null",
navigationOptions: {
headerVisible: false
},
initialRouteName: "StackNavigatorMain"
}
);
export default createAppContainer(AppNavigator);
StackNavigatorMain.js
const StackNavigatorMain = createStackNavigator(
{
routeHome: Home,
routeLogin: Login,
routeForgotPassword: ForgotPassword,
routeSignUp: SignUp,
},
{
headerMode: "none",
initialRouteName: strings.routeHome,
}
)
export default StackNavigatorMain
StackMenu.js
const StackMenu = createStackNavigator({
//Drawer Optons and indexing
MenuNavigator: MenuNavigator,
},
{
headerMode: "null",
navigationOptions: {
headerVisible: false
},
}
);
export default StackMenu;
MenuNavigator.js
const MenuNavigator = createDrawerNavigator({
//Drawer Optons and indexing
Setting: Setting
},
{
drawerWidth: responsiveWidth(180),
overlayColor: 'transparent',
// drawerLockMode: 'locked-open',
contentComponent: AppSideMenu
}
);
export default MenuNavigator;
index.js
export default class App extends Component {
render() {
return (
<AppNavigator/>
);
};
}
Call open drawer onPress button in Component screen
onClicked = () => {
// props.navigation.openDrawer();
props.navigation.dispatch(DrawerActions.openDrawer());
}
I have created app using 'react-native-navigation' and first navigation working fine.
Navigation.startSingleScreenApp({
screen: {
screen: 'drawer.HomeScreen',
title: '',
navigatorStyle: {
navBarHidden: true
}
}
});
I got issue in navigation
import { Navigation } from 'react-native-navigation';
and tried to navigate using
Navigation.push({
component: {
name: 'drawer.DashboardScreen'
}
});
startMainTab.js
const startTabs = () => {
Promise.all([
Icon.getImageSource("ios-share-alt", 30),
Icon.getImageSource("ios-menu", 30)
]).then(sources => {
Navigation.startTabBasedApp({
tabs: [{
screen: 'drawer.AnalyticsScreen',
navigatorButtons: {
leftButtons: [{
icon: sources[1],
title: "Menu",
id: 'sideDrawerToggle'
}]
}
},
{
screen: 'drawer.DashboardScreen',
navigatorButtons: {
leftButtons: [{
icon: sources[1],
title: "Menu",
id: 'sideDrawerToggle'
}]
}
}
],
drawer: {
left: {
screen: 'drawer.SideDrawer'
}
}
});
});
}
SideDrawer.js
export default startTabs;
export default class SideDrawer extends Component {
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
}
componentWillMount() {
this.props.navigator.setOnNavigatorEvent(this.onNavigationEvent)
}
onNavigationEvent = (event) => {
// handle a deep link
if (event.type == 'DeepLink') {
const parts = event.link;
alert("Scree: " + parts)
//this.navigateToAbout()
this.props.navigator.push({
screen: "drawer.HomeScreen"
})
if (parts == 'drawer.DashboardScreen') {
//this.onPressScreen1();
}
}
}
navigateToAbout = () => {
this.props.navigator.push({
screen: 'drawer.DashboardScreen'
})
}
render() {
return ( <
View style = {
styles.container
} >
<
Text > SideDrawer < /Text> <
TouchableHighlight onPress = {
this.navigateToAbout.bind(this)
} >
<
Text > Click Me < /Text> <
/TouchableHighlight> <
/View>
)
}
}
Since pushing a screen is an action you perform on an existing navigation stack, you need to call it on your current component navigator object which you'll automagically get as a prop:
this.props.navigator.push({screen: 'drawer.DashboardScreen'})
I strongly suggest you migrate to react-native-navigation v2 as v1 has limited functionality and is no longer maintained.
Download source code from here(React Native Navigation)
App.js:
import React, {Component} from 'react';
import {createStackNavigator,createAppContainer} from 'react-navigation'
import HomeScreen from './Screens/HomeScreen';
import ProfileScreen from './Screens/ProfileScreen';
import ContactScreen from './Screens/ContactScreen';
import MainScreen from './Screens/MainScreen'
export default class App extends Component {
render() {
return <AppNavigationContainer/>
}
}
const AppNavigator = createStackNavigator({
Main:MainScreen,
Home: HomeScreen,
Profile: ProfileScreen,
Contact:ContactScreen
}, {
initialRouteName: 'Main',
navigationOptions: {
headerTitleStyle: {
fontWeight: "bold",
color: "red",
},
headerTintColor: "red"
}
})
const AppNavigationContainer = createAppContainer(AppNavigator);
MOVE FROM ONE SCREEN TO ANOTHER:
this.props.navigation.navigate('Profile')
Thanks!
I am building an App on React-Native for which I am using React-Navigation
Now, Inside that i am using Stack-Navigation and TabNavigator (updated it DrawerNavigator)
import {
createStackNavigator,
TabNavigator,
DrawerNavigator
} from 'react-navigation';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
import CoinCap from './src/container/CoinCap.js';
//THis is being Exported to App.js
export const Tab = TabNavigator({
TabA: {
screen: CoinCap
},
TabB: {
screen: CoinCap
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyScreen = createStackNavigator({
Home: {
screen: CoinCap
},
CoinCapCharts: {
screen: CoinCapCharts
}
},{
initialRouteName: 'Home',
headerMode: 'none'
});
export const Drawer = DrawerNavigator({
Tabs: { screen: Tab },
Stack: { screen: MyScreen },
})
I am importing this in my App.js where I am doing something like this
import React from 'react';
import {
Drawer
}from './Screen.js';
import {
View
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Drawer/>
<Tab/>
</View>
);
}
}
Now, This is indeed showing Tab the first time I run my app but after I navigate to different screen and return back, It doesn't appear to be showing that Tab again
[Question:] What could I be doing wrong and How can I fix it?
Try to define one within the other.
Something like:
const Tab = TabNavigator({
TabA: {
screen: Home
},
TabB: {
screen: Home
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyStack = createStackNavigator({
Home: {
screen: Home
},
CoinCapCharts: {
screen: CoinCapCharts
},
Tab: {
screen: Tab
},
},{
initialRouteName: 'Home',
headerMode: 'none'
});
Now, render MyStack (not sure that Screen is the best name :)
export default class App extends React.Component {
render() {
return (
<View>
<MyStack />
</View>
);
}
}
I'm pretty new at react-native, please bear with me. I have a Stack and Tab navigator that both work well but independently. I, however, need them to work together.
const MainTabs = TabNavigator({
Messages: { screen: MessageScreen },
Cards: { screen: CardScreen },
Statements: { screen: StatementScreen },
Profile: { screen: ProfileScreen },
},
{
tabBarOptions: {
activeTintColor: bongzBlue,
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
export default class App extends Component {
render() {
return (
// <RootStack />
<MainTabs />
);
}
}
Here is a suggestion:
You can nest the StackNavigator in a TabNavigator. So for your specific case, you can make your screens StackNavigators.
For example, your Messages screen can be created like this:
const MessagesStack = StackNavigator({
index: { screen: MessageScreen }
...
})
and then you can use it in your TabNavigator and export that as your main component.
const MainTabs = TabNavigator({
Messages: { screen: MessageStack },
...
},
Hope this helps.