React-Nav-Melon/screens/BookmarkPage.js

import { FlatList, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import NoBookmarkSection from '../components/organisms/Sections/NoBookmarkSection'
import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant';
import fonts from '../theme/fonts';
import SearchTextInput from '../components/molecules/SearchTextInput';

const BookmarkPage = ({navigation}) => {
  const data = ["1", "2", "3", "4", "5"];
  //const data = []

  const detailPageNavigation = () => {
    navigation.navigate("Landing",{'screen':'NewsDetailPage'})
  }

  return (
    <View>
      {data.length <= 0 ? <NoBookmarkSection /> :

        <View style={styles.container}>
          <View >
            <SearchTextInput/>
            <FlatList
            showsVerticalScrollIndicator={false}
              ItemSeparatorComponent={() => <View style={{height: fonts.getSize(8)}}></View>}
              // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
              ListHeaderComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
              data={data}
              renderItem={(item) => <HorizontalNewsCardVariant onPress={detailPageNavigation}/>}
              keyExtractor={item => data.indexOf(item)}

            />
          </View>

        </View>
      }

    </View>
  )
}

export default BookmarkPage

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: fonts.getSize(16),
    
  }
})