import React from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';
export default function FabricOverview() {
const showAlert = () => {
Alert.alert('Fabric Renderer', 'Fabric is the new React Native UI rendering system that improves performance and enables concurrent UI updates.');
};
return (
<View style={styles.container}>
<Text style={styles.title}>Fabric Renderer Overview</Text>
<View>
<Text style={styles.bulletPoint}>• New React Native UI rendering system</Text>
<Text style={styles.bulletPoint}>• Improves performance</Text>
<Text style={styles.bulletPoint}>• Enables concurrent UI updates</Text>
</View>
<Button title="Learn More" onPress={showAlert} accessibilityLabel="Learn more about Fabric renderer" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'space-between',
backgroundColor: '#fff'
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20
},
bulletPoint: {
fontSize: 16,
marginBottom: 10
}
});This screen uses a simple vertical layout with space between the title, bullet points, and button.
The title uses a larger bold font for clarity.
The bullet points are simple Text components with a bullet character and spacing.
The button triggers an alert to show more information about Fabric renderer, making the UI interactive.
Accessibility label on the button helps screen readers describe its purpose.
