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

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.

warning

Animation it is not working here in documentation. To view animation please view the demo app.

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...