Skip to content

Manga reader made in React Native for Android

Notifications You must be signed in to change notification settings

Tsukugi/Rapunzel

Repository files navigation

Welcome to Rapunzel!

A reader made in React Native for books that supports multiple sources.

Dependencies

You would need the following as a dev environment

  • node >= 16
  • Android Studio set up (For android emulator, from here https://developer.android.com/studio)
  • adb (For android device testing, should come with android studio, you'd like to have the adb command available in your console)
  • ESLint and Prettier plugins for your IDE (For linting, formatting, etc.). Please find a plugin that helps you follow these rulesets defined in the project. Personally I use VSCode.

How to build?

Step 1: Dependencies

First, you will need to install the dependencies, a normal npm install should suffice

npm i

Step 2: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

npm run start

Step 3: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

npm run android

For iOS

npm run ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 4: Modifying Rapunzel

Now that you have successfully run the app, let's modify it.

  1. Open src/App.tsx, index.js or any component inside src/ in your text editor of choice and edit some lines.

  2. For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

    For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources: