How to navigate to separate screen from function

Please provide the following:

  1. SDK Version: 38.0.8
  2. Platforms(Android/iOS/web/all): Android/iOS

I got this firebase phone verification function working ( and that I’m treating as PhoneScreen. I’m able to navigate to this screen from other screens (from SignUpScreen) I don’t know how to navigate to other screen from PhoneScreen.

This is my App.tsx:

// Screens
import LoginScreen from './screens/LoginScreen';
import SignUpScreen from './screens/SignUpScreen';
import ProfileScreen from './screens/ProfileScreen';
import PhoneScreen from './screens/PhoneScreen';

//React Navigation Setup
import {  createAppContainer, createSwitchNavigator } from 'react-navigation';

const MainNavigator = createSwitchNavigator({
  Login: { screen: LoginScreen },
  Phone: {screen: PhoneScreen},
  SignUp: {screen: SignUpScreen},
  Profile: { screen: ProfileScreen },

const App = createAppContainer(MainNavigator);

export default App;

Here’s how I’ve been doing navigation in other screens (SignUpScreen) using something like this


import React, { Component } from "react";
import { Text, View, StyleSheet, Button, TextInput, Alert } from "react-native";
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
import { FirebaseRecaptchaVerifierModal } from "expo-firebase-recaptcha";
import * as firebase from "firebase";

export default class SignUpScreen extends Component {
  constructor(props) {
    this.state = {
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        phone: '',
        yoe: '0',
        skill: 'beginner',
        data: [{label: "Student", value: "student"}, 
              {label: "Instructor", value: "instructor"}],
        selected: 'student',
  // update state
  onPress = (data) => {
    this.setState({ data }),

  onPressNextButton = () => {
    else {

  render() {

    return (
      <View style={styles.container}>
          Sign Up

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  input: {
    width: 200,
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,

What I think is the cause is because of the difference of the class and function headers. For all my other screens, it’s like this:

export default class SignUpScreen extends Component {
  constructor(props) {
    this.state = {...}

  render() {
     return (...)

But the example Firebase phone auth example I’m using as my PhoneScreen file is like this:

export default function PhoneScreen() {

I tried converting the

export default function PhoneScreen() {}
export default class PhoneScreen extends Component {}

as well as restructuring the this.state variables and such, but I keep getting errors. Is there any easy way to do navigate to another screen from the PhoneScreen file? I’m just started learning Expo/RN, having some knowledge of JavaScript prior.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.