Question 34871 in React native Question posted in
The official React Native documentation can be found here.

React Native – Want to create a custom circular spinner

I want to create a circular spinner for using it while loading pages. I am new to react native, we have activity indicator, but cannot customize that.
https://gifer.com/en/6px6. I want something like this.
I think we can make it using SVG and animating it. But I don’t know how to proceed and animate it. This may be silly, but sorry I am new and I couldn’t find something related to this on the internet.
Thank you. Help appreciated.

Tags:

2

Answers


  1. 0

    Here is a code, snippet ActivityIndicator is component from react-native itself, so no library need to be installed.
    As you have mentioned you’re new in this, I have added how to use it too.

        // create this as a individual component
    import {ActivityIndicator} from 'react-native';
    export const Loader = React.memo(({size, color, style}) => {
      return (
        <ActivityIndicator
          style={[{flex: 1}, style]}
          color={color ? color : "orange"}
          size={size ? size : 'large'}>
        </ActivityIndicator>
      );
    });

    // In your screen, where you have to show loader
    import {Loader} from ./Loader;
    <Loader size="small" color="red" style={{ flex:1, justifyContent:"center", alignSelf:'center'}} />
    Login or Signup to reply.
  2. 0

    Hey you can check this library :https://www.npmjs.com/package/react-native-spinkit

    enter image description here

    Here also you can change color etc :

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search