CODEWITHSUNDEEP
reactjsreact-native
KRJaguar
KRJaguar

Reputation: 15

React native changing img with state Error

First sorry to guys because my eng level is very low.

I'm studying react native. Try changing image with the state but is not working. Error : null is not an object (this.state.admob)

index.js


   class HomeScreen extends React.Component {    
   constructor(props){
       super(props);
       this.state = {admob: require('../Img/admob1.jpg'), admobCount: 0};
   }

   _changeAdmob(){
       this.setState({
           if(admobCount = 0){
               admobCount: this.state.admobCount + 1;
               admob: require('../Img/admob1.jpg');
           },
           if(admobCount = 1){
               admobCount: 0;
               admob: require('../Img/admob2.png');
           }
       });
   }

   componentDidMount(){
       this.admobTimer = setInterval(
           () => this._changeAdmob(), 2000
       );
   }

   componentWillUnmount(){
       clearInterval(this.admobTimer);
   }

   render() {                          
     return (          
         <View style={styles.MasterContainer}>
             <NavBar navigation = {this.props.navigation}/>
             <UserBar navigation = {this.props.navigation}/>
             <View style={{height: 40,}}></View>
             <ButtonTab/>
             <Admob/>
             <TapBar/>
         </View>
     );
   }
  }

   class Admob extends React.Component{
     render() {
         return(
             <View style={{ flex: 1,alignItems: 'center',justifyContent:'center' }}>
                 <Image style={{ width: 350, height: 70 }} source={this.state.admob}></Image>                 
             </View>
         );
     }
  }

** I want to image change whenever 2 seconds.**

Upvotes: 0

Views: 51

Answers (1)

xtian saclao
xtian saclao

Reputation: 26

You need to pass the state on the component <Admob admob={this.state.admob} />

Add this on the index.js

<View style={styles.MasterContainer}>
          <NavBar navigation = {this.props.navigation}/>
          <UserBar navigation = {this.props.navigation}/>
          <View style={{height: 40,}}></View>
          <ButtonTab/>
          <Admob admob={this.state.admob}/>
          <TapBar/>
</View>

Admob.js change this.state to this.props

<Image style={{ width: 350, height: 70 }} source={this.props.admob}></Image>

Upvotes: 1

Related Questions