onLeftHandleChange & onRightHandleChange not calling in Functional Component.

[Ferin79]

onLeftHandleChange & onRightHandleChange not calling in Functional Component.

import { Audio } from "expo-av";
import * as DocumentPicker from "expo-document-picker";
import React, { useState } from "react";
import { Dimensions, Platform, Text, View } from "react-native";
import { Button } from "react-native-paper";
import Trimmer from "react-native-trimmer";

const playbackObject = new Audio.Sound();
Audio.setAudioModeAsync({
  staysActiveInBackground: Platform.OS === "android" ? true : false,
  playsInSilentModeIOS: Platform.OS === "ios" ? false : true,
});
const { height, width } = Dimensions.get("window");

const FirstScreen = () => {
  const [leftPos, setLeftPos] = useState(0);
  const [rightPos, setRightPos] = useState(15000);
  const [totalDuration, setTotalDuration] = useState(0);

  const loadAudio = async (uri: string) => {
    try {
      await playbackObject.loadAsync({
        uri,
      });
      await playbackObject.playAsync();
    } catch (error) {
      console.log(error.message, "error to loading sound");
    }
    playbackObject.setOnPlaybackStatusUpdate((onPlaybackStatusUpdate: any) => {
      setTotalDuration(onPlaybackStatusUpdate.durationMillis);
    });
  };

  const handleDocumentPick = async () => {
    DocumentPicker.getDocumentAsync({
      type: "audio/*",
    })
      .then(async (data) => {
        if (data.type === "success") {
          loadAudio(data.uri);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <View
      style={{
        display: "flex",
        flex: 1,
        height,
        width,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ fontSize: 25 }}>Coming Soon...</Text>
      <View>
        <Trimmer
          onLeftHandleChange={(event: number) => {
            console.log(event);
            setLeftPos(event);
          }}
          onRightHandleChange={(event: number) => {
            console.log(event);
            setRightPos(event);
          }}
          totalDuration={totalDuration}
          trimmerLeftHandlePosition={leftPos}
          trimmerRightHandlePosition={rightPos}
          maxTrimDuration={15000}
        />
      </View>
      <Button onPress={handleDocumentPick}>Pick File</Button>

      <Button onPress={() => playbackObject.playFromPositionAsync(leftPos)}>
        Play
      </Button>
      <Button onPress={() => playbackObject.pauseAsync()}>Pause</Button>
    </View>
  );
};

export default FirstScreen;

[Parrot1999]

Were you able to solve it facing the same issue

[ashishAmz]

I have checked in class component, facing same issue, using below version "react": "17.0.2", "react-native": "0.67.3",

[ashishAmz]

I was playing around this repo and find that onHandleChange is working, we can use it to update trimmerLeftHandlePosition & trimmerRightHandlePosition

 <Trimmer
          onHandleChange= {this.onHandleChange}
          totalDuration={totalDuration}
          trimmerLeftHandlePosition={trimmerLeftHandlePosition}
          trimmerRightHandlePosition={trimmerRightHandlePosition}
          minimumTrimDuration={minimumTrimDuration}
          maxTrimDuration={maxTrimDuration}
          maximumZoomLevel={200}
          zoomMultiplier={20}
          initialZoomValue={2}
          scaleInOnInit={true}
          tintColor="#f638dc"
          markerColor="#5a3d5c"
          trackBackgroundColor="#382039"
          trackBorderColor="#5a3d5c"
          scrubberColor="#b7e778"
          scrubberPosition={scrubberPosition}
          onScrubbingComplete={this.onScrubbingComplete}
          onLeftHandlePressIn={() => console.log('onLeftHandlePressIn')}
          onRightHandlePressIn={() => console.log('onRightHandlePressIn')}
          onScrubberPressIn={() => console.log('onScrubberPressIn')}
        /> 

onHandleChange = ({ leftPosition, rightPosition }) => { console.log("leftPosition: "+leftPosition+", rightPosition"+rightPosition); this.setState({ trimmerRightHandlePosition: rightPosition, trimmerLeftHandlePosition: leftPosition }) }