How to make simple button navigation to other view? - reactjs

Question

I am trying to make simple button navigation from one view to other ( I'm yet unsure that does this is called view or not ).
For example I have Featured.js as
var SearchPage = require('./Search');
class Featured extends Component {
showSearchPage(){
console.log('showing search page');
this.props.navigator.push({
title: "Search",
component: SearchPage
});
}
render() {
return (
<TouchableHighlight onPress={() => this.showSearchPage()}>
<View style={styles.row}>
<Text style={styles.label}>Open Search Page</Text>
</View>
</TouchableHighlight>
);
}
}
module.exports = Featured;
Then have Search.js as another Class very much like the Featured.js . How can i create a button in the view which on tap open Search.js view.
Currently I am getting "Can not read property push of undefined".
How to define navigator or there is other simple way to navigate?
NOTE: I don't want to make TabBar navigation.

Answer 1

So basically you have an app page which render either subviews depending on user actions.
First of all I suggest you use state instead of props for what you are doing (it's dynamic not static).
var SearchPage = require('./Search');
var Initial = require('./Initial');
var AnotherSubView = // ...
class Featured extends Component {
getInitialState: function() {
title: "initial",
component: <Initial/>
return({title:title, component:component});
}
showSearchPage(){
console.log('showing search page');
this.setState({
title: "Search",
component: <SearchPage/>
});
}
render() {
var title = this.state.title;
var component = this.state.component;
return (<div>
<TouchableHighlight onPress={() => this.showSearchPage()}>
<View style={styles.row}>
<Text style={styles.label}>Open Search Page</Text>
</View>
</TouchableHighlight>
{component}
</div>);
}
}
module.exports = Featured;
Use getInitialState to load your first/landing subview. Then change your component on click.
By the way the props was undefined because you didn't define it =p. And you should use setProps. Anyway I think this was not the right was to proceed but so you know.
Hope it helps!