I am using the Navigator component for React Native and so far so good, but ...
I can't seem to push() to the navigator from within the same component. Here is an example:
updateNav(){
navigator.push({page: 'newPage'});
}
render(){
return (
<Navigator initialRoute={{page: INITIAL_TAB}} />
)
}
When I call
updateNav()
I get an error saying that 'navigator' is undefined.
Also, I can pass the navigator to children and update the Navigator from the children via 'props' with no problem. But I have a case where I need to update the push to the Navigator from within the same component that has the Navigator component.
The navigator is a property that you pass down to your scenes, so it won't be available in the same component you're rendering Navigator. I ran into this issue too and just moved up the Navigator to a higher component and made the current one the initial route.
I think navigator should be on your props
this.props.navigator
Related
I want to embed a stack navigator inside a Custom Modal component. Is there a way to do that with react navigation v4?
Basically I have a ModalCustomComponent, which is a filter Modal, and inside that I want to use a stack navigator to show different filter stages. I don't want to use the default react navigation modal mode but my own custom component only.
I don't know, is it possible to use stack navigator inside modal.
but for filter stages inside modal, I use this code
const [indexStage, setIndexStage] = useState(0)
const stages = [<FirstStage/>,<SecondStage/>,<ThirdStage/>]
return <Modal>{stages[indexStage]}</Modal>
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
I'm developing my first react native app. I've an issue with the nested navigations in the app.
I've the following navigations:
Main App Navigator : createStackNavigator
Authentication Navigator : createStackNavigator
Bottom Bar Navigator : createBottomTabNavigator
Top Tab Navigator : createMaterialTopTabNavigator
My too nested Navigator : createStackNavigator
What i want ?
I'm trying to hide the BottomBar & TopTab Navigators headers form a screen in the last nested navigator.
What I did?
Ive tried to set the header as null in my nested nav, but thats hides the nested header not the parents headers.
I also tried to set the parents headers as nulls, but thats hide them from all screen.
I need to only hide them in this nested screen. Can I change the parents headers property from my nested React Class?
Unfortunately, I didn't figure how to do that without using redux.
So I had to do a workaround.
I declared my Nested Navigator directly in the Main Navigator. "in the same level as Authentication & Bottom Bar Navigations" and set the header as null for this specific nav.
And then, navigate to that nested whenever i want.
Also, I had to add my custom icon to navigate the user back. because in our case there is no history in the new navigator in order to navigate back to.
so, i did like this:
static navigationOptions = ({ navigation }) => ({
headerLeft: (
<Icon
name="chevron-left"
color="#fff"
underlayColor="#4BA6F8"
onPress={() => {
const backAction = NavigationActions.back();
navigation.dispatch(backAction);
}}
/>
),
});
I know this is not the real answer for my question, but at least it solved my issue.
I'm new to react-navigation and I would like to pass "navigation" as a props so I could use it. Because when I tried to use it in the other compo It is throwing an error message saying "undefined this.props.navigation etc.."
So here is what I would like to do
goto={()=>this.props.navigation.navigate('ChatBox', {
avatarUrl: matches.avatarUrl,
name: matches.name,
navigation: this.props.navigation
})}
As you can see I'm passing navigation via props to my compo named 'ChatBox'. But the problem is that my 'ChatBox' compo is not receiving the navigation. Could someone help me ? thanks
There are a few concepts I think you missed out on.
Every component mentioned in the stack navigator class gets a navigation object in its scope. You can access the same by using this.props.navigation()
If you need to pass navigation object to any other screen not mentioned in the stack navigator class, you'll be required to provide it as props, such as <Chatbox navigation={this.props.navigation} />
In your case, your navigation object is correctly being sent, just that you are fetching it wrongly in your Chatbox component. Your navigation as a prop is encapsulated in the navigation object itself ( .i.e. its present in this.props.navigation.state.params.navigation ) and since you haven't mentioned Chatbox component in your stack navigator class, you can't reference the navigation object as it is currently out of scope.
So,
You can replace a component by rendering the <Chatbox/> component and provide it the props ( as mentioned in point 2 above ) instead of navigating to the component.
If you need to navigate to the component, you'll be required to define the Chatbox screen in the stack navigator class and then you can use your navigation object.
I am new in React Native ...just want ask nub question, my App wont triggered componentWillMount and componentDidMount when navigate back to other page,
I use react-native-router-flux for navigator
componentWillMount() {
this.props.searchRequest();
}
exp: I have homescreen and categories, from home I want go to categories: on categories I have that code, but sometime when I back to previouse page (homescreen) and back again on categories componentWillMount not triggered sometime,
I think my categories scene not unmounted
We can detect props change with
componentWillReceiveProps()
but we need set state to accommodate new props value,