I am using Redux for other purposes, and I was wondering if is possible using standard React-Navigation with no integration in redux just registering the screens and using this.props.navigation.navigate as a function to navigate
This is in App.js
export default class App extends Component {
render() {
const Navigation = StackNavigator({
Home: {screen: Home },
Page: {screen: Page },
});
return (
<Provider store={store}>
<Home />
</Provider>
);
}
}
and this is in home.js
<Button transparent style={{position: 'absolute', top: 0}} onPress={() => this.props.navigation.navigate("Page")}>
<Text style={{ color: '#403f3f' }}>10</Text>
</Button>
Pressing on the button I get 'undefined is not an object(evaluate this.props.navigation.navigate)'
Yes, but you have to render the whole StackNavigation, in your case <Navigation/> instead of <Home/>.
Related
In my application I have an header component with a SearchBox and label and I have used that component in the drawer menu for a common layout and that component is appearing as a generic search component in all of my screen.My header component is like this ..
return (
<Block style={headerStyles}>
<NavBar
back={back}
title={title}
style={styles.navbar}
transparent={transparent}
right={this.renderRight()}
rightStyle={{ alignItems: "center" }}
leftStyle={{ flex: 0.3, paddingTop: 2 }}
leftIconName="navicon"
leftIconColor={white ? theme.COLORS.WHITE : theme.COLORS.ICON}
titleStyle={[
styles.title,
{ color: theme.COLORS[white ? "WHITE" : "ICON"] }
]}
onLeftPress={this.handleLeftPress}
/>
<Input
right
color="black"
style={styles.search}
placeholder="What are you looking for?"
iconContent={
<Icon
size={16}
color={theme.COLORS.MUTED}
name="magnifying-glass"
family="entypo"
/>
}
/>
</Block>
);
And inside my menu I have used it like this.
const DashboardStack = createStackNavigator(
{
Components: {
screen: DashboardScreen,
navigationOptions: ({ navigation }) => ({
header: (
<Header
title="Dashboard"
navigation={navigation}
/>
)
})
},
ProductDetail: {
screen: ProductDetailsTest
}
},
{
cardStyle: { backgroundColor: "#EEEEEE" },
transitionConfig
}
);
Now I want to call a search functionality in my Dashboard screen how I will implement this.Any reference for that >
Thanks
Utpal Maity
If I understand your question correctly, you want to use Header component's search functionality in one of your screens.One of the ways you can achieve this is, render Header component in your rootApp component(where you are initialising stackNavigator ) and have a ref assigned to it. Then, you can pass this ref as screen props to stackNavigator(rootNavigator) component. With this, all screens will have access to your Header component.
Hope this solves your query.
Refer : https://reactnavigation.org/docs/en/navigation-options.html
Refer:How screenProps can be used? and make changes according to your requirements.
Edit: I'll try to provide an example..
1.Create your AppContainer with your AppNavigator like you have done..
const ScreenStack = createAppContainer(createStackNavigator(
{
Components: {
screen: DashboardScreen,
},
ProductDetail: {
screen: ProductDetailsTest
}
},
{
cardStyle: { backgroundColor: "#EEEEEE" },
transitionConfig
}
))
2.Render ScreenStack in a Component called Root with your Header component with ref passed to it and pass Header component as screenProps to ScreenStack
class Root extends React.Component{
....
render(){
return(){
<View style={{flex:1}}>
<Header ref={this.header}></Header>
<ScreenStack
ref={this.navigator}
screenProps={{header: this.header }}
/>
</View>
}
}
}
export default Root
3.Now, in your App.js render Root
//import Root
class App extends React.Component {
render() {
return (
<Root />
);
}
}
Now, you should be able to access Header in any of the screens and use method of searching like this.props.screenProps.header.current.search()
Hope, this helps you!!
1.Can't navigate to the screen from inside the content component to the mention screen
import React, { Component } from "react";
import {View,Text,Button,Image,StyleSheet,TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import SettingsScreen from '../screens/SettingsScreen'
export default class DrawerScreen extends Component{
static navigationOptions= ({navigation}) =>({
});
render(){
return(
<View style={styles.container}>
<Image style={styles.Image}
source={require('../images/defalut.png')} />
<Text> #username </Text>
<View>
<Icon
name='ios-settings'
color='#000'
size={14}
/>
<Button
onPress={() =>{
const { navigate } = this.props.navigation.navigate;
navigate('SettingsScreen')}}
color="orange"
title="Settings"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
Image:{
width:70,
height:80,
borderRadius:40
}
});
Navigating to screen from contentComponent in drawer isnot working using the props function it still shows the error
and the still it can't navigate to the screen
Unfortunately I cannot yet add comments, so I have to use an answer.
Have you defined a route for your DrawerScreen Component?
Otherwise it will not get the navigation as a prop, afaik.
The problem is here:
const { navigate } = this.props.navigation.navigate;
navigate('SettingsScreen')}}
You are trying to take the navigate function from the navigate function.
What is the problem with using just:
this.props.navigation.navigate('SettingsScreen');
I've been working with the default tabs project created with create-react-native-app.
So I created my own screen where this.props.navigation is accessible in the main (export default class) component. It works fine to do navigate('Search') from the button titled 'nav default'.
However, after many tries, I couldn't navigate from either the button in the headerRight or in my custom component MyComponent.
How do I change my alerts to instead do navigate('Search') like the main component?
import React from 'react';
import { Button, Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native';
class MyComponent extends React.Component {
// i wish i could navigate from here
render() {
//const { navigate } = this.props.navigation; // this causes TypeError undefined is not an object (evaluating this.props.navigation.navigate)
return (
<View>
<Button title="nav from component" onPress={() => alert('This should navigate, not alert')} color="red" />
</View>
);
}
}
export default class MyScreen extends React.Component {
// i wish i could navigate from here too
static navigationOptions = {
title: 'Test',
headerRight: (
//<Button onPress={() =>navigate('Search')} /> // how do I achieve this?
<Button title="nav from header" onPress={() => alert('This should navigate, not alert')} />
),
};
render() {
const { navigate } = this.props.navigation;
return (
<ScrollView style={styles.container}>
<Button onPress={() =>navigate('Search')} title="nav default" />
<MyComponent />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff',
},
});
There are two different problems. First, navigation is only passed as a prop to the components that are navigation screens. So, to access it from other components, such as your MyComponent, you have to pass it through props <MyComponent navigation={navigation} /> and then you can use this.props.navigation.navigate inside it. You can also use the withNavigation higher order component, but in that case the first approach is better.
The other problem is, if you want to access the navigation prop in navigationOptions, you should define it as a function, and not as an object. The implementation would be something like this:
static navigationOptions = ({ navigation }) => ({
title: 'Test',
headerRight: (
<Button onPress={() =>navigation.navigate('Search')} />
),
});
I'm attempting to use a React Navigation StackNavigator for a process that includes a static component at the top of the page and varying components at the bottom. The code I'm using is:
const Navigator = StackNavigator ({
splash: Splash,
prompt: Prompt,
pinCheck: PinCheck
}, {
initialRouteName: 'splash'
});
export default class Login extends React.Component
{
constructor (props)
{
super (props);
// code to set up animation state
}
componentDidMount()
{
// code to set up animation
}
finish_ (state)
{
this.props.navigation.navigate ('main', state);
}
render()
{
const screen = Dimensions.get('screen');
return (
<KeyboardAvoidingView style={Global.styles.verticalFill} ref={this.saveContainerRef}>
<ScrollView style={{flex: 1}} contentContainerStyle={{justifyContent: 'space-between'}}>
<Animated.View style={{opacity:this.state.fade1,alignItems:'center'}} >
<Image
style={{width:screen.width * 0.6,height: screen.height*0.55}}
source={imgLogo}
resizeMode='contain'
/>
<Navigator />
</Animated.View>
</ScrollView>
</KeyboardAvoidingView>
);
}
}
When I run this, however, my initial route component is not shown. It works correctly if I swap <Navigator/> to <Splash/> however, so the component itself definitely works in this context.
Any ideas what's wrong?
There is a problem in your navigation setup.
All the routes in the StackNavigator must declare a screen
as mentioned in the docs
const Navigator = StackNavigator ({
splash: {
screen: splash
},
prompt: {
screen: prompt
},
pinCheck: {
screen: pinCheck
}
}, {
initialRouteName: 'splash'
})
I'm trying 'DrawerLayoutAndroid' in react native with inside the drawer I added the react-navigation 'stackNavigator' to navigate between screen.What I'm trying to do
but the problem is when I navigate it opens in the drawer
How do I open it full screen as a normal page
Is there a better method to achieve this
(redux state ?)
Thank you in advance
I found a solution
what I did is created a routing page and added it as the root component
routes.js
import Main from '../screens/main';
import Ad from '../screens/adView';
export const AdNav = StackNavigator({
Home:{screen:Main,
navigationOptions:{
header:null,
}
},
Ad:{screen:Ad,
navigationOptions:{
title:'Details',
}}
}
);
App.js
import {AdNav} from './src/config/routes';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<AdNav />
</View>
);
}
}
Then I added DrawerLayoutAndroid to the main screen
inside the drawer layout I used stackNavigator to navigate with no issues
main screen with DrawerLayoutAndroid
render() {
var navigationView = (
<View style={{flex: 1}}>
<Button onPress={()=>this.props.navigation.navigate('Ad')} title="go to next page"/>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.container}>
{/*content*/}
</View>
</DrawerLayoutAndroid>
);
}
}