In React Native, displaying images is straightforward and can be achieved using the <Image> component provided by the React Native framework. Here's a brief overview of how to work with images in React Native:

Importing Images:
- Store your images in the project directory, typically in a folder named assets or images.
- Import the image into your component file using require() or import statement.

    // Using require()
    const myImage = require('./path/to/your/image.jpg');

    // Using import
    import myImage from './path/to/your/image.jpg';

Displaying Images:
- Use the <Image> component to display the imported image.
- Set the source prop of the <Image> component to the imported image.

    import React from 'react';
    import { Image } from 'react-native';

    const MyComponent = () => {
      return (
        <Image
          source={myImage}
          style={{ width: 200, height: 200 }} // Set width and height as needed
        />
      );
    };

    export default MyComponent;

Additional Props:
- You can apply additional styling using the style prop to customize the appearance of the image.
- Other props like resizeMode, onLoad, and onError can be used to handle image loading and error states.

    <Image
      source={myImage}
      style={{ width: 200, height: 200, borderRadius: 10 }}
      resizeMode="cover"
      onLoad={() => console.log('Image loaded successfully')}
      onError={() => console.log('Error loading image')}
    />

Remote Images:
- For displaying images from remote sources (e.g., URLs), simply provide the image URL as the source prop.

    <Image
      source={{ uri: 'https://example.com/path/to/your/image.jpg' }}
      style={{ width: 200, height: 200 }}
    />

Optimizing Images:
- To optimize performance, consider using the resizeMode prop to specify how the image should be resized (e.g., cover, contain, stretch).
- Use the resizeMode prop to specify how the image should be resized.

React Native's <Image> component provides a convenient way to work with images in your mobile applications, allowing you to display both local and remote images with ease.

Fancy Card.jsx

import {
  Image,
  StyleSheet,
  Text,
  View,
  Button,
  Linking,
  Alert,
} from 'react-native';
import React from 'react';

export default function FancyCard() {
  const handlePress = () => {
    Alert.alert('The Sun Temple in Konark');
  };
  const handlePress1 = () => {
    Alert.alert('Howrah Bridge in Kolkata');
  };
  return (
    <View>
      <Text style={styles.headingText}>FancyCard</Text>
      <Text style={styles.headingText1}>Trending Places</Text>
      <View style={[styles.card, styles.cardElevated]}>
        <Image
          style={styles.cardImage}
          src="https://img.freepik.com/free-photo/view-world-monument-celebrate-world-heritage-day_23-2151297211.jpg?t=st=1714630665~exp=1714634265~hmac=9b781bb09f40beab4cda1b3c9bac2a2a0d320ebcdf53c8aedda82d450c9bcc4f&w=996"
        />
        <View style={styles.cardBody}>
          <Text style={styles.cardTitle}>Konark Sun Temple</Text>
          <Text style={styles.cardLabel}>Soul Of India</Text>
          <Text style={styles.cardDescription}>
            Odisha is a culturally rich state in eastern India known for its
            ancient temples, vibrant festivals, and diverse tribal heritage.
          </Text>
          <Text style={styles.cardLocation}>Odisha</Text>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
            }}>
            <Button
              title="Read More"
              onPress={handlePress}
              color="blue" // Optional: customizes the color of the button
            />
          </View>
        </View>
      </View>
      <View style={[styles.card, styles.cardElevated]}>
        <Image
          style={styles.cardImage}
          src="https://images.unsplash.com/photo-1536421469767-80559bb6f5e1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        />
        <View style={styles.cardBody}>
          <Text style={styles.cardTitle}>Howrah Bridge</Text>
          <Text style={styles.cardLabel}>City Of Joy</Text>
          <Text style={styles.cardDescription}>
            Howrah Bridge, also known as Rabindra Setu, is a famous suspension
            bridge in Kolkata, India, connecting Howrah and Kolkata over the
            Hooghly River.
          </Text>
          <Text style={styles.cardLocation}>Kolkata</Text>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
            }}>
            <Button
              title="Read More"
              onPress={handlePress1}
              color="blue" // Optional: customizes the color of the button
            />
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  headingText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'black',
    textAlign: 'center',
    padding: 10,
    backgroundColor: 'white',
  },
  headingText1: {
    fontSize: 15,
    fontWeight: 'bold',
    color: 'black',

    padding: 10,
    backgroundColor: 'white',
  },
  card: {
    width: 350,
    height: 400,
    borderRadius: 7,
    marginVertical: 12,
    marginHorizontal: 17,
  },
  cardElevated: {
    backgroundColor: 'white',
    elevation: 3,
    shadowOffset: {
      width: 1,
      height: 1,
    },
  },
  cardImage: {
    height: 220,
    width: '100%',
    marginBottom: 7,
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
  },
  cardBody: {
    flex: 1,
    flexGrow: 1,
    paddingHorizontal: 12,
  },
  cardLabel: {
    color: 'black',
    fontSize: 15,
    fontWeight: 'bold',
    marginBottom: 3,
  },
  cardTitle: {
    color: 'black',
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 3,
  },
  cardDescription: {
    color: 'black',
    fontSize: 13,
    marginBottom: 6,
    marginTop: 6,
  },
  cardLocation: {
    color: 'black',
    fontWeight: '500',
    alignSelf: 'flex-end',
  },
});

The provided React Native code defines a component named FancyCard that displays information about two famous places in India: the Konark Sun Temple and Howrah Bridge. The component is structured to show each location as a card within the app's interface. Here’s a breakdown of what the code does:

Structure and Layout

Outer View Container: Serves as the main container for all elements.
Text Elements: Two headings (headingText and headingText1) are used to display the main title "FancyCard" and a subtitle "Trending Places".
Card Views: Two card views are defined, each representing one of the locations. Each card contains an image, title, label, description, and a location text.

Card Components

Each card is composed of:

Image: Displays a picture of the location.
Title and Label: Provides the name and a brief descriptor of the location.
Description: A short description providing more details about the location.
Location: The geographical location of the place.
Button: A button labeled "Read More", which triggers an alert with more information when pressed.

Style

Stylesheet: Styles are defined using StyleSheet.create to style text, cards, images, and other elements. Cards have a white background, rounded corners, shadow for a 3D effect, and are organized with internal padding and margin for layout.

Interactivity

Button Interaction: Each card has a button that triggers a different alert (handlePress for Konark Sun Temple and handlePress1 for Howrah Bridge) showing a simple message about the location when pressed.

Usage

This component can be used to display informative cards in an app that requires showcasing landmarks, tourist spots, or other places of interest, with a simple user interaction implemented through the alert pop-ups.

This setup ensures a visually appealing and interactive way to present information about notable places, using basic features of React Native like Views, Text, Image, Button, and styling with StyleSheet.

Images In react-native

Day-5