instance.render is undefined

`import React, {Component} from 'react'; import { StyleSheet, View, Dimensions, TouchableNativeFeedback, Text, Slider

} from 'react-native'; import Video from 'react-native-video'; import VlcPlayer from 'react-native-vlc-player'; import Icon from 'react-native-vector-icons';

const {width}= Dimensions.get('window'); const samplevideo = require('./sample.mp4');

export default class App extends React.Component{ constructor(p){ super (p); this.state = { currentTime:0, duration:0.1, paused:false, overlay:false,

} lasttap = null; handleDoubletap = (doubleTapCallback,singleTapCallback)=>{ const now = Date.now(); const DoubleTapDelay=300; if(this.lasttap&& (now - this.lasttap)< DoubleTapDelay){ clearTimeout(this.timer); doubleTapCallback();

}else this.lasttap=now; this.timer=setTimeout(()=>{ singleTapCallback }, DoubleTapDelay )

}

} getTime=t=>{ const digit = n => n<10? 0${n} :${n}; const sec = digit(Math.floor(t % 60)); const min = digit(Math.floor((t/60) % 60)); const hr = digit(Math.floor((t/3600 )% 60)); return hr+':'+min+':'+sec

 }

load=({duration})=>this.setState({duration})
load=({progress})=>this.setState({progress})
backward=()=>{
this.video.seek(this.state.currentTime - 5)
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)

}
forward=()=>{
  this.video.seek(this.state.currentTime + 5)
  clearTimeout(this.overlayTimer);
  this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)

  }
  onslide= slide =>{
    this.video.seek(duration * this.state.duration)
    clearTimeout(this.overlayTimer);
    this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)

    }
    seekleft =()=>{
    const {currentTime} =this.state
    this.handleDoubletap(()=>{this.video.seek(currentTime-5);
    }, ()=>{
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)

}) } } seekright =()=>{ const {currentTime} =this.state this.handleDoubletap(()=>{this.video.seek(currentTime+5); }, ()=>{ clearTimeout(this.overlayTimer); this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)

})

render = () =>{ const {currentTime,duration,overlay,paused}=this.state return (

     <View style={styles.overlay}>
     {! overlay ? <View style={{backgroundColor:'#0006',...style.overlayset}} >
     <Icon name ='backward' style={styles.ico} onPress={this.backward}/>
     <Icon name ={paused ? 'play' :'pause'} style={styles.ico} onPress={()=> this.setState({ paused: !paused})}/>
     <Icon name ='forward' style={styles.ico} onPress={this.forward}/>
     <View style={styles.slidercon}>
       <View style={styles.timer}>
         <Text style={{color:'white'}}>{this.getTime(currentTime)}</Text>
         <Text style={{color:'white'}}>{this.getTime(duration)}</Text>

       </View>
      <Slider
      maximumTrackTintColor='white'
      minimumTrackTintColor='white'
      thumbTintColor='white'
      value={currentTime/duration}
      onValueChange={this.onslide}

      />

     </View>

        <TouchableNativeFeedback onPress={this.seekleft}/><View style={{flex:1,}}></View>
        <TouchableNativeFeedback onPress={this.seekright}/><View style={{flex:1,}}></View>
      </View>}
    </View>
  </View>
);

} };

const styles = StyleSheet.create({ container:{ flex: 1,

}, overlay:{ ...StyleSheet.absoluteFillObject

}, overlayset:{ flex:1, flexDirection: 'row', }, ico:{ color: 'white', flex:1, textAlign:'center', textAlignVertical:'center', fontSize:25

  },
  slidercon:{
  position : 'absolute',
  left :0,
  right:0,
  bottom: 0,

}, timer :{ flexDirection:'row', justifyContent:'center', paddingHorizontal:5

} });`

rndevzaki / helloworld

instance.render is undefined #2