// Import necessary React and React Native components
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
// Functional component CounterApp
const CounterApp = () => {
// State to manage the counter value
const [counter, setCounter] = useState(0);
// Function to increment the counter
const incrementCounter = () => {
setCounter(counter + 1);
};
// Function to decrement the counter
const decrementCounter = () => {
setCounter(counter - 1);
};
return (
<View style={styles.container}>
{/* Display the counter value */}
<Text style={styles.counterText}>{counter}</Text>
{/* Buttons to increment and decrement the counter */}
<TouchableOpacity style={styles.button} onPress={incrementCounter}>
<Text style={styles.buttonText}>Increment</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={decrementCounter}>
<Text style={styles.buttonText}>Decrement</Text>
</TouchableOpacity>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
counterText: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
button: {
backgroundColor: 'blue',
padding: 10,
margin: 5,
borderRadius: 5,
},
buttonText: {
color: 'white',
fontSize: 16,
},
});
// Export the CounterApp component
export default CounterApp;
rather than php.