Skip to content

Instantly share code, notes, and snippets.

@surajsly

surajsly/react native code snippets

Last active March 10, 2021 18:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save surajsly/92cb9643a11f99c6c940755e90f45ef4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save surajsly/92cb9643a11f99c6c940755e90f45ef4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. surajsly revised this gist Mar 10, 2021. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions react native code snippets
    View file
    Original file line number Diff line number Diff line change
    @@ -57,3 +57,15 @@ React.useEffect(() => {
    [navigation, hasUnsavedChanges]
    );

    // How to remove header from react native tab
    // SET options={{ headerShown: false }} IN <TabOneStack.Screen>
    // EXAMPLE

    <TabOneStack.Navigator>
    <TabOneStack.Screen
    name="TabOneScreen"
    component={TabOneScreen}
    options={{ headerShown: false }}
    />
    </TabOneStack.Navigator>

  2. surajsly revised this gist Mar 10, 2021. 1 changed file with 36 additions and 1 deletion.
    37 changes: 36 additions & 1 deletion react native code snippets
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // brevent default back behavior
    // change default back behavior for screens

    React.useEffect(() => {
    const backAction = () => {
    @@ -21,4 +21,39 @@ React.useEffect(() => {
    return () => backHandler.remove();
    }, []);

    // change back behavior for one particular scree

    const navigation = useNavigation();

    const hasUnsavedChanges = true;

    React.useEffect(
    () =>
    navigation.addListener("beforeRemove", (e) => {
    if (!hasUnsavedChanges) {
    // If we don't have unsaved changes, then we don't need to do anything
    return;
    }

    // Prevent default behavior of leaving the screen
    e.preventDefault();

    // Prompt the user before leaving the screen
    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",
    // If the user confirmed, then we dispatch the action we blocked earlier
    // This will continue the action that had triggered the removal of the screen
    onPress: () => BackHandler.exitApp(),
    },
    ]
    );
    }),
    [navigation, hasUnsavedChanges]
    );

  3. surajsly created this gist Mar 10, 2021.
    24 changes: 24 additions & 0 deletions react native code snippets
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    // brevent default back behavior

    React.useEffect(() => {
    const backAction = () => {
    Alert.alert("Hold on!", "Are you sure you want to go back?", [
    {
    text: "Cancel",
    onPress: () => null,
    style: "cancel",
    },
    { text: "YES", onPress: () => BackHandler.exitApp() },
    ]);
    return true;
    };

    const backHandler = BackHandler.addEventListener(
    "hardwareBackPress",
    backAction
    );

    return () => backHandler.remove();
    }, []);