Skip to content

Instantly share code, notes, and snippets.

@aamnah

aamnah/Placeholder.tsx

Last active November 22, 2019 07:27
Download ZIP

Revisions

  1. aamnah revised this gist Nov 22, 2019. 1 changed file with 11 additions and 9 deletions.
    20 changes: 11 additions & 9 deletions Placeholder.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,12 @@
    /*
    https://tldrdevnotes.com/reactnative/loading-component-animated-animations/
    https://tldrdevnotes.com/reactnative/svg-loading-component/
    USAGE:
    <Placeholder />
    <Placeholder loading={false}/>
    <Placeholder shape='circle' size={150}/>
    <Placeholder shape='rect' width={200} height={100}/>
    <Placeholder loading={false} shape='circle' size={100}/>
    */

    import React, { useEffect } from 'react'
    @@ -112,12 +118,8 @@ export default function Placeholder({


    /*
    USAGE:
    <Placeholder />
    <Placeholder loading={false}/>
    <Placeholder shape='circle' size={150}/>
    <Placeholder shape='rect' width={200} height={100}/>
    <Placeholder loading={false} shape='circle' size={100}/>
    LINKS:
    https://tldrdevnotes.com/reactnative/loading-component-animated-animations/
    https://tldrdevnotes.com/reactnative/svg-loading-component/
    */
  2. aamnah revised this gist Nov 22, 2019. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions Placeholder.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,8 @@
    /*
    https://tldrdevnotes.com/reactnative/loading-component-animated-animations/
    https://tldrdevnotes.com/reactnative/svg-loading-component/
    */

    import React, { useEffect } from 'react'
    import { Animated, View } from 'react-native'
    import Svg, {
  3. aamnah created this gist Nov 22, 2019.
    118 changes: 118 additions & 0 deletions Placeholder.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,118 @@
    import React, { useEffect } from 'react'
    import { Animated, View } from 'react-native'
    import Svg, {
    SvgProps,
    Circle,
    CircleProps,
    Rect,
    RectProps,
    CommonPathProps
    } from 'react-native-svg'

    type Props = Readonly<{
    loading?: boolean
    shape?: 'circle' | 'rect'
    size: number
    height: number
    width: number
    }>

    // set a value to be animated
    const currentColor = new Animated.Value(0)

    // interpolate color value
    const changeColor = currentColor.interpolate({
    inputRange: [0, 1, 2], // the values that the animation will transition from
    outputRange: ['gainsboro', 'whitesmoke', 'gainsboro'] // values that are animating
    })

    // define the looping animation
    const animateColor = ()=> {
    Animated.loop(
    Animated.sequence([
    Animated.timing(currentColor, {
    toValue: 2, // the value in interpolated output range that you want to go to
    duration: 2000 // ms
    }),
    ])
    ).start()
    }


    export default function Placeholder({
    loading = true,
    size = 50,
    height = 50,
    width = 50,
    radius = 8,
    shape = 'rect',
    fill = 'gainsboro',
    ...rest
    }: Props &
    SvgProps &
    CircleProps &
    RectProps &
    CommonPathProps &
    any) {

    useEffect(() => {
    // start the animation to change background color
    animateColor()
    })

    const AnimatedSvg = Animated.createAnimatedComponent(Svg)

    return (
    <View
    loading={loading}
    style={{margin: 8}}
    {...rest}
    >
    {shape === 'circle' && (
    <AnimatedSvg
    size={size}
    height={size}
    width={size}
    viewBox={`0 0 ${size * 2} ${size * 2}`}
    fill={loading ? changeColor : fill}
    >
    <Circle
    cx={size}
    cy={size}
    r={size}
    />
    </AnimatedSvg>
    )}

    {shape === 'rect' && (
    <AnimatedSvg
    height={height}
    width={width}
    viewBox={`0 0 ${width} ${height}`}
    fill={loading ? changeColor : fill}
    >
    <Rect
    x="0"
    y="0"
    rx={radius}
    width={width}
    height={height}
    />
    </AnimatedSvg>
    )}
    </View>

    )
    }


    /*
    USAGE:
    <Placeholder />
    <Placeholder loading={false}/>
    <Placeholder shape='circle' size={150}/>
    <Placeholder shape='rect' width={200} height={100}/>
    <Placeholder loading={false} shape='circle' size={100}/>
    */