Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

Change RN code from function component Typescript to normal react native component

$
0
0

I'm creating a video player and I have to set controls. I found this tutorial https://medium.com/prototyped/react-native-video-handling-fullscreen-and-controls-on-android-dbb45a2e52ea][1]

but in this tutorial, all code is in typescript and he use a function component. how can I migrate to normal react native class system for example for this code:

import React from 'react';import Slider from '@react-native-community/slider';import {View, Text, StyleSheet} from 'react-native';interface Props {  currentTime: number;  duration: number;  onSlideCapture: (data: {seekTime: number}) => void;  onSlideStart: () => void;  onSlideComplete: () => void;}export const ProgressBar: React.FC<Props> = ({  currentTime,  duration,  onSlideCapture,  onSlideStart,  onSlideComplete,}) => {  const position = getMinutesFromSeconds(currentTime);  const fullDuration = getMinutesFromSeconds(duration);  return (<View style={styles.wrapper}><Slider        value={currentTime}        minimumValue={0}        maximumValue={duration}        step={1}        onValueChange={handleOnSlide}        onSlidingStart={onSlideStart}        onSlidingComplete={onSlideComplete}        minimumTrackTintColor={'#F44336'}        maximumTrackTintColor={'#FFFFFF'}        thumbTintColor={'#F44336'}      /><View style={styles.timeWrapper}><Text style={styles.timeLeft}>{position}</Text><Text style={styles.timeRight}>{fullDuration}</Text></View></View>  );  function getMinutesFromSeconds(time: number) {    const minutes = time >= 60 ? Math.floor(time / 60) : 0;    const seconds = Math.floor(time - minutes * 60);    return `${minutes >= 10 ? minutes : '0'+ minutes}:${      seconds >= 10 ? seconds : '0'+ seconds    }`;  }  function handleOnSlide(time: number) {    onSlideCapture({seekTime: time});  }};

specially interface prop...


Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>