phamfoo / react-native-animated-spinkit Goto Github PK

When a spinner is created with initial value animating being false, it is already animating.

Consider following example:
The animating prop is initially false and only later set to true:

import { Circle } from 'react-native-animated-spinkit';
...
const [animating, setAnimating] = React.useState(false); // initially off
...
<Circle size={size} color={color} animating={animating} />

Justification: Sometimes the animation needs to be stopped (because of Detox tests etc.)

Animations don't seem to loop properly on React Native Web. They are only being played once.

@tienph6m First thank you for this great alternative to react-native-spinkit.

I integrated your library today and noticed that when loading <Circle /> the first apparition won't be animated but instead will be blinking.

Example

For example if I want to alter <Wave /> components' children (make border radius to them or whatever) there is no way I can achieve this.

First of all, thanks for the library to be used with Expo!

I found a weird situation. I am using this library within a customized button. Herewith a simple example of the code.
Basically it is a button that can take either text or an icon. And while the button is pressed and being loaded with data, the spinner will show up instaed of the content inside.

const Button = ({
  type = 'icon',
  content,
  loading,
  disabled,
  onPress
}) => {

  const loadingSpinkit = useMemo(
    () => (
      <View style={{ position: 'absolute' }}>
        <Chase
          size={20}
          color='black'
        />
      </View>
    ),
    []
  )

  const children = useMemo(() => {
    switch (type) {
      case 'icon':
        return (
          <>
            <Icon name={content} />
            {loading && loadingSpinkit}
          </>
        )
      case 'text':
        return (
          <>
            <Text children={content} />
            {loading && loadingSpinkit}
          </>
        )
    }
  }, [loading, disabled])

  return (
    <Pressable
      onPress={onPress}
      children={children}
      disabled={disabled || loading}
    />
  )
}

export default Button

When this component is first being loaded, the animation is fine. But after each press, the spinner shows but some part of it will stuck. See image below. I tried several types and all of them have some parts stuck. Is there a reason why?

It'd be nice to see the project on https://reactnative.directory! Instructions for how to add it are here: https://github.com/react-native-community/directory#how-do-i-add-a-library