Nativebase: Navigation inside Tab is not working
Hi I want to open a screen from tab 1 and side menu. There is a button inside tab 1 on which click i want to open other page . I did
tab1click= () => {
this.props.navigation.navigate("PickupList");
};
Here from side menu when i am going to that screen then it is working fine but from tab i am getting following issue : -
undefined is not an object (evaluating this.props.navigation.naviagte) cab anyone tell me the exact issue
Anujmoglix
All 15 comments
Share complete code for Tab
SupriyaKalghatgi
on 20 Aug 2018
I am using same code of that repo (basicTab.js)
import React, { Component } from "react";
import {
Container, Header,Title, Button, Icon, Tabs,
Tab,Right,Left,Body} from "native-base";
import TabOne from "./tabOne";
import TabTwo from "./tabTwo";
class BasicTab extends Component {
render() {
return (
<Container>
<Header style={{ backgroundColor: '#da4439' }}
androidStatusBarColor="#da4439" hasTabs>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title> Runner</Title>
</Body>
<Right />
</Header>
<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
<Tab tabStyle={{ backgroundColor: '#da4439' }}
androidStatusBarColor="#da4439" activeTabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} heading="Pickup">
<TabOne />
</Tab>
<Tab tabStyle={{ backgroundColor: '#da4439' }}
androidStatusBarColor="#da4439" textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} heading="Delivery">
<TabTwo />
</Tab>
{/*<Tab heading="Tab3">*/}
{/*<TabThree />*/}
{/*</Tab>*/}
</Tabs>
</Container>
);
}
}
export default BasicTab;
`
and for **
tabone.js
**
import React, { Component } from "react";
import {
Container,
Content,
Button,
Item,
Input,
Form,
Text
} from "native-base";
import styles from "../form/styles";
import PickupList from "../pickupDetail";
export default class TabOne extends Component {
constructor(props) {
super(props);
this.state = {
myNumber: '',
isDisabled: true
};
}
tab1click= () => {
this.props.navigation.navigate("PickupList");
};
onChanged(text){
let newText = '';
let numbers = '0123456789';
for (var i=0; i < text.length; i++) {
if(numbers.indexOf(text[i]) > -1 ) {
newText = newText + text[i];
}
else {
alert("please enter numbers only");
}
};
if(newText.length==10){
this.state.isDisabled=false;
}else{
this.state.isDisabled=true;
}
this.setState({ myNumber: newText });
}
render() {
return (
<Container style={styles.container}>
<Content style={{ margin: 10, marginTop: 100 }}>
<Form >
<Item last>
<Input keyboardType='numeric' value={this.state.myNumber} onChangeText={(text)=> this.onChanged(text)} maxLength={10} placeholder="PO Number" secureTextEntry />
</Item>
</Form>
<Button block disabled={this.state.isDisabled} onPress={() => this.tab1click()} style={{ margin: 15, marginTop: 50 }}>
<Text>Search PO</Text>
</Button>
</Content>
</Container>
);
}
}
While you define Tabs, you must pass navigation props to corresponding tab
<TabOne navigation={this.props.navigation} />
Did you try with the solution mentioned above?
SupriyaKalghatgi
on 21 Aug 2018
yes it is working .Thanks a lot . I have 2 more issue related to this . so should i ask here or create other issue ?
Anujmoglix
on 21 Aug 2018
you can ask it here
SupriyaKalghatgi
on 21 Aug 2018
I am facing 2 issues here ;
- When i am navigating to other page then keyboard is still open
- I want to know from where i am going to tabone.js .Directly from side menu or showing in basictab.js.
I wanna know it because i want to show header only on side menu -> tabone.js not inside basictab.js
Anujmoglix
on 21 Aug 2018
You can ask your queries, only related to NativeBase
SupriyaKalghatgi
on 21 Aug 2018
ok check my first issue , it may be related to that ,
When i am doing navigation then with your solution keyboard is still open ,
Anujmoglix
on 21 Aug 2018
When i am doing navigation then with your solution keyboard is still open
can you tell me which solution
SupriyaKalghatgi
on 21 Aug 2018
Anujmoglix
on 21 Aug 2018
<Tabs>
<Tab >
<TabOne />
</Tab>
<Tab >
<TabTwo />
</Tab>
</Tabs>
Keyboard dismisses when navigating between screens.
TabOne, TabTwo are part of single screen. So when keyboard is open in any of the Tab, it remains unclosed unless you switch to other screen.
To dismiss keyboard switching between tabs, you need to code it yourself.
SupriyaKalghatgi
on 22 Aug 2018
@Anujmoglix Closing this today in case of no response
SupriyaKalghatgi
on 23 Aug 2018
Ok so i will do something for closing the keypad,
Anujmoglix
on 23 Aug 2018
For React Navigation 5.x, you can do it like this https://gist.github.com/sorxrob/7f2d490acadbf33c7874b7e2fb82773a
wobsoriano
on 16 Feb 2020
Related issues
inv2004
路
3Comments
natashache
路
3Comments
agersoncgps
路
3Comments
chetnadaffodil
路
3Comments
eggybot
路
3Comments
Most helpful comment
While you define
Tabs, you must pass navigation props to corresponding tab