Hi can I know where can I access the generated wave image from the local mobile folder in iOS and android? Or do we have a function just to access the image?

thanks,

Some files should be excluded from the npm package because they make it unnecessarily big:

• example
• screenshots

Also, why is there an express app in this repo that seems irrelevant to the project?

I'm facing this error:

{props.audio && (
<WaveForm 
   source={{uri: 'https://psv4.userapi.com/c852436//u338598380/audiomsg/d4/01f4598f0f.mp3'}}  
   waveFormStyle={{waveColor:'red', scrubColor:'white'}}
   play={true}
>
 </WaveForm>
)}

• node_modules/react-native/Libraries/ReactNative/getNativeComponentAttributes.js:29:4 in getNativeComponentAttributes
• node_modules/react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js:104:25 in
• ... 18 more stack frames from framework internals

    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.2.0",
    "expo": "^35.0.0",
    "expo-font": "~7.0.0",
    "lottie-ios": "^3.0.3",
    "lottie-react-native": "^3.0.2",
    "native-base": "^2.13.8",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-audiowaveform": "^2.0.5",
    "react-native-easy-grid": "^0.2.2",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^2.8.0",
    "react-native-svg": "^9.13.3",
    "react-native-web": "^0.11.7",
    "react-native-webview": "^10.2.3",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3"
  },```

Not render on Android from Uri , IOS work

I would love to use this library for some audio recordings, but when trying to use it with RN 0.61.2, it throws an error on the attempt to import <RCTViewManager.h>. Is there intention to support 0.61+? Also, can a podspec be written to make this a pod that can leverage Autolinking?

hey man-
this thing is great!
but i'm running into a couple of little issues w/ very short sounds
see the screen attached screenshot and mp3
the waveform does not fill the view and it's not resizing on device rotate
the scrubber sync is less of an issue for my application as i will be using the waveform just to set in and out points

sound_2.mp3.zip

Can I use this library for the latest react native project?
May I know the performance issue is fixed for the android part?

Hi,
I get this error on IOS:

Invariant Violation: requireNativeComponent: "OGWave" was not found in the UIManager.

After searching, #68 said that simply doing a cd ios && pod install would work.
But when using expo there isn't any IOS folder where I can pod install unless I eject
Please help

hey , i can't find how to get audio info like,

duration,
current time ... etc
thanks in advance :)

I keep getting this error while building the app in android

* What went wrong:
Execution failed for task ':react-native-audiowaveform:compileDebugJavaWithJavac'.
> Could not resolve all files for configuration ':react-native-audiowaveform:debugCompileClasspath'.
   > Could not find recyclerview-1.0.0.jar (androidx.recyclerview:recyclerview:1.0.0).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/androidx/recyclerview/recyclerview/1.0.0/recyclerview-1.0.0.jar

checked everything in Readme file.

react native version: 0.64.0

"react-native-audiowaveform": "^2.0.5"

Hi, I am using the waveform component, but sometimes it takes a while to load the sound file and show up the waveform on view, I like to put a loading spinner before it is loaded, after it is loaded then turn off the spinner, so is there a loaded callback function where I can turn off the loading spinner? my code looks like this:

`

               {audioFileURL.length!=0 && <WaveForm

                style={styles.waveform}

                onPress={this.changestate}

                source={{uri: audioFileURL}}

                stop={stopAudio}

                play={playAudio}

                autoPlay={true}

                waveFormStyle={{ waveColor: "lightsteelblue", scrubColor: "white" }}

              />}

