Skip to content

get-started-without-a-framework.md

Latest commit

 

History

History
120 lines (76 loc) · 4.51 KB

get-started-without-a-framework.md

File metadata and controls

120 lines (76 loc) · 4.51 KB
id getting-started-without-a-framework
title Get Started Without a Framework
hide_table_of_contents true

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; import PlatformSupport from '@site/src/theme/PlatformSupport';

import RemoveGlobalCLI from './_remove-global-cli.md';

<PlatformSupport platforms={['android', 'ios', 'macOS', 'tv', 'watchOS', 'web', 'windows', 'visionOS']} />

If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework.

To do so, you'll first need to set up your environment. Once you're set up, continue with the steps below to create an application and start developing.

Step 1: Creating a new application

You can use React Native Community CLI to generate a new project. Let's create a new React Native project called "AwesomeProject":

npx @react-native-community/cli@latest init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, or if you've installed Expo in your project, or if you're adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to set up your React Native app, such as Ignite CLI.

:::info

If you are having trouble with iOS, try to reinstall the dependencies by running:

  1. cd ios to navigate to the ios folder.
  2. bundle install to install Bundler
  3. bundle exec pod install to install the iOS dependencies managed by CocoaPods.

:::

[Optional] Using a specific version or template

If you want to start a new project with a specific CLI and React Native version, you can use the --version argument:

npx @react-native-community/cli@X.XX.X init AwesomeProject --version Y.YY.Y

You can also start a project with a custom React Native template with the --template argument, read more here.

Step 2: Start Metro

Metro is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:

npm start
yarn start

:::note If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses Babel to transform syntax such as JSX into executable JavaScript. :::

Step 3: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npm run android
yarn android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

This is one way to run your app - you can also run it directly from within Android Studio.

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

Step 4: Modifying your app

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

  • Open App.tsx in your text editor of choice and edit some lines.
  • Press the R key twice or select Reload from the Dev Menu (Ctrl + M) to see your changes!

That's it!

Congratulations! You've successfully run and modified your first barebone React Native app.

Now what?