Issues with React Native Navigation failing to navigate to different screens when a button is pressed

When clicking the button in my react-native application, I am unable to move from one screen to the next. I have set up a Stack Navigation and have checked that my pages are correctly configured based on my research. If you notice any issues, please let me know.

Root Stack

    import React from 'react'
    import {createSwitchNavigator} from 'react-navigation'
    import AuthNavigator from './stacks/AuthNavigator'

    /**
     * This file manages the switch navigators for different stacks within the application
     */

      const RootStack = createSwitchNavigator(
          {
              Auth: AuthNavigator
          },
          {
              initialRouteName: 'Auth'
          }
      )

      export default RootStack

AuthNavigator.JS

import React from 'react'
    import {createStackNavigator} from 'react-navigation-stack'
    import LoginSignUpView from '../../../src/page/account/LoginSignUpView'
    import SignUpView from '../../../src/page/account/SignUpView'

    const AuthNavigator = createStackNavigator(
        {
            "LoginSignUpView": LoginSignUpView,
            "SignUpView": SignUpView,
        }
        , { 
            initialRouteName: "LoginSignUpView"
        }
    );

LoginSignupView (Button Issue)

  import React, {Component} from 'react'
    import {View, ScrollView, Text, Image} from 'react-native'
    import LaunchOptions from '../../components/applaunch/LaunchOptions'
    import LaunchButtonStyle from '/Users/Documents/Mobile Applications/src/styles/Launch/LaunchButtonsStyle.styles.js'
    import LaunchButton from '../../components/applaunch/LaunchButton'
    import ImageStylesStyles from '../../styles/common/ImageStyles.styles'

    /**
     * This page allows a user to have the option to login or sign up to the application 
     * This page is the main controller of the Login/SignUp View ... All components should be placed here. 
     * User will look at this view 
     */

     class LoginSignUpView extends Component {
         // CHANGE NAVIGATION BAR COLOR -- SEE HOW BOOKIT DOES THIS 
        static navigationOptions = {
            title: 'The Plug ',
            headerStyle: {backgroundColor: 'black'}, 
            headerTitleStyle: {color: 'white', fontFamily: 'Impact', fontSize: 30} ,
          };
         render(){
             
             return(
                 <ScrollView style= {{backgroundColor: 'black'}}>
                    <View>
                        <Image
                        source = {require('../../Images/FontSearch.png')}
                        style = {ImageStylesStyles.logoDefaultStyle}
                        />
                        <LaunchOptions
                        text={'Create Account'}
//-----------------------BUTTON ISSUE HERE VVVVV
                        onPress={() => this.props.navigation.navigate("SignUpView")}
                        buttonStyle={LaunchButtonStyle.largeRoundBtn}
                        textStyle={LaunchButtonStyle.textStyle}
                        />
                    </View>
                <View style={{
                  borderBottomColor: 'white',
                  borderBottomWidth: 1,marginTop: 40
                    }}

                /> 
                <View>
                    <LaunchButton
                    text={"Already have an account? Login"}
                    OnPress={"props.OnPress"}
                    textStyle={LaunchButtonStyle.smallLgnSignupBtnTextStyle}
                    />

                </View>
                 </ScrollView>
             )
         }
     }

     export default LoginSignUpView

LaunchOptions:

import React from 'react'
import {View, Text, ScrollView} from 'react-native'
import launchTextStyle from '/Users/Documents/Mobile Applications/ThePlugNetwork/src/styles/loginSignUpTextStyle.styles.js'
import Button from '/Users/Documents/Mobile Applications/src/components/common/Button.js'

/**
 * Application Launch View for user to select to login or signup
 * 
 * @param {*} props 
 */

 const LaunchOptions = (props) => { 
     return(
         <ScrollView>
             <View>
                 <Text style={launchTextStyle.bigTextTop}>Stay</Text>
                 <Text style={launchTextStyle.bigText}>Connected</Text>
                 <Text style={launchTextStyle.mediumText}>With The Latest</Text>
                 <Text style={launchTextStyle.smallText}>Government Updates</Text>
            
             </View>
             <View>
                    <Button
                     OnPress={props.OnPress}
                     buttonStyle={props.buttonStyle}
                     textStyle={props.textStyle}

                    >                     
                         {props.text}
                </Button> 
             </View>

         </ScrollView>
        
     )
 }

 export default LaunchOptions

Answer №1

There appears to be a mistake in your code. You are passing the "onPress" function to the LaunchOptions component as a prop, but referencing it as "props.OnPress" instead of "props.onPress"

Recommendation: Consider adding a constructor to the LoginSignupView screen like so

