• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• clipped-tabbar-master
  • src
    • svg
      • index.ts
      • TabBg.tsx
    • utils
      • index.ts
    • navigation
      • index.ts
      • TabBar.tsx
    • components
      • TabBarAdvancedButton.tsx
      • index.ts
    • screens
      • EmptyScreen.tsx
      • index.ts
  • App.tsx
  • LICENSE
  • babel.config.js
  • .expo-shared
    • assets.json
  • app.json
  • README.md
  • package.json
  • tsconfig.json
  • .gitignore
  • assets

import React, { useMemo } from 'react';
import { FlatList, SafeAreaView, StyleSheet, View } from 'react-native';
import { generateColor } from '../utils';

export const EmptyScreen: React.FC = () => {
  const colors = useMemo(() => [...new Array(20)].map(() => generateColor()), []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        contentContainerStyle={{
          paddingBottom: 80,
        }}
        data={colors}
        renderItem={({ item: color }) => (
          <View
            style={[styles.item, {
              backgroundColor: color
            }]}
          />
        )}
        keyExtractor={(item, idx) => `item_${idx}`}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F6F7EB'
  },
  item: {
    margin: 10,
    height: 90,
    borderRadius: 10
  }
});