Added StackNavigator to my app project, but I can't make it work with a Class I had

Question

Okay so I had a working app that took some text within a textInput and changed the state, and returned some alert with the Object.keys that matched such criteria.

import React from 'react';
import {ImageBackground, Image, TouchableOpacity, TextInput, Text, View, Keyboard, } from 'react-native';

import styles from "./comp/styles.js"
import listadoPrep from "./comp/list.json";

var logo = require ('./assets/icon.png');

class App extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }
submit(){
  for (let key of Object.keys(listadoPrep)) {
    if(this.state.sueldo <= listadoPrep[key][0]) {
        alert(key);
      }
  }
}
render(){
return (
  <View style={styles.container}>
    <ImageBackground source={require("./assets/background.png")} style={styles.background}>
    <View style={styles.body}>
    <Image source={logo}/>
    <Text style={styles.text}>¿Cuál es tu sueldo bruto?</Text>
    <TextInput style={styles.textInput}
      placeholder="No hace falta que sea exacto, podés redondear 🤩"
      maxLength={6}
      onBlur={Keyboard.dismiss}
      value={this.state.sueldo}
      onChangeText={(text)=>{this.setState({sueldo:text})}}/>
    <View style={styles.inputContainer}>
    <TouchableOpacity style={styles.saveButton}
      onPress={()=>{this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
    </ImageBackground>
  </View>
  );
}
}


export default App;

First app

and then I tried to add some stack navigator, but I can't manage to get the Class to work anywhere. I believe the Class is required to make a Constructor , but I don't understand this concept very good just yet.

This is the code I began with, adding StackNavigator

import React from 'react';
import {ImageBackground, Image, TouchableOpacity, TextInput, Text, View, Keyboard, } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import styles from "./comp/styles.js"
import listadoPrep from "./comp/list.json";
var logo = require ('./assets/icon.png');

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I simply do not know how to import the work I've already done in the previous app to this StackNavigator . I'll study some more about constructors right now

Answer 1

You have a new app.js now which will be the starting point of your app.

So simply rename the Class App as Class HomeScreen and you can use it in the stack navigator like below

class HomeScreen extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }
submit(){
  for (let key of Object.keys(listadoPrep)) {
    if(this.state.sueldo <= listadoPrep[key][0]) {
        alert(key);
      }
  }
}
render(){
return (
  <View style={styles.container}>
    <ImageBackground source={require("./assets/background.png")} style={styles.background}>
    <View style={styles.body}>
    <Image source={logo}/>
    <Text style={styles.text}>¿Cuál es tu sueldo bruto?</Text>
    <TextInput style={styles.textInput}
      placeholder="No hace falta que sea exacto, podés redondear 🤩"
      maxLength={6}
      onBlur={Keyboard.dismiss}
      value={this.state.sueldo}
      onChangeText={(text)=>{this.setState({sueldo:text})}}/>
    <View style={styles.inputContainer}>
    <TouchableOpacity style={styles.saveButton}
      onPress={()=>{this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
    </ImageBackground>
  </View>
  );
}
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

You can have any name for the class, the component you provide here will be shown in the stack

 <Stack.Screen name="Home" component={HomeScreen} />