Untitled

import React, { Children } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import { useColors } from '../../../hooks/useColors';
import { FlatList } from 'react-native-gesture-handler';
import images from '../../../themes/assets/images';
import Traffic from './Traffic';
import { Image } from 'react-native'
import colors from '../../rb-constants/colors';
import Device from './Device';
const { width, height } = Dimensions.get('screen');
const isTallScreen = height > 800;
const isSmallScreen = height < 600;
console.log(width, height);
const data = [
  {
    title: 'TRAFFIC', 
    img: images.ga,
    children: <Traffic />

  },
  {
    title: 'DEVICE',
    img: images.ga,
    children: <Device />
  },
  {
    title: 'DEMOGRAPHICS',
    img: images.ga,
    children: <Traffic />
  },
  {
    title: 'USER LOCATION',
    img: images.ga,
    children: <Traffic />
  },
];
const Item = ({ title, images, children }) => {
  return (
    <View style={{ height: height / 1.24, backgroundColor: colors.White }}>
      <View style={styles.box} backgroundColor={colors.Orange}>
        <View style={styles.image}>
          <Image source={images} />
        </View>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </View>
      <View style={styles.item}>
        {children}
      </View>
    </View>
  );
}

function FeedComponents() {
  const renderItem = ({ item }) => (
    <Item title={item.title} images={item.img}>
      {item.children}
    </Item>
  );
  const { colors } = useColors();
  return (
    <>
      <View style={styles.container}>
        <FlatList
          viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
          horizontal={false}
          pagingEnabled={true}
          showsVerticalScrollIndicator={false}
          decelerationRate={0}
          snapToAlignment={'start'}
          snapToInterval={height / 1.24}
          data={data}
          style={styles.fullScreen}
          renderItem={renderItem}
          keyExtractor={(item, index) => (index.toString())}
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  fullScreen: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
  },
  container: {
    height: '100%',
    flex: 1,

  },
  item: {
    paddingBottom: 0,
    marginHorizontal: 16,
    borderRadius: 8,
    height: height / 1.5,
  },
  box: {
    backgroundColor: colors.Orange,
    width: '100%',
    height: 70,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,

  },
  imageContainer: {
    marginRight: 10,
  },
  image: {
    width: 40,
    height: 40,
    resizeMode: 'cover',
    zIndex: 9999,
    justifyContent: 'center',
    alignItems: 'center',
    left: 20, position: 'absolute'
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    fontSize: 33,
    color: colors.White,
  }
});

export default FeedComponents;