FlatList

gistfile1.txt

import React, { useCallback, useRef, useState } from 'react'
import {
  View,
  Text,
  Image,
  Alert,
  StyleSheet,
  SafeAreaView,
  Dimensions,
  FlatList,
  ImageBackground,
} from 'react-native'
import { useFocusEffect } from '@react-navigation/native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Feather, MaterialIcons } from '@expo/vector-icons'
import { Form } from '@unform/mobile'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { Modalize } from 'react-native-modalize'
import { Portal } from 'react-native-portalize'
import { SearchBar } from 'react-native-elements'

const screen = Dimensions.get('window')

import Colors from '../../../utils/colors'
import CardImageLeft from '../../../components/CardImageLeft'
import ButtonPrimary from '../../../components/ButtonPrimary'
import Yup from '../../../config/yup'
import { color } from 'react-native-reanimated'

import { useAuth } from '../../../hooks/auth'

const CATEGORIES = [
  {
    id: '0',
    name: 'TODAS',
  },
  {
    id: '1',
    name: 'Frutas',
  },
  {
    id: '2',
    name: 'Verduras/Legumes',
  },
  {
    id: '3',
    name: 'Verdinhos',
  },
  {
    id: '4',
    name: 'Castanhas',
  },
]

const PRODUCTS = [
  {
    id: '00',
    name: 'Laranja',
    price: '1,50',
    image: 'https://images.unsplash.com/photo-1560749605-cebc04c2697c',
  },
  {
    id: '01',
    name: 'Uva',
    price: '2,00',
    image: 'https://images.unsplash.com/photo-1595938688117-8af7b8da9fca',
  },
  {
    id: '02',
    name: 'Morango',
    price: '4,75',
    image: 'https://images.unsplash.com/photo-1543158181-e6f9f6712055',
  },
  {
    id: '03',
    name: 'Banana',
    price: '3,99',
    image: 'https://images.unsplash.com/photo-1571771894821-ce9b6c11b08e',
  },
]

