CodingHelp LogoCodingHelp Wiki
Previous: Setup & EnvironmentNext: Navigation
🧩

React Native Components & UI

Master the building blocks of React Native apps

React Native provides a rich set of components for building mobile user interfaces. Learn about core components, styling with Flexbox, and creating responsive layouts that work across different screen sizes and platforms.

Core Components

View

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

Common Props:

styleonLayoutpointerEventstestID

Example:

<View style={styles.container}>
  <Text>Hello World!</Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
});

Text

Component for displaying text with various styling options

Common Props:

stylenumberOfLinesonPressselectable

Example:

<Text style={styles.title}>
  Welcome to React Native
</Text>
<Text style={styles.subtitle} numberOfLines={2}>
  This is a longer text that will be truncated after 2 lines
</Text>

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 10,
  },
});

TextInput

Component for text input with various keyboard types and validation

Common Props:

valueonChangeTextplaceholderkeyboardTypesecureTextEntry

Example:

const [text, setText] = useState('');
const [email, setEmail] = useState('');

<TextInput
  style={styles.input}
  value={text}
  onChangeText={setText}
  placeholder="Enter your name"
  autoCapitalize="words"
/>
<TextInput
  style={styles.input}
  value={email}
  onChangeText={setEmail}
  placeholder="Enter your email"
  keyboardType="email-address"
  autoCapitalize="none"
/>

const styles = StyleSheet.create({
  input: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
    backgroundColor: 'white',
  },
});

TouchableOpacity

Touchable component that reduces opacity when pressed

Common Props:

onPressdisabledactiveOpacitystyle

Example:

<TouchableOpacity 
  style={styles.button} 
  onPress={() => Alert.alert('Button Pressed!')}
  activeOpacity={0.7}
>
  <Text style={styles.buttonText}>Press Me</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

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