Codecademy Logo

Building Interactive UIs

Related learning

  • Free course

    Learn React Native

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

React Native Core Components

React Native offers a range of core components, forming the foundation for developing interactive mobile applications. These components bring modular and reusable building blocks to an app developer’s toolkit, simplifying the creation of complex UIs.

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


const App = () => (
  <View>
    <Text>Welcome to React Native!</Text>
    <Button title="Press Me" onPress={() => alert('Button pressed!')} />
  </View>
);


export default App;

<Pressable> Components

The <Pressable> component in React Native allows developers to create interactive, “pressable” elements with custom styles and behaviors, offering an updated approach to touch event handling.

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


const App = () => (
  <Pressable
    onPress={() => console.log('Pressed!')}
    style={({ pressed }) => ({
      backgroundColor: pressed ? 'lightblue' : 'white',
    })}
  >
    <Text>Press Me</Text>
  </Pressable>
);


export default App;

<Pressable> Lifecycles

React Native’s <Pressable> recognizes the complete pressing lifecycle. It uses onPressIn, onPressOut, and onPress props to manage touch interactions efficiently.

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


const App = () => (
  <Pressable
    onPressIn={() => console.log('Press In')}
    onPressOut={() => console.log('Press Out')}
    onPress={() => console.log('Pressed')}
  >
    <Text>Press Me</Text>
  </Pressable>
);


export default App;

<TextInput> Components

React Native’s <TextInput> component captures user text input through the keyboard. The value and onChangeText props manage input state, enabling real-time updates as users type.

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


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


  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Type here"
      />
      <Text>{`Input: ${text}`}</Text>
    </View>
  );
};


export default App;

<Switch> Components

React Native’s <Switch> component renders a boolean toggle control. The value and onValueChange props manage the switch state, enabling users to toggle between true and false values.

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


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


  return (
    <View>
      <Switch
        value={isEnabled}
        onValueChange={setIsEnabled}
      />
      <Text>{`Switch is ${isEnabled ? 'ON' : 'OFF'}`}</Text>
    </View>
  );
};


export default App;

Managing Keyboards in React Native

React Native’s <KeyboardAvoidingView> component ensures UI elements adjust properly when the on-screen keyboard appears, improving user interaction.

import { KeyboardAvoidingView, TextInput, Button, Platform } from 'react-native';


const App = () => (
  <KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    style={{ flex: 1 }}
  >
    <TextInput placeholder="Input text here" />
  </KeyboardAvoidingView>
);


export default App;

Keyboard API Utilities

The Keyboard API in React Native helps manage the virtual keyboard effectively with functions like dismissing and checking its visibility, enhancing app usability.

import { Keyboard } from 'react-native';


const App = () => {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };


  return (
    <Button title="Dismiss Keyboard" onPress={dismissKeyboard} />
  );
};


export default App;

The <FlatList> Component

Leverage React Native’s <FlatList> for rendering large data efficiently. The component uses data for list items and renderItem to define each element’s rendering.

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


const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];


const renderItem = ({ item }) => <Text>{item.title}</Text>;


const App = () => (
  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />
);


export default App;

<Modal> Component

React Native’s <Modal> component presents content above the enclosing view. The visible prop controls its visibility while animationType customizes entrance animations.

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


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


  return (
    <View>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(!modalVisible)}
      >
        <View style={{ marginTop: 22 }}>
          <Text>Hello Modal!</Text>
          <Button title="Hide Modal" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
    </View>
  );
};


export default App;

Alert API

React Native’s Alert API displays modal dialogs to users. The Alert.alert() method creates alerts with customizable titles, messages, and action buttons.

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


const App = () => {
  const showAlert = () => {
    Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ],
      { cancelable: false }
    );
  };


  return <Button title="Show Alert" onPress={showAlert} />;
};


export default App;

<ActivityIndicator> Loader

The <ActivityIndicator> in React Native shows a spinner during long tasks. It can be customized with size and color props to fit the application’s UI style.

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


const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <ActivityIndicator size="large" color="#0000ff" />
  </View>
);


export default App;

Accessible <Pressable> Design

React Native’s <Pressable> component should maintain at least 44x44 pixels in size for proper accessibility. The hitSlop prop extends the touch area beyond the visual boundaries, improving touch precision without changing the component’s appearance.

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


const App = () => (
  <Pressable
    onPress={() => console.log('Pressed')}
    style={{ width: 100, height: 100, backgroundColor: 'lightgray' }}
    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  >
    <Text>Press Me</Text>
  </Pressable>
);


export default App;

Accessible Inputs with React Native

React Native inputs can be made more accessible by using properties like accessible and accessibilityLabel to label and describe UI elements.

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


const App = () => (
  <View>
    <TextInput 
      accessible={true}
      accessibilityLabel="Enter your name"
      placeholder="Name"
    />
  </View>
);


export default App;

Learn more on Codecademy

  • Free course

    Learn React Native

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