No virtual method get exceptionhandler Unable to create thumnail in android

[hardik-wts]

No virtual method get exceptionhandler Unable to create thumnail in android Clone your project and run the project from example folder

"dependencies": {
    "react": "18.0.0",
    "react-native": "0.69.5",
    "react-native-create-thumbnail": "file:../"
  },

Testing on Android 11 emulator

Snack, code example, screenshot, or link to a repository

import React, {useState} from 'react';
import {
  Image,
  Text,
  View,
  StyleSheet,
  TextInput,
  Button,
  ActivityIndicator,
} from 'react-native';
import {createThumbnail} from 'react-native-create-thumbnail';

const placeholderImage = require('./assets/placeholder-image.png');

export default function App() {
  const [path, setPath] = useState('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4');
  const [thumbnail, setThumbnail] = useState('');
  const [timeStamp, setTimeStamp] = useState('1000');
  const [isLoading, setIsLoading] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>☆CreateThumbnail example☆</Text>
      <TextInput
        value={path}
        onChangeText={setPath}
        style={styles.pathInput}
        placeholder="Paste video url"
        placeholderTextColor="lightgrey"
      />
      <TextInput
        keyboardType="numeric"
        value={timeStamp}
        onChangeText={setTimeStamp}
        style={styles.timeInput}
        placeholder="Timestamp"
      />
      <Button
        title="Generate Thumbnail"
        disabled={isLoading}
        onPress={generateThumbnail}
      />
      <Text style={styles.welcome}>☆THUMBNAIL☆</Text>
      <View style={styles.image}>
        {isLoading ? (
          <ActivityIndicator size="large" />
        ) : (
          <Image
            style={styles.image}
            source={thumbnail ? {uri: thumbnail} : placeholderImage}
          />
        )}
      </View>
    </View>
  );

  async function generateThumbnail() {
    if (!path) {
      return;
    }

    setIsLoading(true);

    try {
      const response = await createThumbnail({
        url: path,
        timeStamp: parseInt(timeStamp, 10),
      });
      setThumbnail(response.path);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 20,
    color: 'black',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 20,
  },
  image: {
    height: 150,
    width: 250,
    backgroundColor: 'lightgrey',
    justifyContent: 'center',
  },
  pathInput: {
    backgroundColor: '#eaeaea',
    width: '80%',
    paddingHorizontal: 10,
    color: 'black',
    borderColor: 'lightgrey',
    borderWidth: 1,
  },
  timeInput: {
    backgroundColor: '#eaeaea',
    width: '40%',
    paddingHorizontal: 10,
    margin: 20,
    color: 'black',
    borderColor: 'lightgrey',
    borderWidth: 1,
  },
});

After tunning this code getting below error

[hussain-technostacks]

We are facing the same issue. Its very strange that it was working before and suddently its stopped working on already generated builds. Can anyone suggest the fixes asap ?

[souvik-ghosh]

Could be related to this - https://github.com/facebook/react-native/issues/35210

[hardik-wts]

Hi @hussain-technostacks Not found a solution with this library For me it's working fine in iOS for android I'll use react-native-fast-image to display video thumbnail (You can also use react-native <Image /> component )

And I am passing video url directly into FastImage component

<FastImage
    style={styles.image}
    resizeMode="cover"
    source={{uri: android_path}}
/>

If you have video at local (e.g. in your phone then please add file:// string in your path

const android_path = 'file://' + path;

and as per I know above trick only working for andoird not for iOS so I'll manage thumbnail part Platform wise and my final code as below

import React from 'react';
import {View, Platform} from 'react-native';
import FastImage from 'react-native-fast-image';
import styles from './styles';

export default function VideoBallReview({item = {}}) {
  const {thumbnailUrl = '', path = ''} = item;
  const android_path = 'file://' + path;
  if (Platform.OS === 'ios') {
    return (
      <View style={styles.mainContainer}>
        <FastImage
          style={styles.image}
          resizeMode="cover"
          source={{
            uri: thumbnailUrl, // Use react-native-create-thumbnail library to create thumnail 
          }}
        />
      </View>
    );
  }
  return (
    <View style={styles.mainContainer}>
      <FastImage
        style={styles.image}
        resizeMode="cover"
        source={{
          uri: android_path, // Pass direct URL/URI
        }}
      />
    </View>
  );
}

Notes

• If you have larger video from server then it may take time depend on your network.

[hardikbhingradiya]

Hi @hardik-wts I have found solution for Android, please use below solution for Android for No virtual method error. If you vary about how to create patch, then please create patch for below change

Please open CreateThumbnailModule.java file from below path node_modules -> react-native-create-thumbnail -> android -> src -> main -> java -> CreateThumbnailModule.java

protected ProcessDataTask(ReactContext reactContext, Promise promise, ReadableMap options) { + super(reactContext); -> Add this line - super(reactContext.getExceptionHandler()); -> Remove this line this.weakContext = new WeakReference<>(reactContext.getApplicationContext()); this.promise = promise; this.options = options; }

[salihgun]

Hi, you guys can check it out => https://github.com/salihgun/react-native-video-processor

[souvik-ghosh]

Closing due to inactivity