Spinner

Spinner is part of the @flexnative/icons package. To use the FlexNative Spinner you needs to install @flexnative/icons package. Fallow this link on how to install the package.

You can use any of paskage's icon as apinner.

API

import { Spinner } from '@flexnative/icons';

Component

A memoized React component that renders a spinning icon using animated styles.

Spinner

Type: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>

Properties

info

and Spinner components expects props of type IconProp.

Usecase Examples

The following example demonstrates the Spinner in action.

Colors

Preview





























Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 22:15:39
 * @ Description: Examples of Spinner component with colors.
 */
import React from 'react';
import { Spinner } from '@flexnative/icons';
import { ICON_SIZE } from './constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Spinner name='spinner' size={ICON_SIZE} color='default'/>
        <Spinner name='spinner' size={ICON_SIZE} color='primary'/>
        <Spinner name='spinner' size={ICON_SIZE} color='secondary'/>
        <Spinner name='spinner' size={ICON_SIZE} color='info'/>
        <Spinner name='spinner' size={ICON_SIZE} color='success'/>
        <Spinner name='spinner' size={ICON_SIZE} color='warning'/>
        <Spinner name='spinner' size={ICON_SIZE} color='error'/>
        <Spinner name='spinner' size={ICON_SIZE} color='dark'/>
        <Spinner name='spinner' size={ICON_SIZE} color='light'/>

        <Spinner name='spinner' size={ICON_SIZE} color='red'/>
        <Spinner name='spinner' size={ICON_SIZE} color='chartreuse'/>
        <Spinner name='spinner' size={ICON_SIZE} color='#9400FF'/>
        <Spinner name='spinner' size={ICON_SIZE} color='#FFC436'/>
        <Spinner name='spinner' size={ICON_SIZE} color='rgb(0, 146, 255)'/>
      </div>
    );
  }
}

Sizes

Preview













Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 22:28:36
 * @ Description: Examples of Spinner component with different sizes.
 */
import React from 'react';
import { Spinner } from '@flexnative/icons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Spinner name='star' color='secondary' />
        <Spinner name='star' size={16} color='secondary' />
        <Spinner name='star' size={18} color='secondary' />
        <Spinner name='star' size={24} color='secondary' />
        <Spinner name='star' size={32} color='secondary' />
        <Spinner name='star' size={64} color='secondary' />
      </div>
    );
  }
}

Styling with StyleSheet

Preview







Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 22:37:54
 * @ Description: Examples of Spinner component styling with StyleSheet.
 */
import React from 'react';
import { StyleSheet } from 'react-native';
import { Spinner } from '@flexnative/icons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Spinner name='star' style={styles.icon1} />
        <Spinner name='star' style={styles.icon2} />
        <Spinner name='star' style={styles.icon3} />
      </div>
    );
  }
}

const styles = StyleSheet.create({
  icon1: {
    width: 64,
    height: 64,
    fontSize: 64,
    color: 'rgb(102, 102, 102)'
  },
  icon2: {
    width: 64,
    height: 64,
    fontSize: 64,
    color: 'rgb(0, 146, 255)'
  },
  icon3: {
    fontSize: 32,
    color: 'crimson',
    backgroundColor: '#FFC436',
    textAlignVertical: 'center',
    width: 68,
    height: 68,
    padding: 15,
    textAlign: 'center',
    borderRadius: 34,
    borderWidth: 3,
    borderColor: 'black',
    overflow: 'hidden'
  }
});

Any Icon

Preview











Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 22:38:23
 * @ Description: Examples of Spinner component using any icon as spinner.
 */
import React from 'react';
import { Spinner } from '@flexnative/icons';
import { ICON_SIZE } from './constants';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Spinner name='sun' size={ICON_SIZE} color='secondary' />
        <Spinner name='star' size={ICON_SIZE} color='secondary' />
        <Spinner name='moon' size={ICON_SIZE} color='secondary' />
        <Spinner name='trash' size={ICON_SIZE} color='secondary' />
        <Spinner name='grid' size={ICON_SIZE} color='secondary' />
        <Spinner name='excel-file' size={ICON_SIZE} color='secondary' />
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(<Spinner name='star' size={128} color='secondary' />);

Result

Loading...