`

Do I need to add any other props to parent views to enable scrub control?

Doesn't seem to be working with the following:

import React, { PureComponent } from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";

// Constants
import {
  brightRowBackground,
  skyBlueButtonBackground,
  buttonTextColor,
  darkRowBackground
} from "../../../utils/Colors";

// Packages
import WaveForm from "react-native-audiowaveform";

export default class Waveform extends PureComponent {
  static defaultProps = {
    isPlaying: false
  };

  constructor(props) {
    super(props);

    this.state = {
      redrawWaveform: false
    };
  }

  componentWillReceiveProps(props) {
    if (props.inOutPanelExpanded !== this.props.inOutPanelExpanded) {
      this.setState({ redrawWaveform: true }, () => this.setState({ redrawWaveform: false }));
    }
  }

  render() {
    if (!this.state.redrawWaveform) {
      return (
        <WaveForm
          play={this.props.isPlaying}
          source={require("../../../../assets/sounds/Audio.wav")}
          waveFormStyle={{ waveColor: "white", scrubColor: "#B5FF00" }}
          style={[styles.container, this.props.inOutPanelExpanded ? { height: 88 } : { height: 32 }]}
        />
      );
    } else {
      return <View style={[styles.container, this.props.inOutPanelExpanded ? { height: 88 } : { height: 32 }]} />;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: darkRowBackground
  }
});

The URL of this package is incorrect in NPM, and points to https://github.com/juananime/react-native-waveformt (notice the 't' at the end).

See:
https://www.npmjs.com/package/react-native-audiowaveform

@juananime
The library is not working anymore for newer RN versions. I was planning to use this on a production app but i am stuck on this since few days. Can you please check out whats the problem. I tried fixing the android code but so far no success.

When i view a 30 minute file, there is no visualization. I am guessing this is because the library is optimized for songs. Is there some easy way to make the sample rate dynamic?

Hi, awesome lib! Is this support stop callback and play callback so that we can know when the audio is start playing and stoping? just like set play={false} when the audio is finished to play.

#import <React/RCTResizeMode.h>
this line failed in XCode when trying to compile. seems like the React library is not imported?

<WaveForm
source={{uri:'http://abc.mp3'}}
play={true}
waveFormStyle={{waveColor:'red', scrubColor:'blue'}}
style={{ width: 500, height: 50 }}
/>

Thank you for sharing the module. Its fun!
But unfortunately for making an apk with the latest master banch, I had to have few changes like this.
tf0054@e3cd51a

And I found the change of parameter name and it needed me to apply the according change to react-native-audiowaveform module pulled from npm repo (v1.0.461)
tf0054@e3cd51a#diff-ff34929671c373ab095bcafa91bd46d4

patch -d node_modules/react-native-audiowaveform < react-native-audiowaveform_index_js.diff

Is it possible to add WaveformWrapper.js which is missing? I guess itd the best to sync the example between Android and IOS.

When using onPress an error is thrown (RSD).

Cannot read property 'props' of undefined

Example implementation;

<WaveForm source={{ uri: 'https://.....WW01.mp3' }} waveFormStyle={{waveColor:'red', scrubColor:'white'}} onPress={sender => console.log(click ${sender})} > </WaveForm>

Wasn't sure what sender was so included that for the sake of debugging.

Instead of generating waveform from a file, I aim to generate from device mic input.

How can I achieve this?

I built a starter app using react-native init.
My react-native version is 0.46.1 and react-cli version is 2.0.1.
I added the library via yarn add react-native-audiowaveform
Then, I manually linked the library into the starter app using the instructions provided in the readme file.
I then changed the index.android.js file, here's the source of that file :-

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import WaveForm from 'react-native-audiowaveform';

export default class WaveformApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <WaveForm
          source={require('./a_fusion_in_raag_des.mp3')}
          waveFormStyle={{waveColor:'red', scrubColor:'white'}}>
        </WaveForm>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('WaveformApp', () => WaveformApp);

After the building process is successfully completed, it shows this error screen as soon as the app is loaded:-

Please advise as to how to proceed, thank you.

I cloned the repo and moved into the Example directory, installed all dependencies via yarn, started packager using react-native start and then built the app using react-native run-android.
The app built successfully but as soon as the app starts on the device it throws this exception :-

I then tried to fix this by navigating to react-native-audiowaveform directory inside the node_modules directory and define a propType for componentID like this :-

const WaveForm = React.createClass({
    propTypes: {
        ...View.propTypes,
        componentID:React.PropTypes.string,
        autoPlay:React.PropTypes.bool,
        waveFormStyle:PropTypes.shape({
            leftWaveColor: React.PropTypes.string,
            rightWaveColor: React.PropTypes.string
        }),

When I rebuilt the app, the exception changed to :-

Please advise about how to get this sample application up and running and what's wrong that's causing these issues. Thank you.

appreciated your work @juananime, Does this library support iTunes music ?
if Yes than Please provide Demo Example for that

Is there any events like onLoadComplete ?

Hey, i want to use something with streaming, showinhg a audio spectro or something like that, this works with that?

i followed the installation process but it's not working

When I set mp3 file it works perfect.
But when source is aac file waves are displayed but can't play sound.

Hi,
I tried to install and link your module in my React Native App, it's compile and run successfully but when i use in my render, it doesn't show anything

Can you help me?
Thanks

Add android libraries with same iOS functionality

Awesome lib, but I have found out that when we put a source file and display the wave form, we can not use play prop to let it play the audio on iOS 12.4 which is working on Android.

Hi, great component btw.

I'm having a problem when I run de assempleDebug.
The app works perfectly when I do npx react-native run-android.
The soundfile is playing and the UI works just fine in dev mode with my phone connected with usb.
But In the APK I see this with logcat:

E/OGTAGDEBUG::: waveformFinishPlay:
E/XSXGOT: soundfile is null
V/MediaPlayerNative: isPlaying: no active player

Any idea? Thanks

My react-native and reaxt-cli versions are 0.40.1 and 2.0.1 respectively.
The steps I followed to run the app were as follows:-

• Cloned the repo and switched to the Example directory.
• I am using yarn instead of npm and so I ran the yarn command to install all dependencies.
• Then I started the packager using the react-native start command.
• After packager was ready, I ran the react-native run-android command which began with building the app.
• As soon as the building was completed, the app interface is loaded but with an error. Here's a screenshot of the error I received:-
  
  Please advise on how to proceed ahead. I really have to work with this library.

Thanks for the hard work on this module.

I have run into a couple of issues using this on iOS:

1. If I try to play the media with onPress before the waveform has appeared (it takes a couple of seconds when using a media URL), the app crashes with the following error:

2018-08-16 14:38:58.755514+0100 CloudVoiceSimple[27007:10505913] SRC ::: {
    isAsset = 0;
    isNetwork = 1;
    mainVer = 0;
    patchVer = 0;
    uri = "https://archive.org/download/testmp3testfile/mpthreetest.mp3";
}
2018-08-16 14:38:58.755723+0100 CloudVoiceSimple[27007:10505913] NSURLRequest :: https://archive.org/download/testmp3testfile/mpthreetest.mp3
2018-08-16 14:38:58.763712+0100 CloudVoiceSimple[27007:10505913] reactSetFrame ::: (null)
2018-08-16 14:38:59.487585+0100 CloudVoiceSimple[27007:10513492] [] nw_connection_get_connected_socket 231 Connection has no connected handler
2018-08-16 14:39:01.402117+0100 CloudVoiceSimple[27007:10505913] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan 16.5]'
*** First throw call stack:
(
	0   CoreFoundation                      0x00000001058481e6 __exceptionPreprocess + 294
	1   libobjc.A.dylib                     0x0000000103cec031 objc_exception_throw + 48
	2   CoreFoundation                      0x00000001058bd975 +[NSException raise:format:] + 197
	3   QuartzCore                          0x00000001081ace25 _ZN2CA5Layer12set_positionERKNS_4Vec2IdEEb + 151
	4   QuartzCore                          0x000000010819d52a -[CALayer setPosition:] + 43
	5   QuartzCore                          0x000000010819db58 -[CALayer setFrame:] + 544
	6   UIKit                               0x000000010982c557 -[UIView(Geometry) setFrame:] + 368
	7   CloudVoiceSimple                    0x0000000101ffca25 __34-[OGWaverformView updateProgress:]_block_invoke + 261
	8   UIKit                               0x000000010983f597 +[UIView(UIViewAnimationWithBlocks) _setupAnimationWithDuration:delay:view:options:factory:animations:start:animationStateGenerator:completion:] + 560
	9   UIKit                               0x000000010983fb25 +[UIView(UIViewAnimationWithBlocks) animateWithDuration:animations:] + 48
	10  CloudVoiceSimple                    0x0000000101ffc8d2 -[OGWaverformView updateProgress:] + 642
	11  Foundation                          0x00000001037564dd __NSFireTimer + 83
	12  CoreFoundation                      0x00000001057d7e64 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 20
	13  CoreFoundation                      0x00000001057d7a52 __CFRunLoopDoTimer + 1026
	14  CoreFoundation                      0x00000001057d760a __CFRunLoopDoTimers + 266
	15  CoreFoundation                      0x00000001057cee4c __CFRunLoopRun + 2252
	16  CoreFoundation                      0x00000001057ce30b CFRunLoopRunSpecific + 635
	17  GraphicsServices                    0x000000010d8fca73 GSEventRunModal + 62
	18  UIKit                               0x000000010977d0b7 UIApplicationMain + 159
	19  CloudVoiceSimple                    0x0000000101cbb18f main + 111
	20  libdyld.dylib                       0x0000000108754955 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb) 

2. The audio continues to play when the component is unmounted. Is there anyway to stop it playing on unmount?

HI, when I loaded my audio file from my local folder on real device, no wave form shown up, but if I load from require(), it works, the code is as following:
`
<WaveForm

                style={styles.waveform}

                onPress={this.changestate}

                //source={require('../../../assets/videos/bachfugue.mp3')} .  //works

                source={{uri: "file://"+RNFetchBlob.fs.dirs.DCIMDir+ '/Camera/test.aac'}} // not work

                //source={{uri: "file://"+RNFetchBlob.fs.dirs.DCIMDir+ '/Camera/cutVideo.mp3'}} // not work

                stop={this.state.stopAudio}

                play={this.state.playAudio}

                autoPlay={true}

                waveFormStyle={{ waveColor: "lightsteelblue", scrubColor: "white" }}

              />`

Please help!
idoor

Hi! Thanks for your plugin 😇

I've tried to make an example from your Readme:
import WaveForm from 'react-native-audiowaveform';

<WaveForm 
    source={require('./path/to/your/file.mp3')}  
    waveFormStyle={{waveColor:'red', scrubColor:'white'}}
>
</WaveForm>

But i've got:

Warning: Failed prop type: Invalid prop `waveFormStyle.waveColor` of type `number` supplied to `OGWave`, expected `string`.
    in OGWave (created by WaveForm)
    in WaveForm (created by Player)
    in RCTView (created by View)
    in View (created by Player)
    in Player (created by CastsList)
    in RCTView (created by View)
    in View (created by CastsList)
    in CastsList (created by App)
    in App (created by CloudCast)
    in CloudCast
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

What I have to do?

I am using react-native 0.46.1 which uses react 16.0.0-alpha12 and react-cli 2.0.1.
I have just added, manually linked and included the react-native-audiowaveform library into my app.
When the app starts it shows me some deprecations in yellow boxes at the bottom of my app.
Here's a screenshot regarding the same :-

Please upgrade the React API used for the library. Thank you

I can play audio file but I can't see the waveform at all.
Please help me!

"libOGReactNativeWaveform.a" cannot be found.
I'm on Mac OS. all NPM, xcode, etc are up-to-date.

Im using react-native: 0.42.0
react-native-cli: 2.0.1

it throws this error when I apply :-

<WaveForm source={{uri:'https://www......mp3'}} />

It has been a while since a release on npm and there have been a number of fixes that would really benefit from being published in a new version.