Skip to content

dev -> master #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 96 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
96 commits
Select commit Hold shift + click to select a range
2945cf9
remove unused versions
darshkpatel Aug 19, 2020
670f61f
include changes to en.json
teikjun Aug 28, 2020
45f5cb2
update dependencies
darshkpatel Aug 19, 2020
3c6dd75
upgrade to v2 config
darshkpatel Aug 19, 2020
ab6a03c
create a customTheme.css file and update yarn.lock
teikjun Aug 28, 2020
f0e3c8d
move customTheme.css
teikjun Aug 28, 2020
95f7b10
Upgrade blog file for v2
teikjun Aug 19, 2020
8dbb898
upgrade sidebar configs
teikjun Aug 19, 2020
6e1ee9c
upgrade sidebar config for v2
teikjun Aug 19, 2020
0a314ba
Rename and fix errors in 0.60 and 0.61 docs
teikjun Aug 19, 2020
131a972
Rename and fix errors in 0.62 and 0.63 docs
darshkpatel Aug 19, 2020
9457173
add .docusaurus to gitignore
darshkpatel Aug 19, 2020
c550cee
change path for docs plugin
teikjun Aug 28, 2020
36cd9cf
update circleci config for v2 build path
darshkpatel Aug 19, 2020
4d2dd08
update scripts for v2 paths
darshkpatel Aug 19, 2020
989aae2
update netlify config
teikjun Aug 19, 2020
c3f57a0
fix errors in docs
darshkpatel Aug 19, 2020
1f18ee1
update netlify.toml
teikjun Aug 28, 2020
503e505
resolve http warning
teikjun Aug 28, 2020
479fd0f
Revert "fix errors in docs"
teikjun Aug 28, 2020
538e153
fix errors in docs
darshkpatel Aug 19, 2020
66a454f
resolve merge conflict
teikjun Aug 28, 2020
f20193c
fix errors in upstream's appregistry
teikjun Aug 28, 2020
f657a4f
Revert "Rename and fix errors in 0.60 and 0.61 docs"
teikjun Aug 28, 2020
abc5b68
fix errors in 0.60 and 0.61 docs
teikjun Aug 19, 2020
f74ba52
Merge pull request #3 from react-native-website-migration/minimal-site
slorber Sep 2, 2020
f86a7aa
fix local build, basic theme overrides, header reorder, docusaurus bu…
Simek Sep 14, 2020
e29310b
add additional languages and customize prism theme (#16)
teikjun Sep 14, 2020
bc4bd04
add line highlighting (#18)
teikjun Sep 14, 2020
a1d8ad6
remove V1 announcement bar code
Simek Sep 14, 2020
c6ec9fc
sidebar subcategories should not be collapsed by default
Simek Sep 14, 2020
2c3603e
sidebar spacing and size tweak
Simek Sep 14, 2020
1fd3daf
add markdown tables styling, minor CSS tweaks
Simek Sep 15, 2020
1b8087a
disable text color transition, pagination and page metadata tweaks
Simek Sep 15, 2020
3a20d7f
use docusaurus-plugin-sass, convert CSS to SCSS
Simek Sep 15, 2020
1bb3e3f
fix color preview boxes
Simek Sep 15, 2020
3130d43
fix shell codeblocks highlight
Simek Sep 15, 2020
fae32ee
initial reimport of platform labels styles, Button page fix
Simek Sep 15, 2020
b612155
refs #20, basic tabs test on Typescript page, tabs and code blocks de…
Simek Sep 16, 2020
a197379
refs #20, component tabs test in ActivityIndicator, import issue fix
Simek Sep 16, 2020
029583f
refs #20, initial tabs setup on Environment page, tabs constants refa…
Simek Sep 16, 2020
b38c30d
tweak docs search component theme
Simek Sep 16, 2020
b0a1e55
refs #20, fix server build
Simek Sep 16, 2020
b12b3c4
refs #22, update version alert style
Simek Sep 16, 2020
59229e3
tweak pagination, edit button and page metadata style
Simek Sep 16, 2020
5d37475
refs #24, init migration of the community page
Simek Sep 18, 2020
2de353d
refs #23, init migration of the home page
Simek Sep 18, 2020
cc4d244
refs #23, small tweaks, but server build still fails
Simek Sep 18, 2020
51669cb
refs #23, fix home page animations
Simek Sep 18, 2020
cd4612e
migrate showcase page, update prism theme
Simek Sep 24, 2020
7dfe801
refs #20, #22, devNotes tabs, "new" labels, design tweaks
Simek Sep 26, 2020
644174f
improve footer mobile layout, improve scrollbars in dark mode
Simek Oct 1, 2020
11dd37e
import components grid styles, small style tweaks
Simek Oct 1, 2020
ad0a743
fix devNotes tabs issue, prevent logo flickering
Simek Oct 1, 2020
020efcb
prettier is causing an issue there, need to separate tags by black line
Simek Oct 1, 2020
fcb9b90
refs #25, swizzle DocItem, reimplement DocsRating
Simek Oct 1, 2020
d4ac8fe
whoops, revert part of stashed test pushed as mistake
Simek Oct 1, 2020
a44a944
no warning at dev, but build fails...
Simek Oct 1, 2020
d4bacca
replace syntax tabs with V2 implementation, update lock
Simek Oct 1, 2020
93a7b67
improve docs metadata design, few other style tweaks
Simek Oct 1, 2020
7521fd9
update showcase design, fix few issues in dark mode
Simek Oct 1, 2020
d03d455
remove announcement banner (#27)
darshkpatel Oct 2, 2020
5b6fdff
WIP: Fix Failing build (#28)
darshkpatel Oct 2, 2020
4e6a3ea
remove few invalid pages created during initial migration, replace an…
Simek Oct 2, 2020
32e0647
remove old and migrated pages/components, add missing headers, more t…
Simek Oct 2, 2020
019a82c
bump Docusaurus, bump other dependencies, fix few issues
Simek Oct 2, 2020
11675f6
fix build
Simek Oct 2, 2020
23060f9
add missing metadatas, fix footer links, improve community page,
Simek Oct 2, 2020
40c6939
update mobile navbar design, other mobile related tweaks
Simek Oct 2, 2020
8ae3da4
fix few minor issues, tweak version dropdown style
Simek Oct 6, 2020
cd4d12c
WIP: SnackPlayer Plugin (#31)
darshkpatel Oct 7, 2020
f0cc436
fix incorrect links warnings on build
Simek Oct 8, 2020
7b03a30
update Tabs on TV Build and Security pages, remove few versioned page…
Simek Oct 8, 2020
c0fdc47
basic SnackPlayer theme support
Simek Oct 8, 2020
a3c9b20
revert theme changes, attempt to removed redundant script
Simek Oct 8, 2020
2060fc8
migrate environment-setup tabs, use partials (versioned for now), oth…
Simek Oct 8, 2020
7d21596
remove prism codeblocks (#32)
darshkpatel Oct 8, 2020
a76d16b
refs #26, use Expo logo as SVG as data, replace GitHub label with SVG…
Simek Oct 8, 2020
66862ae
Remark SnackPlayer tweaks (#33)
Simek Oct 9, 2020
d6d22c5
fix GitHub link on mobile, fix Pressable labels, minor styling tweaks
Simek Oct 9, 2020
01c2d45
refs #20, migrate Tabs on the Running on Device page
Simek Oct 13, 2020
7a0da98
refs #20, migrate Tabs on the Integration page
Simek Oct 13, 2020
ad79cb5
fix side-by-side code example on Tutorial page
Simek Oct 13, 2020
eb497cd
migrate to alpha.66, tweak blog settings and UI, add new tabs
Simek Oct 20, 2020
999df48
fix the 3 navbar item tabs
slorber Oct 20, 2020
1c5b91e
update algolia config (#38)
slorber Oct 20, 2020
0df0874
move users out of config
slorber Oct 20, 2020
baf557d
use showcase.json file for users config value
slorber Oct 20, 2020
56e3428
Revert "use showcase.json file for users config value"
slorber Oct 20, 2020
8c87f98
remove useless defaultVersionShown field
slorber Oct 20, 2020
41b58b7
fix the Community and Blog styling, add NavItem border
Simek Oct 20, 2020
1b9273c
remove useless usage of customFields.defaultVersionShown
slorber Oct 20, 2020
d6960bf
fixes #30, migrate Versions page, add it to the dropdown
Simek Oct 20, 2020
84cd263
fix blog sidebar scrollbar in dark mode, fix few warnings
Simek Oct 20, 2020
b436063
tweak blog sidebar style, change sidebar title
Simek Oct 20, 2020
3f9965b
blog sidebar quickfix for build version
Simek Oct 20, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
3 changes: 2 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ jobs:
- run:
name: Check for missing index.html (build errors)
command: |
if [ ! -f build/react-native/index.html ]; then
if [ ! -f build/index.html ]; then
exit 1;
fi
# --------------------------------------------------
Expand Down Expand Up @@ -98,6 +98,7 @@ jobs:
git config --global user.name "Website Deployment Script"
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc
echo "Deploying website..."
export NODE_OPTIONS=--max_old_space_size=4096
GIT_USER=reactjs-bot CIRCLE_PROJECT_REPONAME=react-native yarn run publish-gh-pages
else
echo "Skipping deploy."
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ website/i18n/*
!website/i18n/en.json

.nvmrc
.docusaurus
website/scripts/sync-api-docs/generatedComponentApiDocs.js
website/scripts/sync-api-docs/extracted.json
177 changes: 177 additions & 0 deletions docs/_getting-started-linux-android.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
## Installing dependencies

You will need Node, the React Native command line interface, a JDK, and Android Studio.

While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

<h3>Node</h3>

Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 10 or newer.

<h3>Java Development Kit</h3>

React Native requires at least the version 8 of the Java SE Development Kit (JDK). You may download and install [OpenJDK](http://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager. You may also [Download and install Oracle JDK 14](https://www.oracle.com/java/technologies/javase-jdk14-downloads.html) if desired.

<h3>Android development environment</h3>

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

<h4>1. Install Android Studio</h4>

[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:

- `Android SDK`
- `Android SDK Platform`
- `Android Virtual Device`

Then, click "Next" to install all of these components.

> If the checkboxes are grayed out, you will have a chance to install these components later on.

Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

<h4>2. Install the Android SDK</h4>

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:

- `Android SDK Platform 29`
- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

<h4>3. Configure the ANDROID_HOME environment variable</h4>

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:

```shell
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```

> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.

Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.

> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.

<h3>Watchman</h3>

Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source.

> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

<h3>React Native Command Line Interface</h3>

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.

<h2>Creating a new application</h2>

> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

```shell
npx react-native init AwesomeProject
```

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).

<h3>[Optional] Using a specific version or template</h3>

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

```shell
npx react-native init AwesomeProject --version X.XX.X
```

You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:

```shell
npx react-native init AwesomeTSProject --template react-native-template-typescript
```

<h2>Preparing the Android device</h2>

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

Either way, you will need to prepare the device to run Android apps for development.

<h3>Using a physical device</h3>

If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).

<h3>Using a virtual device</h3>

If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)

If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.

> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.

<h2>Running your React Native application</h2>

<h3>Step 1: Start Metro</h3>

First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)

To start Metro, run `npx react-native start` inside your React Native project folder:

```shell
npx react-native start
```

`react-native start` starts Metro Bundler.

> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.

> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.

<h3>Step 2: Start your application</h3>

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

```shell
npx react-native run-android
```

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

`npx react-native run-android` 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](troubleshooting.md#content) page.

<h3>Modifying your app</h3>

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

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

<h3>That's it!</h3>

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

<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>

<h2>Now what?</h2>

- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).

If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
Loading