Using navigator I hit home from my react native android app and then return to the app and it always starts at the initial route which is my splash screen. Is there away to keep the component that was in view last the component that will be in view when the app re-opens?
class AwesomeProject extends Component {
render() {
return (
<Navigator
style={{ flex:1 }}
initialRoute={{ id: 'SplashPage' }}
renderScene={ this.renderScene }
/>
);
}
renderScene(route, navigator) {
if (route.id === 'SplashPage') {
return (
<SplashPage
navigator={navigator} {...route.passProps}
/>
);
}else if(route.id === 'HomePage'){
return (
<HomePage
navigator={navigator} {...route.passProps}
/>
);
}else if(route.id === 'ListViewPage'){
return (
<ListViewPage
navigator={navigator} {...route.passProps}
/>
);
}
}
}
You need to add the following code to /android/app/src/main/java/com//MainActivity.java. so, that it maintains the stacks of application.
#Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
if you dont achieve your answer from above please follow reference as below:
https://facebook.github.io/react-native/docs/native-modules-android.html
and in last of above reference there is lifecycle event for application in react-native. So, follow same strategy like native android onPause/onDestroy/onStop method and please solve your problem.
can you make sure you app is live when you press home?
My first suggestion is not to use splashscreen as a scene. If you use that in such a way it is not splashscreen rather a component. Use the native java code as mentioned in the links below to get your problem solved like charm.
https://github.com/react-native-component/react-native-smart-splash-screen
with this there are certain import errors which can be fixed looking at the issues section or check my code in github which contains the perfect use of the splashscreen module.
https://github.com/UjjwalNepal/Dental
Hope this helps.
Thank you
Related
I am making a test with react navigaton and webview , I have 2 screens , Home and Details , at details screen I am calling / opening a webpage inside webview , let's say that I am calling stackoverflow.com (Page A) , my problem is that when user click a link of the stackoverflow page and navigate and after wants to go back to the previous page (Page A) , it doesn't go , its going or navigating to the Home screen !!!
how can I let The user go back to the previous page. ?
that 's how I am calling the page
<WebView
javaScriptEnabled
source={{uri: 'https://stackoverflow.com/'}}
style={{marginTop: 20}}
/>
As we know built in back button is not provided in iOs but it is provided in android .
So for considering both platform there is two possibility.
Android.
-> For android you have to define BackHandler so here are the step.
import it like this.
import {BackHandler } from 'react-native'.
initialize backhandler inside the life cycle methods.
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress = () => {
if (this.state.canGoBack) {
this.refWeb.goBack();
}
else{
this.props.navigation.goBack(null)
}
return true;
}
define a userdefine variable canGoBack inside the status.
constructor(props) {
super(props)
this.state = {
canGoBack: false
}
}
create a method which detect the change in navigation of the webview and bind it with the web view.
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack
});
}
Bind it like this.
<WebView
ref={(myWeb) => this.refWeb = myWeb}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
source={{ uri: 'https://stackoverflow.com/questions/51712310/react-
native-webview-navigation-issue' }} />
And thsts it you are ready to go..
iOs
For iOs you didn't have to bother too much.
Create a button for back press above the webview or according to your design logic
Follow the above webview and navigation logic . forgot about the backhandler and set this code inside the onPress() method of your created button of backpress
if (this.state.canGoBack) {
this.refWeb.goBack();
}else{
this.props.navigation.goBack(null)
}
Note : Here I use stackNavigator for screen navigation so i used this.props.navigation.goBack(null) this code. if you didn't use it then dont consider this code and replace with your feasible navigator code in else condition
Thankyou..
I implemented a custom react-native TextInput backed by a native library. It's working pretty well except that when I tap outside of the textfield, it doesn't blur automatically and the keyboard doesn't disappear. I also tried with Keyboard.dismiss(), it doesn't work either. I looked at the 'official' TextInput implementation to replicate it without any success.
I added this code in my custom implementation (componentDidMount)
if (this.context.focusEmitter) {
this._focusSubscription = this.context.focusEmitter.addListener(
'focus',
el => {
if (this === el) {
this.requestAnimationFrame(this.focus);
} else if (this.isFocused()) {
this.blur();
}
},
);
if (this.props.autoFocus) {
this.context.onFocusRequested(this);
}
} else {
if (this.props.autoFocus) {
this.requestAnimationFrame(this.focus);
}
}
and I also defined the required contextTypes
static contextTypes = {
focusEmitter: PropTypes.instanceOf(EventEmitter)
}
code from TextInput
The problem I have is that the focusEmitter is undefined in the context and I have no idea from where it's provided in the context nor if it's actually the way it works for the regular TextInput. The only occurence of focusEmitter I could find in the react-native repo is in NavigatorIOS which I don't even use in my app.
Could anyone clarify this to me?
The simpler way to do what you want is to use Keyboard.dismiss() on a TouchableWithoutFeedback just like following example:
import {Keyboard} from 'react-native';
...
render(){
return(
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View>
// Return everything here
<TextInput />
</View>
</TouchableWithoutFeedback>
)
}
So when you tap outside the input it will dismiss keyboard and blur the TextInput.
Sorry for the dummy question, but I'm really stuck.
I created a very simple react-native app using these instructions.
Then I changed App.js to be
import React from 'react';
import {AppRegistry, Button, View } from 'react-native';
class RootView extends React.Component {
state = {
showFoo: false,
}
showFoo = () => {
this.setState({showFoo: true})
}
renderFoo = () => {
if (this.state.showFoo) {
console.log("at 4");
const item = <View />; /// BOOM!
console.log('at 5', item);
return item;
}
return null;
}
render = () => {
const renderFoo = this.renderFoo();
return (
<View>
<Button title="Press Me" onPress={this.showFoo} />
</View>
);
}
}
export default RootView;
Now, if I launch it using the Expo client on my Android 6.0.1. and I press "Press Me" button, it hangs and doesn't respond to back button.
In adb logcat, I can see "at 4", but never "at 5". It is like it stucks at "BOOM!" line for some reason (a dead lock?).
Wondering if I'm doing something wrong? My apologies again, but I have already spent a fair amount of time on this, would really appreciate any clue. Also, how could I debug things like that one?
Versions of react dependencies:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2"
}
}
(Please let me know if you feel the question needs more details in the comments, I'm happy to update it.)
You should either use
<Button title="Press Me" onPress={this.showFoo.bind(this)}/>
or use
<Button title="Press Me" onPres{()=>this.showFoo()}/>
and also call this.renderFoo(); inside render method, with this syntax
{this.renderFoo()}
I've created a snack to show you the solution.
The problem is with your render method
render = () => {
const renderFoo = this.renderFoo();
return (
<View>
<Button title="Press Me" onPress={this.showFoo} />
</View>
);
}
Specifically const renderFoo = this.renderFoo();. For this line of code, you only execute the renderFoo method and store it into renderFoo variable, and it's not within the return portion. In other words the <View /> returned by renderFoo will not show on the screen.
The fix is by the below code
render() {
return (
<View>
<Button title="Press Me" onPress={this.showFoo} />
{this.renderFoo()}
</View>
);
}
Finally, after hours of investigation...
As it appears, the problem was this line:
console.log('at 5', item);
It hasn't actually stuck. If I waited for 5+ seconds, the app proceeded. Seems like logging a react component is a very expensive operation.
Same problem I had when I was trying to log some lambda function.
TLDR: don't log complex objects!!!!
React native for android run very slow when not enable "Debug JS"
https://facebook.github.io/react-native/docs/performance.html#using-consolelog-statements
I try to implement the hero animation like in the shoutem About extension. Basically, I add animationName to NavigationBar and the Image like in the extension. I also had to add ScrollDriver because it would error-ed otherwise. But it seems the NavigationBar does not pass the driver down to its child components, so I still got this error. Is it possible to implement the hero animation like what was demonstrated here? https://medium.com/shoutem/declare-peace-with-react-native-animations-e947332fa9b1
Thanks,
import { ScrollDriver } from '#shoutem/animation';
getNavBarProps() {
const driver = new ScrollDriver();
return {
hasHistory: true,
driver: driver,
title: 'Title',
navigateBack: () => this.props.navigation.dispatch(NavigationActions.back()),
styleName: 'fade clear',
animationName: 'solidify',
};
}
render () {
const driver = new ScrollDriver();
return (
<Screen styleName=" paper">
<View style={{height:68}}>
<NavigationBar {...this.getNavBarProps()} />
</View>
<ScrollView style={styles.container}>
<Image
styleName="large"
source={require('../Images/spa2.jpg') }
defaultSource={require('../Images/image-fallback.png')}
driver={driver}
animationName="hero"
/>
...
I'm the author of the article, from you question, I'm not sure are you trying to create an extension on shoutem or you just want to recreate animation in any other React Native app.
If you are creating an extension or CardStack from #shoutem/ui/navigation, you don't event need to care for ScrollDriver. It would be pushed throught the context to the ScrollView (imported from #shoutem/ui) and NavigationBar (imported from #shoutem/ui/navigation).
If you are creating your own React Native project to be able to do it like in article I suggest the following. At the root component of your app:
import ScrollView from '#shoutem/ui';
class App extends Component {
...
render() {
return (
<ScrollView.DriverProvider>
<App />
</ScrollView.DriverProvider>
);
}
}
Then you don't have to take care of initialization of ScrollDriver on each screen, if you use our components and a ScrollView it will push the driver where it needs to be. :) So your screen at the end would look like this:
import {
ScrollView,
NavigationBar,
Image
} from '#shoutem/ui';
class MyScreen extends Class {
render() {
return (
<Screen>
<NavigationBar animationName="solidify" />
<ScrollView>
<Image animationName="hero" />
</ScrollView>
</Screen>
);
}
}
The whole working example is here https://github.com/shoutem/ui/tree/develop/examples/RestaurantsApp/app
I want to disable the swipe from left pop gesture on the navigator after the side menu has been accessed within a scene. I don't want to disable it when the scene first renders, only when the side menu is open. I have an onOpen function I can call, but I don't know how to programatically change the navigation gestures without pushing another route.
I tried setting the configureScene prop of the navigator like this:
configureScene={() => {
return this.state.swipeBackNavigation ? FloatFromRight : Navigator.SceneConfigs.FloatFromRight;
}
and changing the state, but the component doesn't rerender
ideas would be appreciated
I believe you can just set gestures to null (effectively disabling it):
gestures: {}
I can't test this currently, but I suspect it will work (if I didn't screw up some syntax somewhere):
export default class Foo extends Component {
constructor(props){
super(props);
this.state = {
//initialize gestureChoice
gestureChoice: {},
}
}
disablePop(){
setState({ gestureChoice:{ gestures:{} } });
}
enablePop(){
setState({gestureChoice: ...Navigator.SceneConfigs.FloatFromRight});
}
render(){
return(
<Navigator
renderScene={(route, navigator) =>
return <SomeScene navigator={navigator} {...route.passprops} />
}
configureScene={(route, routeStack) =>
this.state.gestureChoice;
)}
/>
);
}
}
The idea being, you could use enablePop() and disablePop() whenever you would like.
This thread is probably helpful: https://github.com/facebook/react-native/issues/1014