App Store submission in React Native - Mini App: Build & Ship

Build: App Store Submission Guide

This screen guides the user through the steps to prepare and submit a React Native app to the App Store.

Target UI

----------------------------------
|       App Store Submission      |
|--------------------------------|
| 1. Enter App Name               |
| [__________________________]   |
| 2. Enter Bundle Identifier      |
| [__________________________]   |
| 3. Select App Icon              |
| [Choose File]                  |
| 4. Enter Version Number         |
| [__________________________]   |
|                                |
| [Submit to App Store]          |
----------------------------------

TextInput for App Name with placeholder 'Enter app name'

TextInput for Bundle Identifier with placeholder 'com.example.app'

Button to select an app icon file (simulate with a button, no actual file picker needed)

TextInput for Version Number with placeholder '1.0.0'

Submit button that validates all fields are filled and shows an alert 'Submission Successful' or 'Please fill all fields'

Starter Code

React Native

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

export default function AppStoreSubmission() {
  // TODO: Add state variables for inputs

  // TODO: Add handler for submit button

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Store Submission</Text>
      {/* TODO: Add TextInput for App Name */}
      {/* TODO: Add TextInput for Bundle Identifier */}
      {/* TODO: Add Button to select App Icon */}
      {/* TODO: Add TextInput for Version Number */}
      {/* TODO: Add Submit Button */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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.

Final Result

Completed Screen

----------------------------------
|       App Store Submission      |
|--------------------------------|
| 1. Enter App Name               |
| [My Cool App           ]       |
| 2. Enter Bundle Identifier      |
| [com.example.mycoolapp ]       |
| 3. Select App Icon              |
| [File Selected]                |
| 4. Enter Version Number         |
| [1.0.0                 ]       |
|                                |
| [Submit to App Store]          |
----------------------------------

User types app name, bundle id, and version number in text fields.

User taps 'Choose File' button to simulate selecting an app icon; button label changes to 'File Selected'.

User taps 'Submit to App Store' button.

If any field is empty or icon not selected, an alert shows 'Please fill all fields and select an app icon.'

If all fields are filled and icon selected, an alert shows 'Submission Successful'.

Stretch Goal

Add a reset button that clears all inputs and resets the icon selection.

💡 Hint

Add a button labeled 'Reset' that sets all state variables to their initial empty or false values.