The Future of Cross-Platform Mobile Development: React Native vs Flutter 2024

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

interface ProductCardProps {
  title: string;
  price: number;
  onPress: () => void;
}

const ProductCard: React.FC = ({ 
  title, 
  price, 
  onPress 
}) => {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    
      
        {title}
        R {price}
         setIsFavorite(!isFavorite)}
        >
          
            {isFavorite ? '❤️' : '🤍'}
          
        
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  card: {
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  price: {
    fontSize: 16,
    color: '#666',
    marginBottom: 12,
  },
  favoriteButton: {
    padding: 8,
    borderRadius: 20,
    backgroundColor: '#f5f5f5',
  },
  favoriteActive: {
    backgroundColor: '#ffe6e6',
  },
  favoriteText: {
    fontSize: 16,
  },
});

export default ProductCard;
                                

import 'package:flutter/material.dart';

class ProductCard extends StatefulWidget {
  final String title;
  final double price;
  final VoidCallback onPressed;

  const ProductCard({
    Key? key,
    required this.title,
    required this.price,
    required this.onPressed,
  }) : super(key: key);

  @override
  _ProductCardState createState() => _ProductCardState();
}

class _ProductCardState extends State {
  bool _isFavorite = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: InkWell(
        onTap: widget.onPressed,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Text(
                widget.title,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                'R ${widget.price.toStringAsFixed(2)}',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey[600],
                ),
              ),
              const SizedBox(height: 12),
              IconButton(
                icon: Icon(
                  _isFavorite ? Icons.favorite : Icons.favorite_border,
                  color: _isFavorite ? Colors.red : Colors.grey,
                ),
                onPressed: () {
                  setState(() {
                    _isFavorite = !_isFavorite;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}