guy's I'm using the react-native-animatable library. Basically, when I load my app the animation runs, however, when I go to another tab and return to the initial page the animation doesn't run anymore. I think it's because it' doesn't get reloaded anymore and I was wondering how to reload a component. As you can see the View has an animation prop which is the animation which has to be loaded.
import React, { Component } from 'react';
import { Text, Button, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import LinearGradient from 'react-native-linear-gradient';
import {Fonts} from '../components/Fonts';
import { createAnimatableComponent, View, } from 'react-native-animatable';
class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<View animation='bounceInLeft'
style={styles.container1}>
<View style={styles.card1}>
<ImageBackground
source={require('../images/pictures/runop.jpg')}
style={{width:'100%', height:200, }}>
<Text
style={{fontSize:30, alignSelf:'center', color:'white',
fontFamily:Fonts.Nunito}}
> Sport Schema's</Text>
</ImageBackground>
</View>
</View>
<View animation='bounceInRight' style={styles.container2}>
<View style={styles.card2}>
<Image
source={require('../images/pictures/foodop.jpg')}
style={{width:'100%', height:200}}/>
</View>
</View>
<View animation='bounceInLeft' style={styles.container3}>
<View style={styles.card3}>
<Image
source={require('../images/pictures/blogop.jpg')}
style={{width:'100%', height:200}}/>
</View>
</View>
</View>
);
}
}
Thanks for your help. I eventually got it to work with a different method.
I used the withNavigationFocus from react-navigation to get the isFocused props of the current screen. Then i just used an if statement if screen is focused then run animation else dont.
import {withNavigationFocus} from 'react-navigation';
class Profile extends React.Component {
constructor(props) {
super(props);
}
render()
// This checks if current screen is focused then run the animation otherwise dont.
{
if (this.props.isFocused && this.animation) {
this.animation.bounce(800)
}
return (
<View ref={(ref) => {this.animation = ref;}}
style={styles.container3}>
<View style={styles.card3}>
<Text> hii</Text>
</View>
</View>
);
}
}
});
export default withNavigationFocus(Profile); // <- dont forget this!!
If you are using react-navigation, below solution might work for you.
Create a function which would start the animation after some milliseconds and pass it to the next screen as params. Example,
SCREEN A
animateFunction() {
setTimeout(() => {
// start your animation
}, 100);
}
navigation.navigate(SCREEN_NAME, { startPrevScreenAnimation: animateFunction });
And in the next screen call that function when the component unmounts (componentWillUnmount()). Example,
SCREEN B
componentWillUnmount() {
this.props.navigation.state.params.startPrevScreenAnimation();
}
I said some milliseconds because you would want the animation to start once the screen transition is complete.
OR
Add a listener to your screen which fires an event when the screen is in focus.
if (this.props.navigation) {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
() => { // Run your animation },
);
}
Related
Oo .. sorry if my script is confusing because there are actually two options that I have deleted to make it look simpler but it makes the question direction unclear.
And this is the complete script
import { Button, Text, View, TouchableOpacity, StatusBar} from 'react-native';
import ScanQR from './ScanQR';
import SalesTrans from './SalesTrans';
import Inventory from './Inventory';
export default class Home extends Component{
constructor(props){
super(props)
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>
<TouchableOpacity
onPress={this.props.navigation.navigate('ScanQR')}>
<Text style={styles.heading}>Scanning QR</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.props.navigation.navigate('SalesTrans')}>
<Text style={styles.heading}>Sales Transaction</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.props.navigation.navigate('Inventory')}>
<Text style={styles.heading}>Inventory Status</Text>
</TouchableOpacity>
</View>
);
}
}
And this is an android screen display
What I want is if Scanning QR is selected then the ScanQR page opens, likewise if the Invetory Status is selected, the Inventory page will open.
Thank you
If you want to render the ScanQR class in this class , you can do like
import { Text, View, TouchableOpacity, StatusBar} from 'react-native';
import ScanQR from './ScanQR';
export default class Home extends Component{
constructor(props){
super(props)
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>
<ScanQR />
</View>
);
}
}
else if you want to navigate to ScanQR class from this class, then first add the ScanQR class inside the app navigation stack , and if its screen name is ScanQR , you can achieve something like, you did before,
import { Text, View, TouchableOpacity, StatusBar} from 'react-native';
export default class Home extends Component{
constructor(props){
super(props)
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>
<TouchableOpacity onPress={this.props.navigation.navigate('ScanQR')}><Text style={styles.heading}>Scanning QR</Text></TouchableOpacity>
</View>
);
}
}
feel free to ask any doubts
if you want to access child class then you need to use props and if you want to access parent class from child then refs.
you can find full answer here
I have button as mentioned below and I have an another page named JobDetails on the same folder in the project. When I click on the button "next" i need to display that JobDetails page. I have added onButtonPress with alert function and it works fine. I'm not sure on how to bring the next page on clicking the button using routing.
onButtonPress(){
alert("Prem")
}
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>
It's very simple for react-native-router-flux, just do:
import { Actions } from 'react-native-router-flux';
onButtonPress(){
Actions.JobDetails();
}
Make sure your Scene key is correct (JobDetails in your case).
<Scene key="JobDetails" component={JobDetails} />
You can achieve this using Stack Navigator from react-navigation
Installation:
npm install --save react-navigation
Example:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home'
}
onButtonPress(){
this.props.navigation.navigate('JobDetails'); // navigate to JobDetails screen!
}
render() {
return (
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>
);
}
}
class JobDetailsScreen extends React.Component {
static navigationOptions = {
title: 'Job Details'
}
render() {
return (
<View>
<Text>I'm job screen!</Text>
</View>
);
}
}
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen
},
JobDetails: {
screen: JobDetailsScreen
}
});
export default ModalStack;
I am currently learning React Native.
I just a built a very simple app to test out the Button component.
When I click on the button component the console log is printed as expected.
But after printing out the console log it pops out the following error.
**undefined is not an object (evaluating '_this2.btnPress().bind')**
I am not sure what is wrong ?
Can anyone let me know what I am doing wrong ?
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class App extends React.Component {
btnPress() {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={()=> this.btnPress().bind(this)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You are invoking the function instead of passing a reference through bind.
loose the ().
And you should not wrap it with an arrow function as bind is already returning a new function instance
onPress={this.btnPress.bind(this)} />
By the way, this will return and create a function instance on each render, you should do it once in the constructor (which runs only once):
export default class App extends React.Component {
constructor(props){
super(props);
this.btnPress = this.btnPress.bind(this);
}
btnPress() {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={this.btnPress} />
</View>
);
}
}
Or use an arrow function which uses a lexical context for this:
export default class App extends React.Component {
btnPress = () => {
console.log("Fn Button pressed");
}
render() {
return (
<View style={styles.container}>
<Button title="this is a test"
onPress={this.btnPress} />
</View>
);
}
}
I am trying to make an app where the SplashScreen is shown for 600 milliseconds and then the Mainscreen is displayed. I used the setTimeOut method in componentDidmount, but I am getting the error as shown here. The necessary code is also provided below.
import React, { Component } from 'react';
import {Image,Dimensions, Button, Text, StyleSheet, View, TouchableOpacity} from 'react-native';
var timePassed;
class SplashScreen extends Component{
constructor(props){
super(props);
this.state={
timePassed: false
}
}
componentDidMount() {
this.setTimeout( () => {
this.setState({timePassed: true})
},600);
}
render(){
if(!this.state.timePassed){
return(
<View style={styles.container}>
<Image style={styles.logo} source={require('./Images/logo.jpg')} resizeMode="contain" />
<Text style={styles.deadlineFont}>Deadline</Text>
</View>
);
}
else{
return (
<View>
<MainScreen />
</View>
);
}
}
}
Problem: setTimeout is wrongly called with this but is not a method defined on your class.
Solution: Change this.setTimeout( () => { to setTimeout( () => {.
Here's a working example of your code: https://repl.it/Iqfk/1
i am new in react-native and i want to press to to specific item in ListView, but when i click to item wich i want to select i didn't get console log message and i didn't get any errors so my code look like this
in renderRow my code look like this
renderRow(record) {
return (
<View style={styles.row}>
<TouchableHighlight onPress={() => this._pressRow()}>
<View style={styles.info}>
<Text style={styles.items}>{record.nom}</Text>
</View>
</TouchableHighlight>
</View>
);
}
and _pressRow function simple console log
_pressRow (rowID: number) {
console.log("clicked");
}
and render function
render() {
return (
<ScrollView scrollsToTop={false} style={styles.menu}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
);
}
how can i resolve this issue and thanks.
Are you using the autobind-decorator? Using your code as is the _pressRow method won't be triggered. When I add the autobind decorator or change _pressRow into a fat-arrow function the console.log does work for me:
import React, { Component } from 'react'
import { View, TouchableHighlight, Text, ScrollView, ListView } from 'react-native'
_pressRow = (rowID: number) => {
console.log("clicked")
}
class App extends Component {
constructor(props) {
super(props)
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
})
this.state = {
dataSource: this.dataSource.cloneWithRows([
{ nom: 'a' },
{ nom: 'b' },
]),
}
}
renderRow(record) {
return (
<View>
<TouchableHighlight onPress={() => this._pressRow()}>
<View>
<Text>{record.nom}</Text>
</View>
</TouchableHighlight>
</View>
)
}
render() {
return (
<ScrollView scrollsToTop={false}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)
}
}
export default App
change the this._pressRow() to this._pressRow.bind(this) if your function is in your Class
I used TouchableHighlight to wrap "un-pressable" component (accompany with changing this._pressRow to this._pressRow.bind(this)).
Moreover, some component (such as Text component) does not fill all the space of ListView row. So that onPress only works if you press right at text (it does not work if you press on the row location that does not have any text). So that it is useful to wrap with TouchableHighlight component.