Spinner

import { Spinner } from 'reactnatively';

1import { View, StyleSheet } from 'react-native';2import { Spinner } from 'reactnatively';34export function LoadingStates() {5  return (6    <View style={styles.row}>7      <Spinner size="xs" color="#6366f1" />8      <Spinner size="sm" color="#22d3ee" />9      <Spinner size="md" color="#4ade80" />10      <Spinner size="lg" color="#f59e0b" />11      <Spinner size="xl" color="#f43f5e" />12    </View>13  );14}1516const styles = StyleSheet.create({17  row: { flexDirection: 'row', alignItems: 'center', gap: 20, padding: 24 },18});

1import { View, StyleSheet } from 'react-native';2import { Spinner, GlassView, Text } from 'reactnatively';34export function LoadingOverlay({ label = 'Loading...' }) {5  return (6    <View style={styles.overlay}>7      <GlassView elevation={3} borderRadius={24} style={styles.card}>8        <Spinner9          size="xl"10          color="#6366f1"11          trackColor="rgba(255,255,255,0.08)"12          thickness={4}13          label={label}14        />15      </GlassView>16    </View>17  );18}1920const styles = StyleSheet.create({21  overlay: {22    ...StyleSheet.absoluteFillObject,23    justifyContent: 'center',24    alignItems: 'center',25    backgroundColor: 'rgba(0,0,0,0.5)',26    zIndex: 100,27  },28  card: { padding: 40, alignItems: 'center' },29});

1import { FlatList, View, StyleSheet } from 'react-native';2import { Spinner, Text } from 'reactnatively';34export function InfiniteList({ data, isFetchingMore, onEndReached }) {5  return (6    <FlatList7      data={data}8      keyExtractor={(item) => item.id}9      renderItem={({ item }) => <View style={styles.item}><Text>{item.title}</Text></View>}10      onEndReached={onEndReached}11      onEndReachedThreshold={0.3}12      ListFooterComponent={13        isFetchingMore ? (14          <View style={styles.footer}>15            <Spinner size="sm" color="#6366f1" />16            <Text variant="sm" color="rgba(255,255,255,0.4)">Loading more...</Text>17          </View>18        ) : null19      }20    />21  );22}2324const styles = StyleSheet.create({25  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.05)' },26  footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 },27});