Skip to content

Instantly share code, notes, and snippets.

@lunaleaps

lunaleaps/ManyTiles.js

Last active June 4, 2025 10:34
Show Gist options
  • Save lunaleaps/eac391bf3fe4c85953cefeb74031bab0 to your computer and use it in GitHub Desktop.
Save lunaleaps/eac391bf3fe4c85953cefeb74031bab0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lunaleaps revised this gist Feb 29, 2024. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions ManyTiles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,10 +32,8 @@ function SliderHeader({
    maximumValue={1000}
    step={1}
    onValueChange={newValue => {
    // Mark rendering tiles with new value as transition
    startTransition(() => {
    onValueChange(newValue);
    });
    // Do not mark this update as a transition
    onValueChange(newValue);
    }}
    />
    </>
  2. lunaleaps created this gist Feb 29, 2024.
    78 changes: 78 additions & 0 deletions ManyTiles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    import * as React from 'react';
    import {SafeAreaView, Text, View, ActivityIndicator} from 'react-native';

    import Slider from '@react-native-community/slider';

    function SliderHeader({
    value,
    onValueChange,
    }: {
    value: number;
    onValueChange: (value: number) => void;
    }) {
    const [isPending, startTransition] = React.useTransition();

    return (
    <>
    <View
    style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
    }}>
    <Text style={{textAlign: 'center'}}>
    Render <Text style={{fontWeight: '500'}}>{value}</Text> Tiles{' '}
    </Text>
    <ActivityIndicator animating={isPending} />
    </View>

    <Slider
    value={1}
    minimumValue={1}
    maximumValue={1000}
    step={1}
    onValueChange={newValue => {
    // Mark rendering tiles with new value as transition
    startTransition(() => {
    onValueChange(newValue);
    });
    }}
    />
    </>
    );
    }
    export default function ManyTiles() {
    const views = [];
    const size = 14;
    const [value, setValue] = React.useState(1);

    for (let i = 0; i < value; ++i) {
    const view = (
    <View
    key={i}
    style={{
    width: size,
    height: size,
    borderWidth: 0.5,
    backgroundColor: 'red',
    }}
    />
    );

    views.push(view);
    }

    return (
    <SafeAreaView style={{backgroundColor: 'white'}}>
    <SliderHeader onValueChange={setValue} value={value} />
    <View
    style={{
    flexDirection: 'row',
    flex: 1,
    flexWrap: 'wrap',
    }}>
    {views}
    </View>
    </SafeAreaView>
    );
    }