CODEWITHSUNDEEP
react-native
Waleed Naveed
Waleed Naveed

Reputation: 2381

Navigation back click event in React Native

I am working on a React Native application. I am using navigation in my application. I want to do something when user presses back navigation i.e. moved to a back screen.

enter image description here

How can i get the click event of "blacked circle Frage" in the above image. I am working on IOS

Upvotes: 3

Views: 8951

Answers (5)

user1527225
user1527225

Reputation: 1089

It probably varies depending on the libraries you are using. I am using react-native-paper in Expo, which uses the headerLeft option in the Stack.Screen component. Here's a complete example - save it and then 'expo start'

import { Provider as PaperProvider, Text } from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer >
        <Stack.Navigator>
          <Stack.Screen
            name="Example"
            options={{
              title: 'Example',
              headerLeft: () => <Text>Custom left button</Text>,
            }}
            component={() => <Text>Example body text</Text>}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  )
}

Upvotes: 1

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3248

check this screen there are mutiple example of handling click event

import React from 'react';
    import { View, Text, StyleSheet, Button} from 'react-native';

    class DetailsScreen extends React.Component {

        static navigationOptions = ({ navigation, navigationOptions, screenProps }) => {
            return {
                title: navigation.getParam('title', 'A Nested Details Screen'),
            };
        };

        render() {
            const { navigation } = this.props;
            const itemId = navigation.getParam('itemId', 'NO-ID');
            const otherParam = navigation.getParam('otherParam', 'some default value');

            return (
                <View style={styles.detailsScreen}>
                    <Text>Details Screen</Text>
                    <Text>itemId: {JSON.stringify(itemId)}</Text>
                    <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                    <Button
                        title="Go to Details... again"
                        onPress={() => this.props.navigation.push('Details')}
                    />
                    <Button
                        title="Go to Home"
                        onPress={() => this.props.navigation.navigate('Home')}
                    />
                    <Button
                        title="Go back"
                        onPress={() => this.props.navigation.popToTop()}
                    />
                    <Button
                        title="Update the title"
                        onPress={() => this.props.navigation.setParams({ title: 'Updated!' })}
                    />
                    <Button
                        title="Modal"
                        onPress={() => this.props.navigation.navigate('MyModal')}
                    />
                </View>
            );
        }
    }


    const styles = StyleSheet.create({
        detailsScreen: { 
            flex: 1, 
            alignItems: "center", 
            justifyContent: "center" 
        }
    })

    export default DetailsScreen;

things you have asked in the comment section I could not find any exact answer for your question but you can take a look into this url how header buttons work

https://snack.expo.io/@react-navigation/simple-header-button-v3

hope this will work for you

 header: ({ goBack }) => ({
    left: ( <Icon name={'chevron-left'} onPress={ () => { goBack() } }  /> ),  
}),

you can also follow this page https://github.com/react-navigation/react-navigation/issues/779

Upvotes: 0

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2796

add the code 

onClick={this.props.navigation.goBack()}

or use specif navigation replace go back to

 onClick={this.props.navigation.navigate('namepagespacific')}

Upvotes: 0

Raj Gohel
Raj Gohel

Reputation: 1102

Use a custom header with

import { Header } from "native-base";

And add below code in your route file to disable default header.

navigationOptions: {
header: null
}

my custome header code for your reference

<Header style={styles.header}>
<View style={{ flex: 2 }}>
<TouchableOpacity
style={styles.iconButton}
onPress={() => { this.createNote(); this.props.navigation.navigate('Home') }}>
 <Icon name="arrow-back" size={28} color="#606060" />
</TouchableOpacity>
</View>
<View style={{ flex: 8 }}></View>
<View style={{ flex: 2 }}>
<TouchableOpacity
style={styles.iconButton}
 onPress={() => { this.createNote(); this.props.navigation.navigate('Home') }}>
<Icon name="check" size={28} color="#606060" />
</TouchableOpacity>
</View>
</Header>

reference link:- https://www.npmjs.com/package/native-base

Upvotes: 1

MDB
MDB

Reputation: 131

You can use onPress={() => this.props.navigation.goBack()} on TouchableOpacity if you are redirecting to the previous page

Also you can use this.props.navigation.navigate('Any_Screen') to move to other screens.

Also, I would like to suggest you to get familiar with BackHandler to move back to previous page when hardware back button is pressed.

Upvotes: 0

Related Questions