Working with Core Components

1. Using View Component

The View component is the most fundamental container in React Native, serving as a wrapper for other components and providing layout and styling capabilities.

Property	Description	Values
style	Applies styles to the View component	`object \| array`
children	Content to be rendered inside the View	`React.Node`
onLayout	Callback when the component is laid out	`function`
pointerEvents	Controls how the View responds to pointer events	`'auto' \| 'none' \| 'box-none' \| 'box-only'`
accessibilityRole	Defines the role for accessibility purposes	`'button' \| 'image' \| 'text' \| ...`

Example: Basic View Usage

<View style={{
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#f0f0f0'
}}>
  <Text>Hello World</Text>
</View>

Example: Nested Views with Styles

<View style={{
  padding: 20,
  backgroundColor: '#e0e0e0'
}}>
  <View style={{
    backgroundColor: '#ffffff',
    padding: 10,
    borderRadius: 5
  }}>
    <Text>Nested View</Text>
  </View>
</View>

2. Using Text Component

The Text component in React Native is used to display text content. It supports various styling options and can be nested within other components.

Property	Description	Values
allowFontScaling	Controls whether font scaling is enabled based on the user's accessibility settings.	`true` or `false`
ellipsizeMode	Defines how to handle text that overflows the component's bounds.	`head`, `middle`, `tail`, `clip`
numberOfLines	Limits the number of lines displayed in the text component.	Number
style	Applies styling to the text component.	Style object or array of styles
textBreakStrategy	Defines how to break lines in the text component.	`simple`, `highQuality`, `balanced`
onPress	Callback function when the text component is pressed.	Function

Example: Basic Text Component Usage

<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
  Hello, React Native!
</Text>

Example: Text with Ellipsis

<Text numberOfLines={1} ellipsizeMode="tail">
  This is a very long text that will be truncated with an ellipsis at the end.
</Text>

3. Using Image Component

Property	Values	Description
source	`number \| {uri: string} \| Array`	Image source, can be local or remote URI
style	`object \| number`	Styling for the image component
resizeMode	`cover \| contain \| stretch \| repeat \| center`	How to resize the image within its bounds
defaultSource	`{uri: string}`	Fallback image when the main source fails to load

Example: Basic Image Usage

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  resizeMode="contain"
/>

Example: Local Image

import { Image } from 'react-native';

<Image
  source={require('./assets/image.png')}
  style={{ width: 100, height: 100 }}
/>

Note: For local images, use require() to resolve the path at build time.

Warning: Remote images must have a valid HTTPS URL and proper CORS headers to load correctly.

4. Using ScrollView Component

Example: Basic ScrollView Usage

<ScrollView style={{ flex: 1 }}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</ScrollView>

Property	Description	Default
horizontal	Set to true to scroll horizontally	false
showsHorizontalScrollIndicator	Controls horizontal scroll indicator visibility	true
showsVerticalScrollIndicator	Controls vertical scroll indicator visibility	true
scrollEventThrottle	Time interval in ms for scroll events (default 16)	16
onScroll	Callback when scroll occurs	null

Note: ScrollView is best used for small lists or when content size is unknown. For large lists, consider FlatList.

5. Using TextInput Component

Property	Values	Description
value	`string`	Current text value of the input
placeholder	`string`	Text to display when input is empty
onChangeText	`(text: string) => void`	Callback when text changes
multiline	`boolean`	Allow multiple lines (default: false)
secureTextEntry	`boolean`	Hide input text (e.g. for passwords)
editable	`boolean`	Allow editing (default: true)

Example: Basic TextInput

<TextInput
  placeholder="Enter your name"
  value={name}
  onChangeText={setName}
/>

Example: Password Input

<TextInput
  placeholder="Password"
  secureTextEntry={true}
  value={password}
  onChangeText={setPassword}
/>

Example: Multiline Text Input

<TextInput
  placeholder="Enter multi-line text"
  multiline={true}
  numberOfLines={4}
  value={text}
  onChangeText={setText}
/>

6. Using Button Component

Property	Values	Description
title	`string`	Text to display on the button
onPress	`function`	Function called when the button is pressed
disabled	`boolean`	Disables the button if true
color	`string`	Background color of the button (iOS only)
accessibilityLabel	`string`	Accessibility label for screen readers

Example: Basic Button Usage

<Button
  title="Press Me"
  onPress={() => console.log("Button pressed")}
  accessibilityLabel="Press me to log message"
/>

Example: Button with Disabled State

<Button
  title="Disabled Button"
  onPress={() => console.log("This won't work")}
  disabled={true}
/>

7. Using Pressable Component

The Pressable component in React Native is a versatile touchable component that provides fine-grained control over press states and interactions. It's the recommended way to handle touchable elements in modern React Native applications.

Property	Description	Values	Default
onPress	Callback when the press is released	Function	`null`
onLongPress	Callback when the press is held for a long time	Function	`null`
onPressIn	Callback when the press starts	Function	`null`
onPressOut	Callback when the press ends	Function	`null`
android_ripple	Android-specific ripple effect configuration	Object	`null`
style	Style object for the component	Style	`null`

Example: Basic Pressable Usage

<Pressable
  style={({ pressed }) => [
    styles.button,
    { backgroundColor: pressed ? '#0055aa' : '#0077cc' }
  ]}
  onPress={() => console.log('Button pressed!')}
>
  <Text style={styles.text}>Press Me</Text>
</Pressable>

Example: Pressable with Long Press

