import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert, StyleSheet } from 'react-native';
export default function AppStoreSubmission() {
const [appName, setAppName] = useState('');
const [bundleId, setBundleId] = useState('');
const [version, setVersion] = useState('');
const [iconSelected, setIconSelected] = useState(false);
const handleSubmit = () => {
if (appName && bundleId && version && iconSelected) {
Alert.alert('Submission Successful', 'Your app has been submitted to the App Store.');
} else {
Alert.alert('Error', 'Please fill all fields and select an app icon.');
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>App Store Submission</Text>
<Text>1. Enter App Name</Text>
<TextInput
style={styles.input}
placeholder="Enter app name"
value={appName}
onChangeText={setAppName}
accessibilityLabel="App Name Input"
/>
<Text>2. Enter Bundle Identifier</Text>
<TextInput
style={styles.input}
placeholder="com.example.app"
value={bundleId}
onChangeText={setBundleId}
accessibilityLabel="Bundle Identifier Input"
/>
<Text>3. Select App Icon</Text>
<Button
title={iconSelected ? 'File Selected' : 'Choose File'}
onPress={() => setIconSelected(true)}
accessibilityLabel="Select App Icon Button"
/>
<Text style={{ marginTop: 20 }}>4. Enter Version Number</Text>
<TextInput
style={styles.input}
placeholder="1.0.0"
value={version}
onChangeText={setVersion}
accessibilityLabel="Version Number Input"
/>
<View style={{ marginTop: 30 }}>
<Button
title="Submit to App Store"
onPress={handleSubmit}
accessibilityLabel="Submit Button"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff'
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20
},
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
padding: 10,
marginTop: 5,
marginBottom: 15
}
});This React Native screen uses useState to keep track of the user's input for app name, bundle identifier, version number, and whether an app icon has been selected.
Each input field is a TextInput with a placeholder to guide the user. The 'Choose File' button simulates selecting an app icon by toggling a boolean state.
The submit button checks if all fields are filled and the icon is selected. If yes, it shows a success alert; otherwise, it asks the user to complete all fields.
Accessibility labels are added for screen readers. The UI uses simple styling for clarity and spacing.
