n4kz / react-native-indicators Goto Github PK

Recreate

create-react-native-app rn-app-web --with-web-support
cd rn-app-web
yarn add react-native-indicators

App.js

import React from 'react';
import { UIActivityIndicator } from 'react-native-indicators'

add the module to webpack.config.js

   const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-navigation'),
    path.resolve(appDirectory, 'node_modules/react-native-tab-view'),
    path.resolve(appDirectory, 'node_modules/react-native-paper'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native-safe-area-view'),
    path.resolve(appDirectory, 'node_modules/@expo/samples'),
    path.resolve(appDirectory, 'node_modules/@expo/vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native-platform-touchable'),
    path.resolve(appDirectory, 'node_modules/react-native-pose'),
    path.resolve(appDirectory, 'node_modules/react-native-indicators'),

Then compile

yarn web

Error

ERROR in ./node_modules/react-native-indicators/src/components/indicator/index.js
Module not found: Error: Can't resolve 'react-native/package' in '/Users/chandra/Gabe/Jamie/hectare-app/node_modules/react-native-indicators/src/components/indicator'
 @ ./node_modules/react-native-indicators/src/components/indicator/index.js 1:1998-2029
 @ ./node_modules/react-native-indicators/index.js
 @ ./src/screens/PreLoading.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/index.js

I am on RN 0.61, indicators works fine on iOS, however on Android animation does not work, it shows only static loader without any animation.

The library works great on phones but when I try to use them in my React Native Web project, animations seems to be playing only once on web. Any idea what might be the reason?

I am trying to achieve any of this animations using the PulseIndicator but I believe is not achievable:

Am I missing something?

We should maybe mention the advantage of this libs ios style indicator over UIActivityIndicator provided by <ActivityIndicator />. Which is we can control size here. On iOS we only get "small" and "large". (Android we can control size but it is not determinate)

Hey,

I found in your code (indicator/index.js):

const [major, minor] = RN.version.split('.');
const hasLoopSupport = !major && minor >= 45;

hasLoopSupport is always FALSE
you have to fix it in the following way:

const hasLoopSupport = major == 0 && minor >= 45;

The indicator when becomes below or above other elements inside a View, it takes the most space of the view (flex: 1)

How to set the alignment of the indicator it self ?

Is there any way to use it as RefreshControl? Or any other library would you suggest with similar animations?

Would be amazing if we have linear indicators, like MUI LinearProgress, a example can be found here.

A customizable linear progress will help us to give feedback that something is loading but doesn't impact in the current view

Any Help on that as duration is not know all the time?

Hi,
while using the library on Android 7, the MaterialIndicator behaves like this:

it happens both on a simulator and a real device. All is fine on older Android versions and IOS.

react-native: v0.51.0
react-native-indicators: v0.11.0

Thanks for this awesome lib! The best part about it is it uses native driver for all animations. Is this correct?

If so should we mention it in readme? Because I don't touch any modules where they have anim that do not useNativeDriver. :)

react native 0.52
android 7.1
MaterialIndicator show very strange

The Indicator component is using componentWillReceiveProps, which is deprecated in the latest React versions, and will be removed in React 17.

Replacing the method by componentDidUpdate seems to fix the issue, although I am not certain if the behaviour is the same as before.

The WaveIndicator is broken in Android 7 with waveMode='outline'. At the beginning of the animation, only the top left quadrant of the animation is displayed correctly.
waveMode='fill' works correctly.

Android: 9.0 crash, other version: normal
IOS: normal

code: <WaveIndicator color="white" waveMode="outline" />

error message: cannot set 'scaleX' to float.NaN

Error while updating prop transform of a view managed by:RCTView
distance must be finite & positive, given=NaN

java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:80)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:129)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:48)
at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:32)
at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:122)
at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:332)
at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:99)
at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:543)
at com.facebook.react.animated.NativeAnimatedNodesManager.runUpdates(NativeAnimatedNodesManager.java:452)
at com.facebook.react.animated.NativeAnimatedModule$1.doFrameGuarded(NativeAnimatedModule.java:100)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:134)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:105)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:964)
at android.view.Choreographer.doCallbacks(Choreographer.java:790)
at android.view.Choreographer.doFrame(Choreographer.java:721)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:951)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.app.ActivityThread.main(ActivityThread.java:7319)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:934)
Caused by: java.lang.IllegalArgumentException: distance must be finite & positive, given=NaN

Android: 9,
Mac os

Hey, @n4kz! 👋

I've been using MaterialIndicator which is awesome, but is indeterminate. It'd be great if we could also use it as a determinate indicator. Is this possible? 😋

Reference: https://material.io/guidelines/components/progress-activity.html

Thanks for all your open-source work! 🙏

I have an indicator that appears and dissapears with the Animating property. Is there a way to add a text label beside to indicator? In this way, the label would disappear along with the indicator.

v0.17.0
RN 0.59.10
ios
MaterialIndicator start and loading ok but close animation error

I solved this here

it would be good if is added to master.

Greetings,
Kindly add rtl support for PacmanIndicator for android and IOS

Note: I solved this issue in IOS by adding direction: 'ltr', but it's not supported in Android

Best regards.