Skip to main content
Incorporación de la solución al problema presentado.
Origen Enlace
Raul
  • 43
  • 1
  • 7
 

La idea es implementarlo en una App (sin Expo)..: 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')

La idea es implementarlo en una App (sin Expo).

 

.: 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')

Origen Enlace
Raul
  • 43
  • 1
  • 7

¿Cómo puedo evitar el Alert si ya guardé los cambios?, utilizando navigation.addListener('beforeRemove'

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.

La idea es implementarlo en una App (sin Expo).