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
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: