Core Components

View

The fundamental component for building UI, similar to div in web

Common Props:

styleonLayoutpointerEventstestID

Text

Component for displaying text with various styling options

Common Props:

stylenumberOfLinesonPressselectable

TextInput

Component for text input with various keyboard types and validation

Common Props:

valueonChangeTextplaceholderkeyboardTypesecureTextEntry

TouchableOpacity

Touchable component that reduces opacity when pressed

Common Props:

onPressdisabledactiveOpacitystyle

List Components

FlatList

Performant list component for large datasets

const data = [
  { id: '1', title: 'First Item' },
  { id: '2', title: 'Second Item' },
  { id: '3', title: 'Third Item' },
];

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Text style={styles.itemText}>{item.title}</Text>
  </View>
);

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsVerticalScrollIndicator={false}
  ItemSeparatorComponent={() => <View style={styles.separator} />}
/>

ScrollView

Scrollable container for content that exceeds screen size

<ScrollView 
  style={styles.scrollView}
  showsVerticalScrollIndicator={false}
  bounces={true}
>
  <View style={styles.content}>
    <Text style={styles.text}>Scrollable Content</Text>
    {/* More content here */}
  </View>
</ScrollView>

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
  },
  content: {
    padding: 20,
  },
});

Styling & Layout

Flexbox Layout

React Native uses Flexbox for layout, similar to CSS but with some differences

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 'row' | 'column' | 'row-reverse' | 'column-reverse'
    justifyContent: 'center', // 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
    alignItems: 'center', // 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
  },
  item: {
    flex: 1, // Takes available space
    margin: 10,
    padding: 20,
  },
});

Dimensions & Positioning

Handle different screen sizes and position elements

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  fullScreen: {
    width: width,
    height: height,
  },
  centered: {
    position: 'absolute',
    top: height / 2 - 50,
    left: width / 2 - 50,
    width: 100,
    height: 100,
  },
  responsive: {
    width: '80%', // Percentage-based width
    maxWidth: 400, // Maximum width constraint
  },
});

Platform-Specific Styles

Apply different styles for iOS and Android

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 50 : 25,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

Complete Example: User Profile Screen

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  StyleSheet,
  Alert,
  Platform,
} from 'react-native';

const UserProfileScreen = () => {
  const [name, setName] = useState('John Doe');
  const [email, setEmail] = useState('john@example.com');
  const [bio, setBio] = useState('Mobile developer passionate about React Native');

  const handleSave = () => {
    Alert.alert('Success', 'Profile updated successfully!');
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Image
          source={{ uri: 'https://via.placeholder.com/100' }}
          style={styles.avatar}
        />
        <TouchableOpacity style={styles.changePhotoButton}>
          <Text style={styles.changePhotoText}>Change Photo</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.form}>
        <View style={styles.inputGroup}>
          <Text style={styles.label}>Name</Text>
          <TextInput
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder="Enter your name"
          />
        </View>

        <View style={styles.inputGroup}>
          <Text style={styles.label}>Email</Text>
          <TextInput
            style={styles.input}
            value={email}
            onChangeText={setEmail}
            placeholder="Enter your email"
            keyboardType="email-address"
            autoCapitalize="none"
          />
        </View>

        <View style={styles.inputGroup}>
          <Text style={styles.label}>Bio</Text>
          <TextInput
            style={[styles.input, styles.textArea]}
            value={bio}
            onChangeText={setBio}
            placeholder="Tell us about yourself"
            multiline
            numberOfLines={4}
          />
        </View>

        <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
          <Text style={styles.saveButtonText}>Save Changes</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    alignItems: 'center',
    paddingVertical: 30,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 15,
  },
  changePhotoButton: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#007AFF',
  },
  changePhotoText: {
    color: '#007AFF',
    fontSize: 14,
    fontWeight: '500',
  },
  form: {
    padding: 20,
  },
  inputGroup: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 8,
  },
  input: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
    backgroundColor: 'white',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  textArea: {
    height: 100,
    paddingTop: 15,
    textAlignVertical: 'top',
  },
  saveButton: {
    backgroundColor: '#007AFF',
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  saveButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default UserProfileScreen;

Best Practices

✅ Do's

  • Use StyleSheet.create() for better performance
  • Implement proper key props for list items
  • Use Flexbox for responsive layouts
  • Test on both iOS and Android devices
  • Use platform-specific styles when needed
  • Optimize images and use appropriate formats

❌ Don'ts

  • Don't use inline styles for complex styling
  • Avoid deep nesting of components
  • Don't ignore accessibility props
  • Avoid using ScrollView for large lists
  • Don't hardcode dimensions for different screens
  • Avoid blocking the main thread with heavy operations
Previous: Setup & EnvironmentNext: Navigation