constructor(props){
   super(props)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to change an existing boolean value in Prisma using MongoDB?

Exploring prisma with mongoDb for the first time and faced a challenge. I need to update a boolean value in a collection but struggling to find the right query to switch it between true and false... :( const updateUser = await prisma.user.update({ where: ...

Navigating through JSON objects in AngularJS is as simple as pie

I have a JSON structure that looks like this: var myJson = { "Number of Devices":2, "Block Devices":{ "bdev0":{ "Backend_Device_Path":"/dev/ram1", "Capacity":"16777216", "Bytes_Written":9848, "timestamp":"43 ...

Utilizing blueimp to upload an image and implementing a function structure that shares similarities

This is the outline of my structure: <html> <head> <title></title> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="vend ...

Enhance your website with the latest jQuery plugins and CSS

Currently, I am utilizing jQuery to develop plugins for my application. It is worth noting that each plugin demands a distinct CSS file. What approach should I follow to effectively load both the jQuery file and the respective CSS? Moreover, the plugins ...

Modify content on a link using AngularJS

Currently, my setup looks like this: HTML Code <div ng-app="home" ng-controller="customersCtrl"> <div ng-bind-html="home" id="content">{{content}}</div> </div> JS Code angular.module('home', []).controller('c ...

When a Vue.js Directive is inserted or bound, it actually takes precedence over the click event

Imagine having multiple dropdowns or elements on the page that all utilize a directive called "closable". This directive triggers an expression if the element clicked is outside of the element using the directive. The intended behavior is that when clicki ...

Ways to verify user authentication for navigating Vue routes

Working on a Single Page Application with Vue front-end, Express, and Parse (parse-platform) for back-end. After authenticating the user, I store their info in a session variable req.session.user = result; before sending it back to the client using res.sta ...

The color of a div tag generated by jQuery is always changing and never remains constant

I am trying to assign a random background color to each div with a class of "random-color". The code snippet that generates the random color using jQuery is functioning correctly, but there is an issue where the color disappears after 2 seconds. Here' ...

Is there a way to transmit a value from a page item on the client side to the server side in Oracle Apex without needing to submit the form?

I implemented a JavaScript function to capture the unique ROWIDs of selected rows in the GRID and send them to a specific page item. var gridView = apex.region("emp").call("getCurrentView"), selectedRecords = gridView.getSelectedRec ...

Create a jQuery URL within the $.ajax function

Attempting to execute a $.ajax call and send data to a php file. The php file is situated in a component's directory, while the js file is located in the webroot directory. How can the url section of the $.ajax be configured correctly to point to the ...

What is the best way to use NSSortDescriptor with an Array?

I successfully created an Array consisting of MyLocation objects with their respective distance property assigned in the initial tab of a tabBarController. Upon accessing the second tab, I retrieve it in the viewDidLoad method as shown below: [self setAnn ...

After one iteration of the loop, the jQuery variable is undefined

Currently, I am executing a loop that examines the content of div elements. These divs contain small puzzle pieces with data retrieved from XML files. I have a variable that iterates through div #1A to #4A. Subsequently, I use the same variable to enter ea ...

When retrieving UTC time from a BLE device and converting it, the displayed time is incorrect

For a Bluetooth device data capture project I'm working on, I've observed that the data from Bluetooth devices comes in the following format: [11, 6, 0, 231, 7, 1, 26, 11, 46, 45, 79, 1, 133, 176, 248, 0, 0] Here you can find more details about ...

Error: A property called 'node' is undefined and cannot be read

Currently attempting to complete the NPM installation process. I initiated with the following command: brew install node followed by curl -O https://www.npmjs.org/install.sh and then ~ % sh install.sh The resultant output is as follows: tar=/usr/bi ...

What is the improved method for setting a button's title?

My current approach involves the following: NSInteger senderTag = [sender tag]; However, what I truly desire is to retrieve the title or value of the button that was pressed rather than its tag ID. ...

Issue with Angular translation when utilizing a dynamic key variable

I am currently developing a project with Angular Js and incorporating the Angular-translate module In a specific scenario, I encountered an issue where the translation key needed to be stored as a variable. To address this, I created an object within the ...

Utilize AngularJS to determine the specific tag to select from a set list of Parse objects

I have a controller in AngularJS that retrieves objects from the backend using Parse: function MyController() { var self = this; var listObjects; function fetchObjects() { var myObject = Parse.Object.extend("MyObject"); var qu ...

The Chrome browser is experiencing delays with processing ajax requests, causing them

When I make a series of 8 requests in quick succession, they load successfully. However, any requests made after that get stuck in a "pending" state. Below is my basic HTML template: <!DOCTYPE html> <html> <head> <meta charset= ...

Incorporating Paypal's SDK into iOS_apps

Currently, I'm in the process of incorporating the iOS PayPal SDK into my app. Using Cocoapods, I have successfully installed it on my system. However, I am uncertain about how to link some of the necessary binary files. Should I download them separat ...

Guide to exporting Chrome browser console logs

Hey there! I have a little query for you. So, picture this: I'm typing loads of JS commands into a console log in Chrome, and then I want to return it... is that possible? Appreciate your help! Cheers, Andrew ...