I am New to React Native. And I have created a screen for example
A screen
Now inside drawer I have two screen
D1 screen
D2 screen
Now when I Move from D1 screen to D2. and then I want to Go back To D1 screen By tapping Default Back Button Of react native I am Directly Going To "A" screen. So means I want To go back to Previous Drawer Screen. please if possible help me. thanks.
here is my code of D2 screen
import React, {useRef} from 'react';
import {View,TouchableOpacity,Image, StyleSheet} from 'react-native';
import Signature from 'react-native-signature-canvas';
import { Card, Badge, Button, Block, Text } from "../components";
import { theme, mocks } from "../constants";
import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";
const DigSign = () => {
const ref = useRef();
const handleSignature = (signature) => {
console.log(signature);
};
const handleEmpty = () => {
console.log('Empty');
};
const handleClear = () => {
console.log('clear success!');
};
const handleEnd = () => {
ref.current.readSignature();
};
return (
<View style={{flex: 1}}>
<Signature
ref={ref}
onEnd={handleEnd}
onOK={handleSignature}
onEmpty={handleEmpty}
onClear={handleClear}
descriptionText={'Sign here!'}
/>
</View>
);
};
export default DigSign;
You can create a custom header back button and get back to D1 screen,
<View style={styles.headerContainer}>
<TouchableOpacity onPress={() => this.props.navigation.navigate("D1Screen")}>
<IonIcon name="chevron-back" size={(window.width) * 0.06} color="#000000" />
</TouchableOpacity>
<Text style={styles.title}>D2 Screen</Text>
</View>
First pass navigation parameter in your function and then use navigation.goBack() like:
export default function SignupScreen({ navigation }) {
return (
<IconButton
icon="keyboard-backspace"
size={30}
style={styles.navButton}
color="#5b3a70"
onPress={() => navigation.goBack()}
/>
);
}
Related
I have a WebView project of an PHP admin panel, that I put a custom Back Button on top of its WebView. I want this button to be visible only if the current screen can go back, which is any screen beside main screen, and in this case our main screen is a admin panel login page. So I came up with the code I shared below.
It works fine, unless you login with wrong credentials. The Back Button immediately shows up when the login button pressed inside the WebView because it gets to another url from admin.panel/login to admin.panel/login/login, but it shouldn't render unless we successfully login to the panel. How can I achieve that?
BackButton.js
import { StyleSheet, TouchableOpacity } from "react-native";
import { Ionicons } from "#expo/vector-icons";
const BackButton = (props) => {
return (
<TouchableOpacity style={styles.button} onPress={props.onPress}>
<Ionicons name="arrow-back" size={24} color="black" />
</TouchableOpacity>
);
};
App.js
import React, { useEffect, useRef } from "react";
import { StyleSheet, Platform, BackHandler, View } from "react-native";
import { WebView } from "react-native-webview";
import MyStatusBar from "./components/MyStatusBar";
import MyBackButton from "./components/BackButton";
export default function App() {
const webViewRef = useRef();
// to handle goBack function for both button and hardwareBackPress
const onBackPress = () => {
if (webViewRef.current) {
webViewRef.current.goBack();
return true;
}
return false;
};
// to check if current can go back
const [canGoBack, setCanGoBack] = React.useState(false);
// WebView does not support swipe back for some android devices
// thus we have to handle the goBack function with hardwareBackPress
useEffect(() => {
...
}
}, []);
return (
<View style={styles.container}>
<MyStatusBar />
<WebView
allowsBackForwardNavigationGestures
allowsInlineMediaPlayback
ref={webViewRef}
source={{ uri: "https://admin.panel/login" }}
style={styles.webView}
onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
/>
{canGoBack? (
<View style={styles.button}>
<MyBackButton onPress={onBackPress} />
</View>
) : null}
</View>
);
}
Here is my code:
if(refRBSheet.current?.open()){
refRBSheet.current.close();
}
In my React Native application I am implementing 'react-native-raw-bottom-sheet'. I want to check if the RBSheet is open, and if it is then I want to close it. The above code open's the RBSheet instead of closing.
As mentioned in the library documentation, it supports onOpen and onClose event functions. Use them to save the open/closed state of the bottom sheet.
import React, { useState, useRef } from 'react';
import { StyleSheet, SafeAreaView, View, Button } from 'react-native';
import RBSheet from 'react-native-raw-bottom-sheet';
const App = () => {
const [open, setOpen] = useState(false);
const refRBSheet = useRef();
const onPress = () => {
if (!open) {
refRBSheet.current.open();
} else {
refRBSheet.current.close();
}
};
return (
<SafeAreaView>
<View>
<Button title="Open" onPress={onPress} />
</View>
<RBSheet
ref={refRBSheet}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
// .....
>
<Button title="Close" onPress={onPress} />
</RBSheet>
</SafeAreaView>
);
};
I have made a button component and want to add a onpress but it doesnt work. Can anyone explain me why its not working ?
Button Component.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const Button = ({ title }) => {
return (
<TouchableOpacity>
<Text>{title}</Text>
</TouchableOpacity>
)
};
export default Button;
Main.js
...
<Button onPress={handleSubmit} title="Jetzt registrieren"/>
...
you need to extract you onPress prop
const Button = ({ title,onPress }) => {
return (
<TouchableOpacity onPress={onPress}>
<Text>{title}</Text>
</TouchableOpacity>
)
};
I am trying to make a back button in react native and using navigation.goBack() in the function component but if I console the navigation then it's giving me undefined
import React from 'react';
import {
Text,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
} from 'react-native';
import backIcon from '../assets/back-black.png';
const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
const TitleHeader = ({navigation, title}) => {
// console.log("hello");
return (
<View style={[styles.customHeader]}>
<View style={[styles.headerLeft]}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image source={backIcon} style={styles.headerIcon} />
</TouchableOpacity>
<Text style={[styles.font, styles.headerTitle]}>{title}</Text>
</View>
</View>
);
};
The rest of the code is working fine I am just getting an error in navigation so I add the important code only
React-navigation v5 provides hook useNavigation() returns the navigation prop of the screen it's inside.
Sample:
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '#react-navigation/native';
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
In your code you need pass prop navigation to your component
I am using React Native Modal and am having difficulty passing back the props from the Modal to the class that called the Modal.
I have tried with the onRequestClose() and onPress() and setting a prop for callback data googlePlacesPassedBackLocation but no success. I am trying to retrieve pastLocations from GooglePlaces. I can see in GooglePlaces that the location is being generated correctly. I am using the useState hook in both the Modal class and the GooglePlaces class.
I have read that this is a difficult thing to do as react doesn't really support it. Is it possible at all?
import {StyleSheet, View, Modal, TouchableOpacity, Text, TouchableHighlight, Button } from 'react-native';
Parent Component:
const RegisterLocationScreen = ({navigation}) => {
var [pastLocations, setPastLocations] = useState([]);
var [pastModalVisible, setModalPastVisible] = useState(false);
const closeModal = (timeFrame) => {
setModalPastVisible(false);
};
const openGooglePastModal = () => {
setModalPastVisible(true)
};
return (
<Modal visible={pastModalVisible} animationType={'slide'} onRequestClose={() => closeModal(pastLocations)}>
<View style={styles.modalContainer}>
<SafeAreaView style = {styles.safeAreaViewStyle} forceInset={{top: 'always'}}>
<GooglePlaces timePeriod="Past" googlePlacesPassedBackLocation={googlePlacesPassedBackLocation} />
<TouchableOpacity style = {styles.buttonContainer} onPress={()=> closeModal('Past')}>
<Text style={styles.buttonText} >
Close Modal
</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</Modal>
<TouchableOpacity style = {styles.buttonModal} onPress={() => openGooglePastModal()} >
<Text style={styles.buttonModalText} >
Past Locations
</Text>
</TouchableOpacity>
Child Component:
import React, {useState} from 'react';
import {StyleSheet } from 'react-native'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
const API_KEY = '123omittedforsecurity';
const GooglePlaces = ({timePeriod}) => {
var [pastLocations, setPastLocations] = useState([]);
const updateLocationArray = (data, details) =>{
setPastLocations([
...pastLocations,
details.geometry.location
]);
};
return (
<GooglePlacesAutocomplete
placeholder={timePeriod}
onPress={(data, details) => {
updateLocationArray(data, details);
}}
..../>