Transpose Square Matrix Calculator by using React-native

In this article we are going to learn about Transpose square matrix calculator. Transpose Square Matrix Calculator is a tool that generates and manipulates square matrices, allowing users to transpose them—switching rows with columns—showing results within a React Native application for numerical computations or educational purposes.

Prerequisite

• React Native
• React Hooks
• React Native Components
• JavaScript Fundamentals

Approach

• State Management: Utilize useState to manage matrix size, data, and transposed matrix, updating state on matrix generation and transposition.
• Matrix Generation: Create a matrix array based on the input size, filling it with zeroes initially.
• Rendering Matrix UI: Use ScrollView and nested Views to display matrix cells as TextInput elements for user input.
• Matrix Transposition: Implement matrix transposition logic by mapping rows and columns, updating state with the transposed matrix on button press.

Steps to install & configure React Native:

Step 1: Create a react native application by using this command:

npx create-expo-app image-carousal

Step 2: After creating your project folder, i.e. image-carousal, use the following command to navigate to it:

cd  image-carousal

The updated dependencies in package.json file will look like:

"dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },

Project Structure:

Example: This example implements the above-mentioned approach.

Javascript

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

const TransposeMatrixCalculator = () => {
    const [matrixSize, setMatrixSize] = useState('');
    const [matrixData, setMatrixData] = useState([]);
    const [transposedMatrix, setTransposedMatrix] = useState([]);

    const generateMatrix = () => {
        const size = parseInt(matrixSize);
        const newMatrix =
            Array.from({ length: size },
                () => Array(size).fill(0));
        setMatrixData(newMatrix);
        setTransposedMatrix([]);
    };

    const transposeMatrix = () => {
        const transposed = matrixData[0].map((_, index) =>
            matrixData.map(row => row[index]));
        setTransposedMatrix(transposed);
    };

    const renderMatrix = (data) => {
        return (
            <ScrollView horizontal>
                <View style={styles.matrix}>
                    {data.map((row, rowIndex) => (
                        <View key={rowIndex} style={styles.row}>
                            {row.map((cell, cellIndex) => (
                                <TextInput key={cellIndex}
                                           style={styles.input}
                                           keyboardType="numeric"
                                           onChangeText={(text) =>
                                              updateMatrixCell(rowIndex, cellIndex, text)}
                                           value={cell.toString()}/>
                            ))}
                        </View>
                    ))}
                </View>
            </ScrollView>
        );
    };

    const updateMatrixCell = (row, col, value) => {
        const updatedMatrix = matrixData.map((rowData, i) =>
            i === row ? rowData.map((cell, j) =>
                (j === col ? parseInt(value) || 0 : cell)) : rowData
        );
        setMatrixData(updatedMatrix);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>
                Transpose Square Matrix Calculator
            </Text>

            <View style={styles.inputContainer}>
                <Text>Matrix Size:</Text>
                <TextInput style={styles.inputField}
                           keyboardType="numeric"
                           value={matrixSize}
                           onChangeText={(text) => setMatrixSize(text)}/>
            </View>

            <TouchableOpacity style={styles.button} onPress={generateMatrix}>
                <Text>Generate Matrix</Text>
            </TouchableOpacity>

            <View style={styles.matrixContainer}>
                {matrixData.length > 0 && renderMatrix(matrixData)}
            </View>

            <TouchableOpacity style={styles.button} onPress={transposeMatrix}>
                <Text>Transpose Matrix</Text>
            </TouchableOpacity>

            <View style={styles.matrixContainer}>
                {transposedMatrix.length > 0 && renderMatrix(transposedMatrix)}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    heading: {
        fontSize: 24,
        marginBottom: 20,
    },
    inputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    inputField: {
        borderWidth: 1,
        borderColor: 'black',
        padding: 8,
        width: 50,
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#4caf50',
        padding: 10,
        marginVertical: 10,
    },
    matrixContainer: {
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
    },
    row: {
        flexDirection: 'row',
    },
    input: {
        borderWidth: 1,
        borderColor: 'black',
        padding: 8,
        width: 50,
    },
});

export default TransposeMatrixCalculator;

Output: