Building a React Native App: Flashcard App

React Native is a framework that allows you to create native mobile applications using JavaScript and React. It uses the same design principles as React, such as components, state, and props, but also provides access to native features such as camera, geolocation, and push notifications. React Native apps can run on both iOS and Android devices, and share most of the code between them.

In this article, we will learn how to build a simple flashcard app using React Native without expo. Expo is a tool that simplifies the development process of React Native apps by providing a set of pre-built features and services. However, expo also has some limitations, such as requiring an internet connection, not supporting some native modules, and having a larger app size. Therefore, some developers may prefer to use React Native without expo, which gives them more control and flexibility over their app.

Setting up the development environment · React Native

Prerequisites

To follow this tutorial, you will need:

• Node.js installed on your computer. You can download it from [here].
• A code editor of your choice. I recommend Visual Studio Code, which you can download from [here].
• An Android or iOS device or emulator to run your app. You can use Android Studio or Xcode to set up an emulator, or use your own device with a USB cable.
• The React Native CLI (command line interface) installed globally on your computer. You can install it by running the following command in your terminal:

npm install -g react-native-cli

Creating the project

To create a new React Native project without expo, you can use the react-native init command with the name of your project. For example, to create a project called FlashcardApp, you can run:

react-native init FlashcardApp

This will create a folder called FlashcardApp with the following structure:

FlashcardApp
├── android
├── ios
├── node_modules
├── index.js
├── App.js
├── package.json
└── ...

The android and ios folders contain the native code for each platform. The node_modules folder contains the dependencies for your project. The index.js file is the entry point for your app, which imports the App.js file. The App.js file is where you will write your React Native code. The package.json file contains the metadata and scripts for your project.

Installing dependencies

For this project, we will use two additional libraries: react-native-elements and react-native-flip-card. react-native-elements is a UI library that provides a set of ready-made components for React Native, such as buttons, icons, cards, etc. react-native-flip-card is a library that allows us to create flip cards with animations.

To install these libraries, you can run the following command in your terminal:

npm install react-native-elements react-native-flip-card

You also need to link the native modules for these libraries by running:

react-native link

This will update the native code in the android and ios folders to include the necessary dependencies.

Writing the code

Now that we have set up our project and installed our dependencies, we can start writing our React Native code. We will use functional components and hooks to create our app.

App component

The App component is the root component of our app. It will render a header with the app title and a list of flashcards. We will use the Header component from react-native-elements to create the header, and the FlatList component from React Native to create the list.

We will also define an array of flashcards as our initial state using the useState hook. Each flashcard will have an id, a question, and an answer. For example:

const [flashcards, setFlashcards] = useState([
  {
    id: 1,
    question: "What is React?",
    answer: "A JavaScript library for building user interfaces",
  },
  {
    id: 2,
    question: "What is React Native?",
    answer: "A framework that allows you to create native mobile applications using JavaScript and React",
  },
  {
    id: 3,
    question: "What is Expo?",
    answer: "A tool that simplifies the development process of React Native apps by providing a set of pre-built features and services",
  },
]);

We will also import the Flashcard component that we will create later, and pass each flashcard as a prop to it.

The code for the App component is as follows:

import React, { useState } from "react";
import { FlatList, StyleSheet, View } from "react-native";
import { Header } from "react-native-elements";
import Flashcard from "./Flashcard";

const App = () => {
  const [flashcards, setFlashcards] = useState([
    {
      id: 1,
      question: "What is React?",
      answer: "A JavaScript library for building user interfaces",
    },
    {
      id: 2,
      question: "What is React Native?",
      answer: "A framework that allows you to create native mobile applications using JavaScript and React",
    },
    {
      id: 3,
      question: "What is Expo?",
      answer: "A tool that simplifies the development process of React Native apps by providing a set of pre-built features and services",
    },
  ]);
  return (
    <View style={styles.container}>
      <Header
        centerComponent={{
          text: "Flashcard App",
          style: { color: "#fff", fontSize: 20 },
        }}
        backgroundColor="#3D6DCC"
      />
      <FlatList
        data={flashcards}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Flashcard flashcard={item} />}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;

Flashcard component

The Flashcard component is the component that will render each flashcard. It will use the Card component from react-native-elements to create the card, and the FlipCard component from react-native-flip-card to create the flip animation. It will also use the Text component from React Native to display the question and answer.

The code for the Flashcard component is as follows:

import React from "react";
import { StyleSheet, Text } from "react-native";
import { Card } from "react-native-elements";
import FlipCard from "react-native-flip-card";

const Flashcard = ({ flashcard }) => {
  return (
    <FlipCard style={styles.card} flipHorizontal flipVertical>
      {/* Front side */}
      <Card>
        <Text style={styles.question}>{flashcard.question}</Text>
      </Card>
      {/* Back side */}
      <Card>
        <Text style={styles.answer}>{flashcard.answer}</Text>
      </Card>
    </FlipCard>
  );
};
const styles = StyleSheet.create({
  card: {
    margin: 10,
    borderWidth: 0,
  },
  question: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
  answer: {
    fontSize: 16,
    textAlign: "center",
  },
});
export default Flashcard;

Running the app

To run the app on your device or emulator, you can use the following commands in your terminal:

# For Android
react-native run-android

# For iOS
react-native run-ios

This will launch your app and display the list of flashcards. You can tap on any flashcard to flip it and see the answer.

Conclusion

In this article, we learned how to build a simple flashcard app using React Native without expo. We used react-native-elements and react-native-flip-card libraries to create the UI and animations for our app. We also used functional components and hooks to manage our state and props.

I hope you enjoyed this article and learned something new. If you have any questions or feedback, please let me know in the comments below. Thank you for reading! 😊

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.