Add to global state in React Native without Redux

Question

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";

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]) {
        console.warn("howdoisavethis")
      }
  }
  this.props.navigation.navigate('Screen2', {
  })
}
render(){
return (
<View>
  <ImageBackground source={require("./assets/background.png")} style={styles.background} resizeMode="cover">
    <View style={styles.body}>  
    <Image source={require ('./assets/icon.png')}/>
    <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>
    <TouchableOpacity style={styles.saveButton}
    onPress={()=> {this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
  </ImageBackground>
</View>);}}

function Screen2() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={styles.textofalopa}>☕</Text>
    </View>
  );
}
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{headerShown: false}} />
        <Stack.Screen 
        name="Screen2" 
        component={Screen2}
        options={{headerShown: false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I've got a little app that takes a textInput and gives back an array key. What I aim to do is to have a couple states (3 or 4) and return array keys if those states meet a condition. I don't want to use Redux because I've been told it is unnecessarily complex for a small app.

I've seen some videos and posts with no avail. This solution from Raphael Estrada was the closest to success for me, but I couldn't make the submit() function change the global state the way it accesses this.state.sueldo.

I want to have another screen that saves another state, but I can't access HomeScreen's state2 from the outside, so I guess my best choice would be to create a global state. Is this possible, or do I need redux?

Unfortunately the code isn't colored for some reason. I'll try to make it easier to read — cratag, Oct 28 '20 at 17:52

score 0 · Accepted Answer · answered Oct 28 '20 at 19:18

I think I solved it. I add my solution for if anyone finds it useful in the future. Solved it by eliminating the class while passing parameters to routes

class HomeScreen extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }

I replaced every this.state and simply passed the parameter along with the navigation:

function HomeScreen({navigation}){
  const [text, setText] = useState('');
return (
<View>
     <TextInput style={styles.textInput}
      placeholder=""
      onChangeText={text => setText(text)}
      defaultValue={text}/>
    <View>
    <TouchableOpacity style={styles.saveButton}
    onPress={()=> navigation.navigate('Screen2', {
      bruto: text})}>
      <Text style={styles.saveButtonText}>Next</Text>
    </TouchableOpacity>
</View>);
}

This was the main code I followed and edited to get to the solution

Add to global state in React Native without Redux

1 Answers1