import React from 'react';
import { View, Text, Button, Alert, StyleSheet, ScrollView } from 'react-native';
export default function ArchitectureOverview() {
const showAlert = () => {
Alert.alert('React Native New Architecture', 'The new architecture improves performance by using TurboModules and Fabric for direct communication between JS and native code.');
};
return (
<View style={styles.container}>
<ScrollView>
<Text style={styles.heading}>Old Bridge:</Text>
<Text style={styles.bullet}>• JS thread</Text>
<Text style={styles.bullet}>• Native thread</Text>
<Text style={styles.bullet}>• Bridge for communication</Text>
<Text style={styles.heading}>New Architecture:</Text>
<Text style={styles.bullet}>• TurboModules</Text>
<Text style={styles.bullet}>• Fabric Renderer</Text>
<Text style={styles.bullet}>• Direct communication</Text>
</ScrollView>
<Button title="Learn More" onPress={showAlert} accessibilityLabel="Learn more about React Native architecture" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'space-between',
},
heading: {
fontSize: 20,
fontWeight: 'bold',
marginTop: 10,
marginBottom: 5,
},
bullet: {
fontSize: 16,
marginLeft: 10,
marginBottom: 3,
},
});This screen uses simple Text components to show two sections describing the old and new React Native architectures. The old bridge architecture uses a bridge to communicate between the JavaScript thread and native thread. The new architecture improves performance by using TurboModules and Fabric for direct communication.
A Button labeled "Learn More" is placed at the bottom. When pressed, it shows an alert with a short explanation about the new architecture. The layout uses flex and padding for spacing, and a ScrollView to allow scrolling if the content is too tall on small screens.
Accessibility is considered by adding an accessibilityLabel to the button for screen readers.
