import { FC } from 'react'; import { ImageBackground, View, Text, Image, ScrollView } from 'react-native'; import type { NavigationProp } from '@react-navigation/native'; import { Header, PageWrapper } from '../../../components'; import { styles } from './styles'; import { Colors } from 'src/theme'; import TravellersIcon from 'assets/icons/bottom-navigation/travellers.svg'; type Props = { navigation: NavigationProp<any>; }; export const DiscoverInfoScreen: FC<Props> = ({ navigation }) => { return ( <PageWrapper> <Header label={'Discover the World'} /> <ImageBackground style={styles.background} source={require('../../../../assets/images/nm-background.png')} > <ScrollView style={styles.wrapper} showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle} > <View style={{ gap: 10 }}> <Text style={styles.title}>Use the map to explore</Text> <View style={styles.infoBlock}> <View style={styles.imgContainer}> <Image source={require('../../../../assets/images/map.jpeg')} style={styles.image} /> </View> <Text style={styles.text}> Tap a region to see more details. Zoom the map to reveal our series. </Text> </View> </View> <View style={{ gap: 10 }}> <Text style={styles.title}>User Travels section</Text> <View style={styles.infoBlock}> <View style={[styles.imgContainer, { width: 80, height: 80 }]}> <TravellersIcon fill={Colors.DARK_BLUE} /> <Text style={styles.imgText}>Travellers</Text> </View> <Text style={styles.text}> Use our Travels section to explore information in a structured layout. </Text> </View> </View> </ScrollView> </ImageBackground> </PageWrapper> ); };