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