Untitled

import { View, Text, StyleSheet, FlatList, ScrollView } from 'react-native'
import React,{useState,useEffect} from 'react'
import CategoryComponent from '../category-component/CategoryComponent'
import InterestsCard from '../interest-card/InterestsCard'
import {
  addInterestsToStorage,
  getInterestsFromStorage,
} from '../../helpers/async_storage/AsyncStorage';
import locations from '../../assets/location-data/Locations';

const InterestsScreen = () => {
  const [cards, setCards] = useState([]);
  useEffect(() => {
    getInterestsFromStorage().then(reuslt => {
      if (reuslt) {
        setCards(reuslt);
      } else {
        addInterestsToStorage(locations);
        setCards(locations);
      }
    });
  }, []);
  return (
    <View style={styles.layout}>
      <CategoryComponent />
      <FlatList
        numColumns={2}
        data={cards}
        contentContainerStyle={{ alignItems: 'center', gap: 8, padding: 5 }}
        columnWrapperStyle={{ flexWrap: 'wrap', gap: 8, marginTop: 10 }}
        renderItem={({ item }) => <InterestsCard item={item} />}
        showsVerticalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    backgroundColor: 'white'
  }
})

export default InterestsScreen