I want to focus on a textinput when I navigate to a new screen. This works when I add a screen to the stack, but not when I go back in the stack.
Instead, the input focuses for a second and blurs immediately.
Here is what I get:
Screen A is first in the stack and input blurs immediately
Screen B is added to the stack and works as intended
Any idea what is causing this?
FYI, I have the same issue if I use autoFocus.
Here is the whole (pretty straight forward) code:
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import * as React from "react";
import { TextInput, View, Button, Text } from "react-native";
function ScreenA({ navigation }) {
const textInputRef = React.useRef();
const focusOnInput = e => {
textInputRef.current.focus();
};
navigation.addListener("focus", focusOnInput);
return (
<View>
<Text>SCREEN A</Text>
<TextInput ref={textInputRef} />
<Button title="Go to screen B" onPress={() => navigation.navigate("ScreenB")} />
</View>
);
}
function ScreenB({ navigation }) {
const textInputRef = React.useRef();
const focusOnInput = e => {
textInputRef.current.focus();
};
navigation.addListener("focus", focusOnInput);
return (
<View>
<Text>SCREEN B</Text>
<TextInput ref={textInputRef} />
<Button title="Go to screen A" onPress={() => navigation.navigate("ScreenA")} />
</View>
);
}
const Stack = createStackNavigator();
function TestComp() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen component={ScreenA} name="ScreenA" />
<Stack.Screen component={ScreenB} name="ScreenB" />
</Stack.Navigator>
</NavigationContainer>
);
}
export default TestComp;
Related
I want to pass some props (value) to another page and I'm using stackNavigator
App.js:
import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";
const Stack = createStackNavigator();
NavigationContainer>
<Stack.Navigator headerMode={false}>
<Stack.Screen name="Insert Your data" component={Insert} />
<Stack.Screen name="ViewData" component={ViewData} />
</Stack.Navigator>
</NavigationContainer>
Insert.js
const Insert = ({ props, navigation: { navigate } }) => {
const [enteredName, setEnteredName] = useState();
const [enteredSurname, setEnteredSurname] = useState();
const sendValues = (enteredName, enteredSurname) => {
setEnteredName(enteredName);
setEnteredSurname(enteredSurname);
navigate("ViewData", {
name: enteredSurname,
surname: enteredSurname
});
};
...
<View>
<Button
title="Submit"
onPress={() => sendValues(enteredName, enteredSurname)}
/>
ViewData.js
const ViewData = ({props, navigation: { goBack } }) => {
let name = enteredName;
console.log(name); /// I always get undefined
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Here {name}</Text>
<Button onPress={() => goBack()} title="Edit Data" />
</View>
);
};
When I Submit I'm always getting undefined into the console.
For sure I'm mistaking somewhere.
Any idea?
Thanks!!
Refer to https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props
Use a render callback for the screen instead of specifying a component
prop:
<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
You can change like this
import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";
const Stack = createStackNavigator();
<NavigationContainer>
<Stack.Navigator headerMode={false}>
<Stack.Screen name="Insert Your data">
{props => (<Insert {...props} extraData={data}/>)}
<Stack.Screen name="ViewData" component={ViewData} />
</Stack.Navigator>
</NavigationContainer>
Reading your code it seems that you want to pass some params to the render component when navigate.
Refer to https://reactnavigation.org/docs/route-prop , the params from
navigation.navigate(routeName, params)
are passed to the screen render component as propriety of the route object. So in your case it should work:
let name = props.route.params.name;
I have a splash screen which goes to the Intro page after a few seconds and from the Intro page, I have a link for sign in and sign up. I tried to set up navigation from the Intro page to/from Login but encounter an error which says:
undefined is not an object (evaluating '_this.props.navigation.navigate').
I have tried to check the documentation on react-navigation but not clear with the explanation as they muddled up all screens in App.js.
App.js
import React, {Component} from 'react';
import { StyleSheet, StatusBar, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Intro from './screen/Intro';
import Login from './components/Login';
const RootStack = createStackNavigator(
{
IntroScreen: Intro,
LoginScreen: Login,
},
{
initialRouteName: 'IntroScreen',
}
);
const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar
barStyle="light-content"
backgroundColor="#fefefe"
/>
<Intro/>
</View>
);
}
}
Intro.js
The page follows the splash screen display and from the page I can select login or sign up.
import React, { Component } from 'react';
import {
Text,
Image,
View,
ImageBackground,
StyleSheet,
TouchableOpacity
}
from 'react-native';
import SplashScreen from 'react-native-splash-screen';
export default class Intro extends Component{
componentDidMount(){
SplashScreen.hide();
}
render(){
return(
<ImageBackground source={require('../images/signup-background.jpg')} style={{width: '100%', height: '100%'}}>
<View style={styles.container}>
<Image
source ={ require('../images/logo.png')}
/>
<Text style={styles.simpleText}>WELCOME</Text>
<Text style={styles.literal}>Thank you for your interest in the APG app. </Text>
<Text style={styles.literal}>How can we help you?</Text>
<TouchableOpacity
style= {styles.signinCont}
onPress={() => this.props.navigation.navigate('IntroScreen')}
>
<Text style= {styles.signinText}>
I am already an APG Patient
</Text>
</TouchableOpacity>
<TouchableOpacity style= {styles.signupCont}>
<Text style= {styles.signupText}>
I am not an APG Patient
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
}
}
Login.js
On the Login, I have a button to link to Signup and forgot password in case the user doesn't have an account
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
Label,
View,
TextInput,
StyleSheet,
}
from 'react-native';
export default class Login extends Component {
render(){
return(
<View style={styles.container}>
<View>
<Text>Login</Text>
</View>
<Label>Email</Label>
<TextInput
style={Styles.textbox}
placeholder="Email"
value= {this.state.email}
/>
<Label>Password</Label>
<TextInput
style={Styles.textbox}
placeholder="Password"
value ={this.state.password}
secureTextEntry={true}
/>
<View>
<Text>Forgot password</Text>
</View>
<TouchableOpacity style={styles.signin}>
<Text style ={styles.signinText}>Sign In</Text>
</TouchableOpacity>
<View>
<Text>Not an APG Member? </Text>
<TouchableOpacity style={styles.signup}
onPress ={() => this.props.navigation.navigate('SignUp') }
>
<Text>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
I want to be able to choose either the login or signup as the case may be from the Intro.js and on login.js to be able to click on signup for registration and from signup to be able to click login.
Solution
onPress={this.props.navigation.navigate('SignUp')} do not invoke this.props.navigation.navigate function.
Change your onPress property as below.
Use es6 arrow function for making anonymous function.
<TouchableOpacity
style={styles.signup}
onPress={() => this.props.navigation.navigate('SignUp')}
>
or you can reference your function in onPress. It makes performance better when render again.
navigate = () => {
this.props.navigation.navigate('SignUp')
}
return (
...
<TouchableOpacity
style={styles.signup}
onPress={this.navigate}
>
)
Why
props only references value even if it is function. So make props reference anonymous function or funtion in class you predefined.
And do not forget bind(this) when you use not arrow function.
navigate() {
this.props.navigation.navigate('SignUp')
}
...
onPress={this.navigate.bind(this)}
...
I am trying to change screen after few seconds which is for splash screen effect in react native. I have a main screen in which app originates. The code for first screen is:
import HomeUp from './HomeUp'
import Splash from './Splash'
import React, { Component } from "react";
export default class OriginPage extends Component {
constructor(props){
super(props)
this.state = {
component : <Splash />
}
}
componentDidMount(){
// Start counting when the page is loaded
this.timeoutHandle = setTimeout(()=>{
// Add your logic for the transition
this.setState({ component: <HomeUp /> })
}, 5000);
}
componentWillUnmount(){
clearTimeout(this.timeoutHandle);
}
render() {
return (
this.state.component
);
}
}
My splash screen is :
import React from 'react';
import { StatusBar , View , Text , ActivityIndicator } from 'react-native';
export default class Splash extends React.Component {
render() {
return (
<View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>
<StatusBar backgroundColor="#2c3e50" barStyle="light-content"/>
<Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
<ActivityIndicator color={'white'}/>
</View>
)
}
}
Till now everything works fine and the screen change over after 5s also working but this below code has bug.
import React, { Component } from "react";
class HomeUp extends Component {
render () {
const { navigate } = this.props.navigation;
return(
<TouchableHighlight onPress={() => navigate("Products", { product: item })} underlayColor="transparent">
<View style={styles.view} >
<Image style={styles.image} source={{uri: item.images[0].src}} />
<Text style={styles.name}>{item.name}</Text>
</View>
</TouchableHighlight>
);
}
}
Loading this screen alone have no bug but while changing screen I get undefined navigation.props error. hanks in adavanced.
If you are deconstructing your navigation props in your HomeUp component you should do it as follows:
const { navigation } = this.props;
Or also:
const navigate = this.props.navigation;
Hope it helps.
I am trying to have stack navigation along with drawer navigation. Basically I want the drawer to be in only one scene all time. I have tried to do so but nothing occurs. I am not being able to understand what I am doing wrong.
P.S: I am new to react-native.
ConversationListScreen.js
import React, { Component } from 'react';
import {
View,
Text,
Button,
TouchableNativeFeedback,
Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './styles';
export default class ConversationListScreen extends Component
{
static navigationOptions = {
title: 'Hola',
headerLeft: (
<TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'I am a hamburger.')}>
<View style={styles.toolBackground}>
<Icon name="menu" style={ styles.menuIcon }/>
</View>
</TouchableNativeFeedback>
),
headerRight: (
<TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'What you want to search?')}>
<View style={styles.toolBackground}>
<Icon name="search" style={ styles.searchIcon }/>
</View>
</TouchableNativeFeedback>
)
};
render() {
return (
<View>
</View>
);
}
}
Drawer.js
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
export default class SideNav extends Component
{
render() {
return (
<View>
<Text>My first Drawer</Text>
</View>
);
}
}
RouteConfig.js
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import ConversationListScreen from './ConversationListScreen';
import Drawer from './Drawer';
import ChatScreen from './ChatScreen';
export const SideNav = DrawerNavigator({
Drawer: { screen: Drawer},
});
export const Hola = StackNavigator({
ConversationList: { screen: ConversationListScreen },
Drawer: { screen: SideNav },
Chat: { screen: ChatScreen },
});
I had a similar issue and what I ended up doing was using this drawer component and wrapping it around the component you want to access it with. For example if you want to access it only from ConversationListScreen you export it as <Drawer><ConversationListScreen></Drawer>
I guess you can't use drawer navigator in stack navigator as a scene. you should import SideNav in the component you want to use and try to render it as a component
Here is a workaround. We have two screens in HomeScreenNavigator which is a stackNavigator. in firstScreen we have a link to secondScreen. in secondScreen we have drawerNavigator which has a screen named ComponentWidthDrawer. this component has a button to open drawer. I tested it and it's working.
class FirstComponent extends Component{
render () {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate("SecondScreen")}>
<Text>Go to Second Component</Text>
</TouchableOpacity>
</View>
)
}
}
class ComponentWidthDrawer extends Component{
render () {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Text>Open Menu</Text>
</TouchableOpacity>
</View>
)
}
}
const SecondComponent = DrawerNavigator({
Drawer: {
screen: ComponentWidthDrawer,
navigationOptions: {
drawerLabel: 'Videos'
},
}
})
const HomeScreenNavigator = StackNavigator(
{
FirstScreen : {
screen: FirstComponent,
navigationOptions:{
header: false
}
},
SecondScreen: {
screen: SecondComponent,
navigationOptions:{
header: false
}
}
}
);
we are currently running React-Native 0.33
We are trying to use the refs to go from 1 text input to another when they hit the next button. Classic username to password.
Anyone have any idea? Below is the code we are using. From other posts I've found on stack this is what they've done; however, it's telling us that this.refs is undefined.
UPDATE
So I've narrowed the problem down to
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
If I just render the code below in the renderScene function inside of the original render it works, however with the navigator it won't work. Does anyone know why? Or how to have the navigator show as well as render the code in renderScene to appear in the original render?
class LoginIOS extends Component{
constructor(props) {
super(props);
this.state={
username: '',
password: '',
myKey: '',
};
}
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
renderScene() {
return (
<View style={styles.credentialContainer}>
<View style={styles.inputContainer}>
<Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
<View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
<TextInput
ref = "FirstInput"
style={styles.input}
placeholder="Username"
autoCorrect={false}
autoCapitalize="none"
returnKeyType="next"
placeholderTextColor="#e0e0e0"
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
onSubmitEditing={(event) => {
this.refs.SecondInput.focus();
}}
>
</TextInput>
</View>
</View>
<View style={styles.inputContainer}>
<Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
<View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
<TextInput
ref = "SecondInput"
style={styles.input}
placeholder="Password"
autoCorrect={false}
secureTextEntry={true}
placeholderTextColor="#e0e0e0"
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
returnKeyType="done"
onSubmitEditing={(event)=> {
this.login();
}}
focus={this.state.focusPassword}
>
</TextInput>
</View>
</View>
</View>
);
}
Try setting the reference using a function. Like this:
<TextInput ref={(ref) => { this.FirstInput = ref; }} />
Then you can access to the reference with this.FirstInput instead of this.refs.FirstInput
For a functional component using the useRef hook. You can use achieve this easily, with...
import React, { useRef } from 'react';
import { TextInput, } from 'react-native';
function MyTextInput(){
const textInputRef = useRef<TextInput>(null);;
return (
<TextInput ref={textInputRef} />
)
}
Try changing the Navigator's renderScene callback to the following (based on Navigator documentation) cause you will need the navigator object later.
renderScene={(route, navigator) => this.renderScene(route, navigator)}
Then, use 'navigator' instead of 'this' to get the refs.
navigator.refs.SecondInput.focus()