cannot readd property push of undefined - react-native

Question

I am trying to put together my first app using react-native-navigation and I am taking pieces from the available examples on the web site.
Anyway, I am now trying to use a push function to have a new screen displayed, but the navigator seems to be undefined:
the structure is:
- app.js
- firstScreenTab
- pushScreenTab
- secondScreenTab
The navigator is obviously defined in the app.js file.
In my firstScreenTab:
testNavPress() {
this.props.navigator.push({
screen: 'manager.SecondTabScreen',
title: 'Pushed Screen'
});
}
<Button onPress={this.testNavPress.bind(this)}>
Push
</Button>
`
I set up my app using redux, I am wondering how should I pass my navigator as prop?
The start app function in my app.js looks like this:
startApp(root) {
console.log(root);
console.log('START APP!!!!!');
const tabs = [
{
label: 'Employees', // tab label as appears under the icon in iOS (optional)
screen: 'manager.EmployeeListScreen', // unique ID registered with Navigation.registerScreen
icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
iconInsets: { // add this to change icon position (optional, iOS only).
top: 6, // optional, default is 0.
left: 0, // optional, default is 0.
bottom: -6, // optional, default is 0.
right: 0 // optional, default is 0.
},
title: 'Employee List', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
navigatorButtons: {
rightButtons: [
{
icon: require('../img/navicon_add.png'), // for icon button, provide the local image asset name
id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
}
]
} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
},
{
label: 'One', // tab label as appears under the icon in iOS (optional)
screen: 'manager.FirstTabScreen', // unique ID registered with Navigation.registerScreen
icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
iconInsets: { // add this to change icon position (optional, iOS only).
top: 6, // optional, default is 0.
left: 0, // optional, default is 0.
bottom: -6, // optional, default is 0.
right: 0 // optional, default is 0.
},
title: 'Screen One', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
},
{
label: 'Two',
screen: 'manager.SecondTabScreen',
icon: require('../img/two.png'),
selectedIcon: require('../img/two_selected.png'),
title: 'Screen Two'
}
];
switch (root) {
case 'user':
Navigation.startTabBasedApp({
tabs,
tabsStyle: {
tabBarButtonColor: 'white',
tabBarSelectedButtonColor: 'white',
tabBarBackgroundColor: '#099880'
}
});
break;
default:
Navigation.startSingleScreenApp({
screen: {
screen: 'manager.LoginScreen', // unique ID registered with Navigation.registerScreen
title: 'Log in', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
}
});
}
} // startApp
}
export default App;
I browsed other questions but most of them refer to react-navigation, I am using react-native-navigation.

Answer 1

Navigation.startTabBasedApp doesn't use a navigator - it simply invokes a native method that constructs the UI according to the object you've provided.
Make sure you call super(props) in firstScreentab so RNN can inject the navigator into your screen.