How to navigate to separate screen from function

Expo SDK
1

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 (Firebase Phone Auth - Snack and FirebaseRecaptcha - Expo Documentation) 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
this.props.navigation.navigate("InstructorSignUp");

SignUpScreen:

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) {
    super(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 }),
    this.setState({selected:data.label}),
    alert(this.state.selected);
  }

  onPressNextButton = () => {
    //Alert.alert(this.state.selected);
    if(this.state.selected==="instructor")
    {
      this.props.navigation.navigate("AnotherScreenA");
    }
    else {
      this.props.navigation.navigate("AnotherScreenB");
    }
  }

  render() {

    return (
      <View style={styles.container}>
        <Text>
          Sign Up
        </Text>
        <TextInput
          ...
        />
            
        <Button
          title='Next'
          style={styles.input}
          onPress={this.onPressNextButton}
        />
      </View>
    );
  }
}

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) {
    super(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.

Thanks

2

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