Android build and signing in React Native - Mini App: Build & Ship

Build: Build and Sign Android App

This screen guides you through building and signing a React Native Android app for release.

Target UI

---------------------------------
| Build and Sign Android App     |
|-------------------------------|
| [Generate Keystore]            |
| Keystore Path: _____________  |
| Alias: _____________          |
| Password: _____________       |
| [Build Release APK]            |
| Status: Waiting for action... |
---------------------------------

Button to generate a new keystore file

Input fields for keystore path, alias, and password

Button to build the release APK using the keystore info

Status text area to show build progress and success/failure messages

Starter Code

React Native

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

export default function BuildSignScreen() {
  const [keystorePath, setKeystorePath] = useState('');
  const [alias, setAlias] = useState('');
  const [password, setPassword] = useState('');
  const [status, setStatus] = useState('Waiting for action...');

  // TODO: Implement generateKeystore function
  const generateKeystore = () => {
    // Placeholder
  };

  // TODO: Implement buildReleaseAPK function
  const buildReleaseAPK = () => {
    // Placeholder
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Build and Sign Android App</Text>
      <Button title="Generate Keystore" onPress={generateKeystore} />
      <TextInput
        style={styles.input}
        placeholder="Keystore Path"
        value={keystorePath}
        onChangeText={setKeystorePath}
      />
      <TextInput
        style={styles.input}
        placeholder="Alias"
        value={alias}
        onChangeText={setAlias}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Build Release APK" onPress={buildReleaseAPK} />
      <Text style={styles.status}>{status}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginVertical: 10, borderRadius: 5 },
  status: { marginTop: 20, fontSize: 16 }
});

Task 1

Task 2

Solution

React Native

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

export default function BuildSignScreen() {
  const [keystorePath, setKeystorePath] = useState('');
  const [alias, setAlias] = useState('');
  const [password, setPassword] = useState('');
  const [status, setStatus] = useState('Waiting for action...');

  const generateKeystore = () => {
    setStatus('Generating keystore...');
    setTimeout(() => {
      const path = '/user/app/keystore.jks';
      setKeystorePath(path);
      setAlias('mykeyalias');
      setPassword('password123');
      setStatus('Keystore generated at ' + path);
    }, 1500);
  };

  const buildReleaseAPK = () => {
    if (!keystorePath || !alias || !password) {
      Alert.alert('Error', 'Please fill all keystore details before building.');
      return;
    }
    setStatus('Building release APK...');
    setTimeout(() => {
      setStatus('Build successful! APK signed and ready.');
    }, 2000);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Build and Sign Android App</Text>
      <Button title="Generate Keystore" onPress={generateKeystore} accessibilityLabel="Generate a new keystore file" />
      <TextInput
        style={styles.input}
        placeholder="Keystore Path"
        value={keystorePath}
        onChangeText={setKeystorePath}
        accessibilityLabel="Keystore file path"
      />
      <TextInput
        style={styles.input}
        placeholder="Alias"
        value={alias}
        onChangeText={setAlias}
        accessibilityLabel="Keystore alias"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        accessibilityLabel="Keystore password"
      />
      <Button title="Build Release APK" onPress={buildReleaseAPK} accessibilityLabel="Build the release APK" />
      <Text style={styles.status} accessibilityLiveRegion="polite">{status}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginVertical: 10, borderRadius: 5 },
  status: { marginTop: 20, fontSize: 16 }
});

This React Native screen helps you simulate the Android build and signing process.

When you tap Generate Keystore, it pretends to create a keystore file by setting default values after a short delay. This updates the input fields and status message.

Before building, you must fill all keystore details. The Build Release APK button simulates building the signed APK and updates the status to show success.

Accessibility labels are added for screen readers, and the status text uses polite live region to announce updates.

Final Result

Completed Screen

---------------------------------
| Build and Sign Android App     |
|-------------------------------|
| [Generate Keystore]            |
| Keystore Path: /user/app/keystore.jks |
| Alias: mykeyalias              |
| Password: ***********          |
| [Build Release APK]            |
| Status: Build successful! APK signed and ready. |
---------------------------------

Tap 'Generate Keystore' to fill keystore info and update status

Edit keystore path, alias, or password if needed

Tap 'Build Release APK' to simulate building and see success message

If fields are empty, an alert asks to fill all details

Stretch Goal

Add a toggle switch to enable dark mode for the screen

💡 Hint

Use React state to track dark mode and change background and text colors accordingly