const Home: React.FC = ({ navigation, route }) => {
  const [search, setSearch] = useState(null)
  const [title, setTitle] = useState('Categorias')
  const modalizeCategoriesRef = useRef<Modalize>(null)

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: (props) => (
        <TouchableOpacity
          style={{ flexDirection: 'row' }}
          onPress={() => modalizeCategoriesRef.current?.open()}
        >
          <Text style={{ fontFamily: 'Roboto_700Bold', fontSize: 18 }}>
            {title}
          </Text>
          <MaterialIcons name="keyboard-arrow-down" size={24} color="black" />
        </TouchableOpacity>
      ),
      headerLeft: (props) => (
        <TouchableOpacity
          style={{ marginLeft: 10 }}
          onPress={() => navigation.toggleDrawer()}
        >
          <Feather name="menu" size={24} color="black" />
        </TouchableOpacity>
      ),
      headerRight: (props) => (
        <TouchableOpacity style={{ marginRight: 10 }}>
          <Feather name="plus-square" size={24} color="black" />
        </TouchableOpacity>
      ),
    })
  }, [navigation, route])

  const renderEmptyCell = (data, columns) => {
    if (data % columns == 1) {
      return (
        <>
          <View
            style={{
              height: screen.width / 3 - 10,
              width: screen.width / 3 - 10,
              borderRadius: 5,
              borderWidth: 2,
              borderColor: Colors.grey,
              margin: 4,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Feather name="plus" size={72} color={Colors.grey} />
          </View>
          <View
            style={{
              height: screen.width / 3 - 10,
              width: screen.width / 3 - 10,
              borderRadius: 5,
              borderWidth: 2,
              borderColor: Colors.grey,
              margin: 4,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Feather name="plus" size={72} color={Colors.grey} />
          </View>
        </>
      )
    } else {
      return (
        <View
          style={{
            height: screen.width / 3 - 10,
            width: screen.width / 3 - 10,
            borderRadius: 5,
            borderWidth: 2,
            borderColor: Colors.grey,
            margin: 4,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Feather name="plus" size={72} color={Colors.grey} />
        </View>
      )
    }
  }

  const renderCategories = (data) => {
    const { item } = data
    return (
      <TouchableOpacity
        style={{
          borderWidth: 2,
          borderRadius: 5,
          borderColor: Colors.grey,
          flexDirection: 'row',
          alignItems: 'center',
          paddingVertical: 10,
          paddingHorizontal: 10,
          marginBottom: 10,
        }}
      >
        <Text
          style={{
            fontFamily: 'Roboto_700Bold',
            fontSize: 14,
            color: Colors.grey,
          }}
        >
          {item.name}
        </Text>
      </TouchableOpacity>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      {/* <KeyboardAwareScrollView showsVerticalScrollIndicator={false}> */}
      <View
        style={{
          backgroundColor: '#FFFFFF',
          flexDirection: 'row',
          alignItems: 'center',
        }}
      >
        <SearchBar
          placeholder="Buscar por produto..."
          containerStyle={{
            backgroundColor: '#FFFFFF',
            borderColor: 'red',
            borderTopWidth: 0,
            borderBottomWidth: 0,
            flex: 1,
          }}
          inputContainerStyle={{
            backgroundColor: '#EBEDF0',
            borderRadius: 25,
            padding: 0,
            margin: 0,
            height: 36,
          }}
          inputStyle={{ fontSize: 14, marginLeft: 2 }}
          lightTheme={true}
          // onChangeText={(value) => setSearch(value)}
          value={search}
        />
        {/* <Feather name="search" size={24} color="black" /> */}
      </View>
      <FlatList
        data={PRODUCTS}
        keyExtractor={(item) => item.id}
        numColumns={3}
        style={{
          marginHorizontal: 4,
          paddingVertical: 4,
          backgroundColor: Colors.light,
        }}
        contentContainerStyle={{ alignItems: 'center' }}
        renderItem={({ item, index }) => {
          if (index == PRODUCTS.length - 1) {
            return (
              <>
                <TouchableOpacity style={{ margin: 4 }}>
                  <Image
                    source={{ uri: item.image }}
                    resizeMode="cover"
                    style={{
                      height: screen.width / 3 - 10,
                      width: screen.width / 3 - 10,
                      borderTopLeftRadius: 5,
                      borderTopRightRadius: 5,
                    }}
                  />
                  <View
                    style={{
                      backgroundColor: Colors.grey,
                      borderBottomLeftRadius: 5,
                      borderBottomRightRadius: 5,
                      paddingHorizontal: 4,
                      paddingVertical: 2,
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: 'Roboto_700Bold',
                        fontSize: 12,
                        color: '#FFFFFF',
                      }}
                    >
                      {item.name}
                    </Text>
                    <Text
                      style={{
                        fontFamily: 'Roboto_400Regular',
                        fontSize: 10,
                        color: '#FFFFFF',
                      }}
                    >
                      R$ {item.price}
                    </Text>
                  </View>
                </TouchableOpacity>
                {renderEmptyCell(PRODUCTS.length, 3)}
              </>
            )
          } else {
            return (
              <TouchableOpacity style={{ margin: 4 }}>
                <Image
                  source={{ uri: item.image }}
                  resizeMode="cover"
                  style={{
                    height: screen.width / 3 - 10,
                    width: screen.width / 3 - 10,
                    borderTopLeftRadius: 5,
                    borderTopRightRadius: 5,
                  }}
                />
                <View
                  style={{
                    backgroundColor: Colors.grey,
                    borderBottomLeftRadius: 5,
                    borderBottomRightRadius: 5,
                    paddingHorizontal: 4,
                    paddingVertical: 2,
                  }}
                >
                  <Text
                    style={{
                      fontFamily: 'Roboto_700Bold',
                      fontSize: 12,
                      color: '#FFFFFF',
                    }}
                  >
                    {item.name}
                  </Text>
                  <Text
                    style={{
                      fontFamily: 'Roboto_400Regular',
                      fontSize: 10,
                      color: '#FFFFFF',
                    }}
                  >
                    R$ {item.price}
                  </Text>
                </View>
              </TouchableOpacity>
            )
          }
        }}
      />
      <View
        style={{
          shadowColor: Colors.grey,
          shadowOffset: { height: -2, width: 0 },
          shadowOpacity: 0.23,
          elevation: 4,
          backgroundColor: '#FFFFFF',
        }}
      >
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginHorizontal: 10,
            marginVertical: 10,
          }}
        >
          <View style={{}}>
            <Text
              style={{
                fontFamily: 'Roboto_400Regular',
                fontSize: 14,
              }}
            >
              23 itens
            </Text>
            <Text
              style={{
                fontFamily: 'Roboto_700Bold',
                fontSize: 22,
              }}
            >
              R$ 108,50
            </Text>
          </View>
          <ButtonPrimary text="PEDIDO" onPress={() => setTitle('Frutas')} />
        </View>
      </View>
      {/* </KeyboardAwareScrollView> */}
      <Portal>
        <Modalize
          ref={modalizeCategoriesRef}
          adjustToContentHeight={true}
          childrenStyle={{ marginHorizontal: 20, marginVertical: 20 }}
          HeaderComponent={
            <View>
              <Text
                style={{
                  textAlign: 'center',
                  fontFamily: 'Roboto_400Regular',
                  fontSize: 16,
                  color: Colors.grey,
                  marginTop: 10,
                }}
              >
                Escolha uma categoria
              </Text>
            </View>
          }
          flatListProps={{
            data: CATEGORIES,
            renderItem: renderCategories,
            keyExtractor: (item) => item.id,
            showsVerticalScrollIndicator: false,
          }}
        />
      </Portal>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  containerModalize: {
    flex: 1,
  },
  content: {
    marginHorizontal: 20,
  },
  containerLogo: {
    alignItems: 'center',
  },
  logo: {
    width: 200,
    resizeMode: 'contain',
  },
  title: {
    textAlign: 'center',
    fontFamily: 'Roboto_700Bold',
    fontSize: 18,
    color: Colors.grey,
    marginVertical: 10,
  },
  buttonPrimary: {
    backgroundColor: Colors.primary,
    alignItems: 'center',
    padding: 15,
    borderRadius: 5,
  },
  buttonPrimaryText: {
    fontFamily: 'Roboto_700Bold',
    fontSize: 16,
    color: Colors.light,
  },
  containerDivider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  divider: {
    flex: 1,
    height: 1,
    backgroundColor: '#edf2f4',
  },
  dividerText: {
    fontFamily: 'Roboto_400Regular',
    fontSize: 12,
    width: 50,
    textAlign: 'center',
  },
  buttonSocialMedia: {
    borderWidth: 1.2,
    borderRadius: 5,
    borderColor: Colors.info,
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    marginBottom: 10,
  },
  buttonSocialMediaIcon: {
    marginHorizontal: 10,
  },
  buttonSocialMediaText: {
    fontFamily: 'Roboto_400Regular',
    fontSize: 14,
    color: Colors.info,
  },
  buttonForgotPassword: {
    paddingVertical: 10,
    alignItems: 'center',
  },
  buttonForgotPasswordText: {
    fontFamily: 'Roboto_700Bold',
    fontSize: 14,
    color: Colors.info,
  },
  buttonLink: {
    paddingVertical: 10,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  buttonLinkText: {
    fontFamily: 'Roboto_400Regular',
    fontSize: 14,
    color: Colors.grey,
  },
  buttonLinkTextBold: {
    fontFamily: 'Roboto_700Bold',
    fontSize: 14,
    color: Colors.info,
    marginLeft: 5,
  },
})

export default Home