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

Build: Play Store Submission Guide

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

Target UI

-----------------------------------
| Play Store Submission Guide      |
|---------------------------------|
| 1. Prepare app release build     |
| 2. Generate signed APK/AAB       |
| 3. Create Play Console account   |
| 4. Upload APK/AAB                |
| 5. Fill app details & content    |
| 6. Submit for review             |
|                                 |
| [Start Submission]              |
-----------------------------------

Display a numbered list of submission steps

Include a button labeled 'Start Submission'

When button is pressed, show an alert with a summary message

Use React Native components and styles for a clean layout

Ensure accessibility with proper labels

Starter Code

React Native

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

export default function PlayStoreSubmission() {
  return (
    <View style={styles.container}>
      {/* TODO: Add numbered steps list here */}
      {/* TODO: Add Start Submission button here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function PlayStoreSubmission() {
  const steps = [
    'Prepare app release build',
    'Generate signed APK/AAB',
    'Create Play Console account',
    'Upload APK/AAB',
    'Fill app details & content',
    'Submit for review'
  ];

  const handleStart = () => {
    Alert.alert('Submission Started', 'Follow the steps to submit your app to the Play Store.');
  };

  return (
    <View style={styles.container} accessible={true} accessibilityLabel="Play Store Submission Guide">
      <Text style={styles.title} accessibilityRole="header">Play Store Submission Guide</Text>
      <ScrollView style={styles.stepsContainer}>
        {steps.map((step, index) => (
          <Text key={index} style={styles.step} accessibilityLabel={`Step ${index + 1}: ${step}`}>{index + 1}. {step}</Text>
        ))}
      </ScrollView>
      <View style={styles.buttonContainer}>
        <Button title="Start Submission" onPress={handleStart} accessibilityLabel="Start the Play Store submission process" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 15
  },
  stepsContainer: {
    flex: 1,
    marginBottom: 20
  },
  step: {
    fontSize: 18,
    marginVertical: 6
  },
  buttonContainer: {
    marginBottom: 10
  }
});

This React Native component shows a list of steps to submit an app to the Play Store. We use a ScrollView to allow scrolling if the list is long. Each step is displayed with a number and descriptive text. The button labeled "Start Submission" triggers an alert to confirm the start of the process. Accessibility labels and roles are added for screen readers. The styles keep the layout clean and readable.

Final Result

Completed Screen

-----------------------------------
| Play Store Submission Guide      |
|---------------------------------|
| 1. Prepare app release build     |
| 2. Generate signed APK/AAB       |
| 3. Create Play Console account   |
| 4. Upload APK/AAB                |
| 5. Fill app details & content    |
| 6. Submit for review             |
|                                 |
| [Start Submission]              |
-----------------------------------

User can scroll the list if needed

User taps 'Start Submission' button

An alert pops up with message: 'Follow the steps to submit your app to the Play Store.'

Stretch Goal

Add a dark mode toggle to switch the screen colors between light and dark themes.

💡 Hint

Use React useState to track theme mode and conditionally apply styles for background and text colors.