-1

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.

Madhu Paka
  • 51
  • 6
  • If you don't know how to do it, it will take too much time and effort. The best solution is to use spinners from other people, you can choose one from these https://openbase.com/categories/js/best-react-native-loading-spinner-libraries – Alija Fajic Sep 01 '22 at 06:41
  • Yeah, i saw all of them but none of them were like what I wanted. Now I want to make a custom one, it is a project requirement. – Madhu Paka Sep 01 '22 at 06:47

2 Answers2

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'}} />
atrocks01
  • 41
  • 4
  • This is different from what is need, AcitivityIndicator doesn't have a background track, also the length of the spinning arc is changing in activityIndicator while I want a constant length of arc spinning. – Madhu Paka Sep 01 '22 at 06:53
  • background track in the sense? you can maintain the size it's easy. – atrocks01 Sep 01 '22 at 06:57
  • I want it like this --> https://i.gifer.com/6px6.gif but activityIndicator looks like this --> https://callstack.github.io/react-native-paper/screenshots/activity-indicator.gif – Madhu Paka Sep 01 '22 at 07:10
  • You can use https://lottiefiles.com/ files, they are good option for such custom animations. this package will help you lottie-react-native to integrate lottie files in your app. If you need code example let me know. – atrocks01 Sep 01 '22 at 07:14
  • I have checked lottie but there's no lottie file for this, and also I want to add custom colors to it. So I think lottie will not be useful. Have you worked with rn-reanimated and svg ? I think that's the best way to deal with this. – Madhu Paka Sep 01 '22 at 07:18
  • here are some loaders, https://codepen.io/nikhil8krishnan/pen/rVoXJa also here is, [How to use svgs](https://stackoverflow.com/questions/38830568/how-to-show-svg-file-on-react-native#:~:text=Install%20react%2Dnative%2Dsvg%2Dtransformer%20by%20running%20this%20command,need%20to%20update%20your%20metro.) best of luck for your project. I don't recommend using third party lib for loader. if you google properly you will be able to find perfect svg. or you learn basics of svg and try to modify these svgs, svgs are easy to modify. you can make colors dynamic by replacing static colors in svg files. – atrocks01 Sep 01 '22 at 12:02
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

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45