Git Product home page Git Product logo

Comments (22)

JakeDluhy avatar JakeDluhy commented on March 29, 2024 93

I haven't worked in this library for a while, but it looks like in the current docs

static navigationOptions = ({ navigation, screenProps }) => ({
  title: "My Profile!",
  headerRight: <Button title="Menu" onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }} />,
});

is almost the right way to go about it. You have the navigation passed in with object destructuring with the navigationOptions (static navigationOptions = ({ navigation, screenProps })) which looks right according to the to docs. But you're also doing onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }} and so in the context of navigation.navigate you're using the locally scoped navigation as opposed to the one from the navigationOptions. The one you're using is probably the press event.

Try onPress={()=>{ navigation.navigate('DrawerOpen'); }}

from react-navigation.

JakeDluhy avatar JakeDluhy commented on March 29, 2024 45

The first prop in dynamic configuration is the navigation object. So it would look like

header: (navigation) => ({
  title: 'Options',
  right: <Button title='About' onPress={() => navigation.navigate('Options')} />
})

Ref: https://reactnavigation.org/docs/navigators/navigation-options

from react-navigation.

davidtoomey avatar davidtoomey commented on March 29, 2024 28

@zero88
Adding static navigationOptions = ({ **navigate,** navigation }) => and removing
headerRight: <Button title="Name" onPress={**()=>**{ navigation.navigate('viewname'); }} />,
is what fixed it for me

static navigationOptions = ({ navigate, navigation }) => ({
   title: "Title",
   headerRight: <Button title="Name" onPress={()=>{ navigation.navigate('viewname'); }} />,
 })

from react-navigation.

ivnxyz avatar ivnxyz commented on March 29, 2024 18

@xero88
Change
(navigation) => {navigation.navigate('YourViewNameHere')
To
() => {navigation.navigate('YourViewNameHere')

That should work

from react-navigation.

tutizaraz avatar tutizaraz commented on March 29, 2024 18

You can try

const stackNavigatorConfig = {
  initialRouteName: 'InititalRoute',
  navigationOptions: ({ navigate, navigation }) => ({
    headerRight: (
      <TouchableOpacity
        onPress={() => navigation.navigate('YourRoute')}
      >
        <Text>Click</Text>
      </TouchableOpacity>
    )
  }),
}

from react-navigation.

LordRahl90 avatar LordRahl90 commented on March 29, 2024 6

@JakeDluhy so i tried

static navigationOptions=({navigation})=>({ title:"New Post", headerTintColot:'blue', header: (navigation) => ({ title: 'Options', right: <Button title='About' onPress={() => navigation.navigate('Options')} /> }) });

and i am getting this error
`Objects are not valid as a React child (found: object with keys {title, right}). If you meant to render a collection of children, use an array instead.

Check the render method of 'View'`
Please what am i doing wrong???

from react-navigation.

redbar0n avatar redbar0n commented on March 29, 2024 4

@dbarabashdev

navigationOptions: ({ navigate, navigation }) => ({

should be:

navigationOptions: (navigation) => ({
  // and, futhermore...
  const navigate = navigation.navigate;

since it's the navigation object which the function receives.

from react-navigation.

ajaymalviya001 avatar ajaymalviya001 commented on March 29, 2024 2

static navigationOptions = {
headerLeft: (<Image source={require('../images/category/menu.png')} style={ {'height':25, 'width':25}}/>),
title: 'Services',
headerTintColor: "white",
headerStyle: {
backgroundColor: '#e6097a',
},
};

Need on press event when press on headerleft button anyone help me

from react-navigation.

LordRahl90 avatar LordRahl90 commented on March 29, 2024 1

@JakeDluhy
I tried this too
static navigationOptions = ({ navigation, screenProps }) => ({ title: "My Profile!", headerRight: <Button title="Menu" onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }} />, });

but i am getting
Unhandled JS Exception: navigation.navigate is not a function

from react-navigation.

nebula-ai avatar nebula-ai commented on March 29, 2024

Works! Thanks for the help

from react-navigation.

mesbahsabur avatar mesbahsabur commented on March 29, 2024

Great! thanks @JakeDluhy

from react-navigation.

LordRahl90 avatar LordRahl90 commented on March 29, 2024

@JakeDluhy
Thanks a lot for this insight... that was the perfect way to go.. i was using the locally scoped navigation and it works pretty well now...
i really appreciate.

from react-navigation.

patelkunala avatar patelkunala commented on March 29, 2024

@JakeDluhy Your last line in the last comment did the trick! navigation from the outermost scope (i.e.
static navigationOptions = ({navigation, screenProps}) ought to be used instead of the local one passed from the immediate local one. Thank you!

from react-navigation.

superlbr avatar superlbr commented on March 29, 2024

I put 'static navigationOptions' in react.componets for a screen,
it's no use.
only I pass navigationOptions in 'StackNavigator({...})' that work, but I cannot put a navigate button this way.

from react-navigation.

LordRahl90 avatar LordRahl90 commented on March 29, 2024

@ajaymalviya001 y not overlay a button with that image or make the image itself clickable... but i think its better if you add a button to the headerLeft, then overlay the button with the image...
moreso, why not use vector icons instead of image? well, unless they are localised for the customer.
My Proposed solution will be:
static navigationOptions = { headerLeft: ( <Button onPress={(navigation)=>{ navigation.navigate('DrawerOpen')}}> <Image source={require('../images/category/menu.png')} style={ {'height':25, 'width':25}}/> </Button>), title: 'Services', headerTintColor: "white", headerStyle: { backgroundColor: '#e6097a', }, };

from react-navigation.

anthony-bernardo avatar anthony-bernardo commented on March 29, 2024

I get 'navigation.navigate is not a function' error

from react-navigation.

isaaclem avatar isaaclem commented on March 29, 2024

@davidtoomey first argument of navigationOptions navigate doesn't seems needed to be there as navigate coming from navigation

from react-navigation.

lmjcvm avatar lmjcvm commented on March 29, 2024

@dbarabashdev this works for me.....but other option like headerTitle or headerStyle did not work

from react-navigation.

wrossier avatar wrossier commented on March 29, 2024

Hi,

It's writing in the doc : https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

  /* render function, etc */
}

from react-navigation.

jussellymoreno1394 avatar jussellymoreno1394 commented on March 29, 2024

@JakeDluhy Hey, thanks a lot for help.

from react-navigation.

kumarideepika avatar kumarideepika commented on March 29, 2024

Hi,

I'd like to ask for an example of invoking .navigate from with the left or right elements of a header. Something along the line of

header: ({ state, setParams }) => {
   // The navigation prop has functions like setParams, goBack, and navigate.
   let right = (
     <Button
       title="Options"
       onPress={() => this.props.navigation.navigate('Options')}
     />
   );
   return { right };
 },

where Options is another screen. The above doesn't work. I'm missing how to get hold of the navigation object.

Thanks
below line work fine ..............
Instead of declaring const navigation into constructor do this line
onPress={() => this.props.navigation.push('ProductList')}

Its working fine

from react-navigation.

 avatar commented on March 29, 2024

You can try

const stackNavigatorConfig = {
  initialRouteName: 'InititalRoute',
  navigationOptions: ({ navigate, navigation }) => ({
    headerRight: (
      <TouchableOpacity
        onPress={() => navigation.navigate('YourRoute')}
      >
        <Text>Click</Text>
      </TouchableOpacity>
    )
  }),
}

It worked

from react-navigation.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.