drops.tsx

import { TRANSFER_SPLASH_HEADER } from 'assets/images/constants';
import { NtwrkLogoFilled } from 'assets/svgs/NtwrkLogo';
import Button, { ButtonStyle } from 'components/Button';
import Image from 'components/Image';
import Text, { TextType } from 'components/Text';
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function Tile(): JSX.Element {
  return (
    <View style={{ marginTop: 32 }}>
      <View style={{ width: '100%', aspectRatio: 1 }}>
        <Image source={TRANSFER_SPLASH_HEADER} />
      </View>
      <Text styleType={TextType.BODY_1} style={{ marginTop: 8 }}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida
        sollicitudin dolor quis viverra. Donec consectetur vel risus vitae
        convallis. Maecenas finibus ultrices lectus nec mattis. Nunc lorem arcu,
        iaculis ut massa nec, rutrum commodo tortor. Vestibulum ante ipsum
        primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec
        et porttitor ex. Morbi pellentesque pretium interdum. Sed hendrerit quam
        felis, in pulvinar elit vestibulum vitae. Class aptent taciti sociosqu
        ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut
        purus lectus. Quisque ex dolor, sagittis ac elit quis, tincidunt euismod
        magna. Suspendisse eget tortor rutrum, ullamcorper felis vitae,
        tristique mauris. Duis vehicula non quam sed accumsan.
      </Text>

      <Button
        styleType={ButtonStyle.PRIMARY}
        onPress={() => {}}
        title="Call to action"
        accessibilityLabel="Call to action button"
        style={{ marginTop: 8 }}
      />
    </View>
  );
}

export default function TestScreen(): JSX.Element {
  const { top } = useSafeAreaInsets();

  return (
    <View>
      <View
        style={[
          styles.header,
          { paddingTop: top || 8, paddingHorizontal: 16, paddingBottom: 8 },
        ]}
      >
        <View style={{ width: 30 }}>
          <NtwrkLogoFilled color="white" />
        </View>
        <Text styleType={TextType.HEADER_2} style={{ color: 'white' }}>
          Drops
        </Text>
        <View style={{ width: 30 }} />
      </View>
      <ScrollView style={{ paddingHorizontal: 16 }}>
        <Tile />
        <Tile />
        <Tile />
        <Tile />
        <Tile />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'black',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});