reactjs


How to pass the navigator object to the components used in the react natives root file?


Below is my app component:
/**
* Class app from where the app bootstraps
*/
export default class App extends Component {
constructor(props) {
super(props);
}
// This is where all your routes will be processed
renderScene(route, navigator) {
// Set a variable to get the route
let RouteComponent = route.component;
_navigator = navigator;
// With props return the components
return (
<RouteComponent navigator={navigator} {...route.passProps} />
);
}
static navigationBarRouteMapper = openControlPanel => ({
LeftButton: function(route, navigator, index, navState) {
return (
// Hamburger icon which on clicked opens the menu
<TouchableOpacity style={navBarStyle.left} onPress={() => openControlPanel()}>
<View>
{hamburgerIcon}
</View>
</TouchableOpacity>
);
},
RightButton: function(route, navigator, index, navState) {
return (
// cart menu
<TouchableWithoutFeedback onPress={() => dismissKeyboard()}>
<View style={navBarStyle.right}>
{cartIcon}
<View style={navBarStyle.counter}>
<Text style={navBarStyle.counterText}>20</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
},
Title: function(route, navigator, index, navState) {
// Title of the route
return (
<TouchableWithoutFeedback onPress={() => dismissKeyboard()}>
<View style={navBarStyle.titleWrap}>
<Text style={navBarStyle.title}>{route.title.toUpperCase()}</Text>
</View>
</TouchableWithoutFeedback>
);
}
})
// Close the menu drawer
closeControlPanel() {
this._drawer.close();
}
// open the menu drawer
openControlPanel() {
this._drawer.open();
dismissKeyboard();
}
// On clicking the menu item, this function routes to that menu item page
getNavigator(route) {
this.refs.navigator.replace(route);
this.closeControlPanel();
}
render() {
return (
<Drawer
ref={ (ref) => { this._drawer = ref; } }
type="overlay"
content={<Menu navigator={this.getNavigator.bind(this)} menuItems={menu} closeControlPanel={this.closeControlPanel.bind(this)} />}
onOpenStart={() => dismissKeyboard()}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
panOpenMask={20}
acceptPan={true}
closedDrawerOffset={-3}
styles={drawerStyle}
tweenHandler={(ratio) => ({
// This code will maintain the opacity for main
// Whilst the opacity for the mainOverlay on the screen will be faded.
main: { opacity: 1 },
mainOverlay: {
opacity: ratio / 2,
backgroundColor: 'black',
}
})}>
<Navigator
initialRoute={homeScene}
renderScene={this.renderScene}
ref="navigator"
// Navbar of the app
navigationBar={
<Navigator.NavigationBar
routeMapper={App.navigationBarRouteMapper(this.openControlPanel.bind(this))}
style={navBarStyle.navBar}
/>
}
/>
<EditSearch />
</Drawer>
);
}
}
At the very bottom you'll see the <EditSearch> component which contains two text inputs. This component would be common to all the pages in the app except the home page.
Hence, I wanna know on which page or scene am I currently on so that I could check whether the scene/page is the home page or not. If it's the home page I would hide the component else I would show it for all other pages.
I tried passing the navigator via ref like so:
<EditSearch nav={this.refs.navigator} />
But, I get undefined on the <EditSearch> component and the view doesn't re-render when the page changes as it doesn't detect any state change.
I can do something like:
this.state = {
currentRoute: 'home'
}
And then change this state when route changes. But, I cannot change state within renderScene as setting state in renderScene will lead into infinite loop. If I could set this state with the title of the page when route changes, I could then send that state to <EditSearch> component.
I am pretty confused how can I pass current route information to this common component. Thanks in anticipation.
Okay, I found a solution but I am unsure if it's appropriate.
So below is my solution.
First I created the state and function to set that state:
constructor(props) {
super(props);
this.state = {
isHome: false
};
this.setIsHome = this.setIsHome.bind(this);
}
setIsHome(flag) {
// Set state to let component know whether the page is home or not
this.setState({
isHome: flag ? flag : false
});
}
Then passed the function to all the pages where those pages can either hide or show <EditSearch> component:
<RouteComponent navigator={navigator} {...route.passProps} setIsHome={this.setIsHome} />
Then I passed the isHome state to the <EditSearch> component:
<EditSearch isHome={ this.state.isHome } />
And this is how I call the function in the home component:
componentWillMount() {
this.props.setIsHome(true);
}
componentWillUnmount() {
this.props.setIsHome(false);
}
This is how I show/hide the component. I hope it's helpful. But, would be really nice to know how to pass navigator object to such components.
Here's a solution from Drawer Github issues.
Found a quick workaround for this but it is not ideal. If you wrap the
Navigator with the Drawer component, then inside of the
Navigator.NavigationBar you can set this.navigator = this.navigator ||
navigator and then you can pass the navigator to your content
component for the Drawer.
<Drawer
content={<Main navigator={this.navigator}/>}
type='overlay'>
<Navigator
renderScene={renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) => {
this.navigator = this.navigator || navigator;
return (
<View>
<Text>Something</Text>
</View>
);
}
}}
/>
/>
</Drawer>
https://github.com/root-two/react-native-drawer/issues/187#issuecomment-231461585

Related Links

Render React into Shadow Root
Accessing this.props.location.pathname within the Route component
Unit testing with enzyme got Cannot read property 'be' of undefined
Webpack Dev Server won't reload after CSS changes
How to determine if render() was invoked by an explicit setState() call or by parent component passing props to it?
Output data from API on page using ReactJs
React native navigator consuming too much memory
Update a nested value in a store
react component test cannot find text
Getting error when importing a react component: required is not defined
Foundation, React throw “el.data(…).split is not a function” when click on toggle button
Why webpack includes elliptic bn.js modules in my bundle
React component function
Reactjs multiple form submit
Dynamic Role Based Routing (React-Router)
Using `“homepage”` in package.json, without messing up paths for localhost

Categories

HOME
asterisk
http
teradata
locale
process
cryengine
crm
esxi
opc-ua
terminal
gnuradio
schema
sitemap
software-collections
soap-client
select2
velocity
ng2-charts
mongodb-replica-set
sha1
tag-cloud
google-calendar-api3
hapijs
google-street-view
aiml
ampscript
infinite-loop
wai-aria
android-wear-2.0
windowserror
libxml2
pypy
language-detection
imdb
snapkit
sampling
motherboard
lighting
anypoint-studio
area
armadillo
cowboy
idea-plugin
google-chrome-console
line-endings
remap
runtime-permissions
dotnet-cli
jcifs
sp
fckeditor
jtextarea
turbolinks
konakart
vga
mrunit
pebble-js
computability
lytro
syncano
autopep8
asp.net-2.0
jad
douglas-peucker
touch-typing
fedena
jsonschema2pojo
dirname
xpand
episerver-7
elixir-framework
internet-radio
acrofields
sygic
tlbimp
wpa
backbone-views
bho
moonscript
volatility
jexcelapi
quazip
lgpl
nyromodal

Resources

Encrypt Message