`company.js:`
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, SafeAreaView, TouchableOpacity, Modal, TextInput, FlatList } from 'react-native';

class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      stocksToBuy: '',
      companies: []
    };
  }

  componentDidMount() {
    this.fetchCompanies();
  }

  fetchCompanies = async () => {
    try {
      const response = await fetch('http://192.168.1.36/reactnative/MYApp/server-php-api/company.php'); // Replace with your actual server address
      const data = await response.json();
      if (data.error) {
        console.error(data.error);
      } else {
        this.setState({ companies: data });
      }
    } catch (error) {
      console.error('Failed to fetch companies:', error);
    }
  };

  confirmPurchase = () => {
    // Logic for confirming purchase goes here
    this.setState({ modalVisible: false });
  };

  renderItem = ({ item }) => (
    <View style={styles.card}>
      <Image 
        source={{ uri: `http://192.168.1.36/reactnative/MYApp/server-php-api/${item.logo}` }}
        style={styles.image} 
      />
      <View style={styles.cardContent}>
        <Text style={styles.companyName}>{item.comp_name}</Text>
        <Text style={styles.detailText}>{item.volume} actions</Text>.
        <Text style={styles.detailText}>{item.symbole}</Text>.
        <Text style={styles.detailText}>{item.prix}</Text>.
        <Text style={styles.detailText}>{item.variation}</Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.acheterBtn} onPress={() => this.setState({ modalVisible: true })}>
          <Text style={styles.acheterText}>Acheter</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  render() {
    const { modalVisible, stocksToBuy, companies } = this.state;

    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Acheter</Text>
        </View>
        <FlatList
          data={companies}
          renderItem={this.renderItem}
          keyExtractor={(item) => item.symbole}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => this.setState({ modalVisible: false })}
        >
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <TextInput
                style={styles.input}
                onChangeText={text => this.setState({ stocksToBuy: text })}
                value={stocksToBuy}
                placeholder="Entrer le nombre d'actions"
                keyboardType="numeric"
              />
              <View style={styles.modalButtons}>
                <TouchableOpacity style={styles.confirmBtn} onPress={this.confirmPurchase}>
                  <Text style={styles.confirmText}>Confirmer</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.cancelBtn} onPress={() => this.setState({ modalVisible: false })}>
                  <Text style={styles.cancelText}>Annuler</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    paddingTop: 45,
    paddingBottom: 10,
    paddingLeft: 16,
    paddingRight: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: 'cadetblue',
  },
  headerText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#fff',
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 10,
    padding: 16,
    margin: 16,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  image: {
    width: 100,
    height: 100,
    marginBottom: 16,
  },
  cardContent: {
    alignItems: 'center',
    marginBottom: 16,
  },
  companyName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  detailText: {
    fontSize: 16,
    marginBottom: 4,
  },
  buttonContainer: {
    width: '100%',
    alignItems: 'center',
  },
  acheterBtn: {
    backgroundColor: '#008b8b',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  acheterText: {
    color: 'white',
    fontWeight: 'bold',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 10,
    alignItems: 'center',
    width: '80%',
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  confirmBtn: {
    backgroundColor: 'green',
    padding: 10,
    borderRadius: 5,
    marginRight: 10,
    flex: 1,
    alignItems: 'center',
  },
  confirmText: {
    color: 'white',
    fontWeight: 'bold',
  },
  cancelBtn: {
    backgroundColor: 'red',
    padding: 10,
    borderRadius: 5,
    flex: 1,
    alignItems: 'center',
  },
  cancelText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default Company;
 company.php:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

include 'config.php'; // Include the database connection file

try {
    // Fetch data from the company table
    $query = "SELECT logo, comp_name, volume, symbole, prix, variation FROM company";
    $result = $mysqli->query($query);

    $results = array();
    while ($row = $result->fetch_assoc()) {
        $results[] = $row;
    }

    echo json_encode($results);
} catch (Exception $e) {
    echo json_encode(array("error" => "Failed to fetch companies: " . $e->getMessage()));
    exit();
}

i cant display the image in my react native mobile app please gelp me ,how i can display an Image from sql database(xampp) using React Native Expo App and php ?
i cant display the image in my react native mobile app please gelp me ,how i can display an Image from sql database(xampp) using React Native Expo App and php ?