import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ComparisonScreen() {
return (
<View style={styles.container}>
<Text style={styles.header}>Expo vs Bare React Native</Text>
<View style={styles.table}>
<View style={[styles.row, styles.headerRow]}>
<Text style={[styles.cell, styles.featureCell]}>Feature</Text>
<Text style={styles.cell}>Expo</Text>
<Text style={styles.cell}>Bare</Text>
</View>
{features.map(({feature, expo, bare}) => (
<View key={feature} style={styles.row}>
<Text style={[styles.cell, styles.featureCell]}>{feature}</Text>
<Text style={styles.cell}>{expo ? '✔' : '✘'}</Text>
<Text style={styles.cell}>{bare ? '✔' : '✘'}</Text>
</View>
))}
</View>
</View>
);
}
const features = [
{ feature: 'Easy Setup', expo: true, bare: false },
{ feature: 'Native Modules', expo: false, bare: true },
{ feature: 'Over-the-Air Updates', expo: true, bare: false },
{ feature: 'Custom Native Code', expo: false, bare: true },
{ feature: 'Development Speed', expo: true, bare: false }
];
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: '#fff'
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
textAlign: 'center'
},
table: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4
},
row: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#ccc',
paddingVertical: 8,
paddingHorizontal: 4,
alignItems: 'center'
},
headerRow: {
backgroundColor: '#f0f0f0'
},
cell: {
flex: 1,
textAlign: 'center',
fontSize: 16
},
featureCell: {
flex: 2,
textAlign: 'left',
paddingLeft: 8
}
});This screen uses a simple React Native functional component to show a comparison table.
We use a features array to store the feature names and whether Expo or bare React Native supports them.
The table is built with View components arranged in rows and columns using flexDirection: 'row'. Text components show the feature names and check marks or crosses.
Styling adds borders and spacing to make the table easy to read. The header is bold and centered.
This approach helps beginners see the differences clearly in a simple UI.