<Pressable
  style={({ pressed }) => [
    styles.button,
    { opacity: pressed ? 0.7 : 1 }
  ]}
  onPress={() => console.log('Short press')}
  onLongPress={() => console.log('Long press')}
>
  <Text style={styles.text}>Press and Hold</Text>
</Pressable>

Note: The Pressable component provides a more flexible and performant alternative to older touchable components like TouchableOpacity and TouchableHighlight.

Warning: Avoid nesting Pressable components inside each other as it can lead to unexpected behavior and accessibility issues.

8. Using SafeAreaView Component

Example: Basic SafeAreaView Usage

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Content inside SafeAreaView</Text>
    </SafeAreaView>
  );
};

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

export default App;

Property	Description	Default
forceInset	Controls how the view is inset from the safe areas. Accepts object with keys: top, bottom, left, right, horizontal, vertical.	undefined

Note: SafeAreaView automatically adjusts its padding based on device notches, status bars, and home indicators. It ensures content stays within the safe area of the screen.

import React, { useState } from 'react';
import { Modal, View, Text, TouchableOpacity } from 'react-native';

const BasicModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        onPress={() => setModalVisible(true)}
        style={{ padding: 10, backgroundColor: '#007AFF' }}
      >
        <Text style={{ color: 'white' }}>Open Modal</Text>
      </TouchableOpacity>

      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.5)'
        }}>
          <View style={{
            backgroundColor: 'white',
            padding: 20,
            borderRadius: 10
          }}>
            <Text>Hello from Modal!</Text>
            <TouchableOpacity
              onPress={() => setModalVisible(false)}
              style={{ marginTop: 10, padding: 10, backgroundColor: '#FF3B30' }}
            >
              <Text style={{ color: 'white' }}>Close</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

export default BasicModal;

Prop	Type	Description	Default
animationType	`"fade"` \| `"slide"` \| `"none"`	Animation style when showing/hiding modal	`"none"`
transparent	`boolean`	If true, modal background is transparent	`false`
visible	`boolean`	Controls visibility of the modal	`false`
onRequestClose	`function`	Called when user tries to close modal (e.g., back button)	`() => {}`
hardwareAccelerated	`boolean`	Enables hardware acceleration (iOS only)	`false`

Note: On Android, the onRequestClose prop is required for hardware back button handling.

import React, { useState } from 'react';
import { Modal, ScrollView, View, Text, TouchableOpacity } from 'react-native';

const ModalWithScrollView = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        onPress={() => setModalVisible(true)}
        style={{ padding: 10, backgroundColor: '#007AFF' }}
      >
        <Text style={{ color: 'white' }}>Open Scrollable Modal</Text>
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <ScrollView style={{ flex: 1 }}>
          <View style={{ padding: 20 }}>
            <Text>Long content inside modal...</Text>
            <Text style={{ marginTop: 10 }}>Lorem ipsum dolor sit amet...</Text>
            <Text style={{ marginTop: 10 }}>Consectetur adipiscing elit...</Text>
            <Text style={{ marginTop: 10 }}>Sed do eiusmod tempor incididunt...</Text>
            <TouchableOpacity
              onPress={() => setModalVisible(false)}
              style={{ marginTop: 20, padding: 10, backgroundColor: '#FF3B30' }}
            >
              <Text style={{ color: 'white' }}>Close</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </Modal>
    </View>
  );
};

export default ModalWithScrollView;

10. Using ActivityIndicator Component

Property	Values	Description
animating	`true` \| `false`	Controls whether the indicator is animating. Defaults to `true`.
color	`string`	The color of the indicator. Can be any valid color string (e.g., `'#0000ff'` or `'blue'`).
size	`'small'` \| `'large'` \| `number`	The size of the indicator. Defaults to `'small'`.

Example: Basic Usage

<ActivityIndicator size="large" color="#0000ff" />

Example: Conditional Rendering

const [loading, setLoading] = useState(true);

<View style={styles.container}>
  {loading ? (
    <ActivityIndicator size="large" color="#0000ff" animating={loading} />
  ) : (
    <Text>Content loaded!</Text>
  )}
</View>

11. Using Switch Component

Property	Values	Description
value	`boolean`	Current state of the switch (true or false)
onValueChange	`(value: boolean) => void`	Callback function when the switch value changes
disabled	`boolean`	If true, the switch is disabled and cannot be interacted with
trackColor	`{ false: string; true: string }`	Color of the track in both states
thumbColor	`string`	Color of the thumb (the moving part)

Example: Basic Switch Usage

import React, { useState } from 'react';
import { Switch, View } from 'react-native';

const SwitchExample = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <Switch
        value={isEnabled}
        onValueChange={setIsEnabled}
      />
    </View>
  );
};

export default SwitchExample;

Example: Custom Switch Colors

import React, { useState } from 'react';
import { Switch, View } from 'react-native';

const CustomSwitchExample = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <Switch
        value={isEnabled}
        onValueChange={setIsEnabled}
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
      />
    </View>
  );
};

export default CustomSwitchExample;

12. Using StatusBar Component

Example: Basic StatusBar Usage

<StatusBar
  barStyle="dark-content"
  backgroundColor="#ffffff"
/>

Property	Description	Values	Default
barStyle	Style of the status bar text	`"default"`, `"light-content"`, `"dark-content"`	`"default"`
backgroundColor	Background color of the status bar	Color value (e.g., `"#ffffff"`)	Transparent
hidden	Whether to hide the status bar	`true`, `false`	`false`
translucent	Whether the status bar is translucent	`true`, `false`	`false`

Note: On iOS, barStyle affects the color of the status bar text. On Android, it controls the contrast of the status bar.