0

Necesitaría adaptar el siguiente código obtenido de React Navigation Docs (Snack), para evitar el Alert si ya he "guardado los cambios" antes de intentar regresar a la página anterior (por ejemplo si ya los he guardado a través de un botón, utilizando AsyncStorage.setItem). El código sólo detecta cambios en el campo text y mas allá de haber guardado o no previamente dichos cambios, siempre genera el Alert cuando se pretende regresar.

import * as React from 'react';
import { Alert, View, TextInput, StyleSheet } from 'react-native';
import { Button } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const EditTextScreen = ({ navigation }) => {
  const [text, setText] = React.useState('');

  const hasUnsavedChanges = Boolean(text);

  React.useEffect(
    () =>
      navigation.addListener('beforeRemove', (e) => {
        const action = e.data.action;
        if (!hasUnsavedChanges) {
          return;
        }

        e.preventDefault();

        Alert.alert(
          'Discard changes?',
          'You have unsaved changes. Are you sure to discard them and leave the screen?',
          [
            { text: "Don't leave", style: 'cancel', onPress: () => {} },
            {
              text: 'Discard',
              style: 'destructive',
              onPress: () => navigation.dispatch(action),
            },
          ]
        );
      }),
    [hasUnsavedChanges, navigation]
  );

  return (
    <View style={styles.content}>
      <TextInput
        autoFocus
        style={styles.input}
        value={text}
        placeholder="Type something…"
        onChangeText={setText}
      />
    </View>
  );
};

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.buttons}>
      <Button
        mode="contained"
        onPress={() => navigation.push('EditText')}
        style={styles.button}
      >
        Push EditText
      </Button>
    </View>
  );
};

const Stack = createStackNavigator();

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

const styles = StyleSheet.create({
  content: {
    flex: 1,
    padding: 16,
  },
  input: {
    margin: 8,
    padding: 10,
    borderRadius: 3,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(0, 0, 0, 0.08)',
    backgroundColor: 'white',
  },
  buttons: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
  },
  button: {
    margin: 8,
  },
});

Tal vez haya otro modo de hacerlo. Agradezco cualquier ayuda.


.: SOLUCIÓN IMPLEMENTADA (06JUL2021) :. Finalmente he creado la siguiente función:

const statusNavigation = (statementArg, navigation)  => {
  navigation[statementArg]('beforeRemove', (e) => {
    const action = e.data.action;
    e.preventDefault();
    Alert.alert(
      '¿Descarta los cambios?',
      'Tiene cambios sin guardar. ¿Está seguro de descartarlos y regresar a la pantalla anterior?',
      [
        { text: "Permanecer", style: 'cancel', onPress: () => {} },
        {
          text: 'Descartar',
          style: 'destructive',
          onPress: () => navigation.dispatch(action),
        },
      ]
    );
  });
};

Luego, simplemente llamo a la función desde donde la necesite y como la necesite:

flagModify ? StatusNavigation('removeListener', 'false') : StatusNavigation('addListener', 'true')

1 respuesta 1

1

Se me ocurre lo siguiente

import React, { useState } from 'react';
//...

const EditTextScreen = ({ navigation }) => {
  const [text, setText] = useState('');
  const [editing, setEditing] = useState(false);

  // Agregas el listener al editar el input
  const onEditingInput = (txt) => { 
    setText(txt);
    if(!editing) {
      setEditing(true);
      navigation.addListener('beforeRemove', (e) => {...}
    }

  };
  // Al guardar borras el listener
  const onSave = () => {
    if(editing){
      setEditing(false);
      navigation.removeListener('beforeRemove', (e) => {...}
      navigation.navigate.goBack();
    }
  }
  //...
};
3
  • Inconveniente solucionado @Esteban, funciona a la perfección!. Muy agradecido. Quisiera optimizar el código, por ejemplo navigation.addListener('beforeRemove', (e) => {...} y navigation.removeListener('beforeRemove', (e) => {...} podría escribirlo en una función que solo reciba el método addListener o removeListener como argumento, ya que el resto es igual. Entonces, dentro de la función, aplicaría navigation.<ARGUMENTO>('beforeRemove'... El punto es que desconozco la sintaxis para reemplazar el método por el argumento recibido en la función..., ¿Sabés cómo? Espero haberme explicado.
    – Raul
    Commented el 2 jul. 2021 a las 22:49
  • 1
    Raul. Lo ideal para tal caso que comentas, es hacer una función, ej: const beforeRemove = () => { ...aquí pegas todo el listener }. Luego solo la llamas dentro de cada listener: navigation.addListener('beforeRemove', beforeRemove()); y lo mismo para el remove. Así evitas duplicidad de código. Commented el 5 jul. 2021 a las 20:35
  • Sí Esteban, hice una función con el navigation incluído, quedó como quería. Ahora publico cómo lo resolví.
    – Raul
    Commented el 6 jul. 2021 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.