Codecademy Logo

React Native Fundamentals

Related learning

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      11 hours

The <TextInput> component captures user input in React Native applications. Key features include customizable keyboard types, input validation, and text formatting options. Control the component using the value prop for the displayed text and onChangeText callback to handle state updates.

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


const TextInputComponent = () => {
  const [text, setText] = useState('');


  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
      />
    </View>
  );
};

React Native Components

In React Native, components render to platform-specific native UI elements. This approach follows the “learn once, write anywhere” philosophy, offering developers the ability to share business logic code across platforms while maintaining a native look and feel.

JSI in React Native

The JavaScript Interface (JSI) in React Native allows direct communication between the JavaScript thread and native components. This enhances performance by enabling synchronous operations, reducing overhead in data transfer.

The <View> Component

In React Native, the <View> component is fundamental for building the UI layout. It acts as a container for other components, enabling a structured and flexible design framework. Use it to create various layouts and container hierarchies.

import { View } from 'react-native';


const App = () => {
  return (
    <View>
      {/* Child components go here */}
    </View>
  )
}

Text in React Native

In React Native, use <Text> components to display text. Unlike typical HTML, text can’t be placed directly inside other components like <View>. The <Text> component acts as a wrapper, ensuring text is displayed as expected.

import { Text, View } from 'react-native';


const App = () => {
  return (
    <View>
      <Text>Welcome to React Native with TypeScript!</Text>
    </View>
  );
}

Rendering Images in React Native

The <Image> component in React Native is used for displaying images, allowing you to source images locally or over the network. 

import { Image, View } from 'react-native';


export default function ImageExample() {
  return (
    <View>
      {/* Local image */}
      <Image
        source={require('./assets/logo.png')}
      />


      {/* Network image */}
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
      />
    </View>
  );
}

The <ScrollView> Component

The <ScrollView> component in React Native can be used to manage scrollable content. It facilitates both vertical and horizontal scrolling, perfect for content larger than the screen. 

import { ScrollView, Text, View } from 'react-native';


export default function ScrollViewExample() {
  return (
    <ScrollView>
      <View style={{ height: 900 }}>
        <Text>Item 1</Text>
      </View>
      <View style={{ height: 900 }}>
        <Text>Item 2</Text>
      </View>
    </ScrollView>
  );
}

The <Button> Component

The <Button> component in React Native provides a versatile button that aligns with default styles across iOS and Android platforms. It features a simple API that makes it easy to handle user interactions.

import { Button, Alert } from 'react-native';


const ButtonExample = () => {
  return (
    <Button
      title="Press me"
      onPress={() => Alert.alert('Button pressed!')}
    />
  );
}

React in React Native

React Native inherits React’s core concepts like JSX, component composition, props, state, and hooks such as useState and useEffect. These familiar patterns carry over directly, allowing React developers to apply their existing knowledge when building mobile applications.

import React, { useState } from 'react';


const MyComponent = () => {
  // State management with useState
  const [isLoggedIn, setIsLoggedIn] = useState(false);


  // Conditional rendering
  const renderContent = () => {
    return isLoggedIn ? <UserProfile /> : <LoginPrompt />;
  };


  // List rendering
  const renderList = (items) => {
    return items.map(item => <ListItem key={item.id} item={item} />);
  };


  return (
    // JSX here
  );
};

Using Expo with React Native

React Native paired with Expo streamlines mobile development by providing pre-built native modules and development tools. This combination eliminates much of the configuration overhead, allowing developers to focus on building app features rather than managing complex native dependencies.

Learn more on Codecademy

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      11 hours
Next