245a84c141
Summary:
Most of the changes associated with this commit will not be visible on GitHub, as they concern files in the internal Facebook monorepo. The bulk of this change is the addition of a new test that runs on the internal test infrastructure. The actual script used by the test has various references to the internal test infra, but a copy is produced below with some changes that should allow it to run on open source should anyone be interested in testing this outside of Facebook.
The test has the main goal of catching common sources of FB-to-GitHub breakages, such as the OSS Flow config falling out of date (we use a different flow config than what is synced out in .flowconfig, and hence internally we rename this file to .github.flowconfig). It also checks that the packager can run on a brand new project, among other things.
```
set -e
THIS_DIR=$(pwd)
REACT_NATIVE_TEMP_DIR=$(mktemp -d /tmp/react-native-XXXXXXXX)
REACT_NATIVE_APP_TEMP_DIR=$(mktemp -d /tmp/react-native-XXXXXXXX)
OFFLINE_MIRROR=$(yarn config get yarn-offline-mirror)
function describe {
printf "\\n\\n>>>>> %s\\n\\n\\n" "$1"
}
function cleanup {
set +e
rm -rf "$REACT_NATIVE_TEMP_DIR"
rm -rf "$REACT_NATIVE_APP_TEMP_DIR"
rm "$OFFLINE_MIRROR/react-native-v1000.0.0.tgz"
set -e
}
trap cleanup EXIT
describe "Creating temporary react-native-github clone"
cp -R "react-native" "$REACT_NATIVE_TEMP_DIR"
pushd "$REACT_NATIVE_TEMP_DIR/react-native" >/dev/null
echo yarn-offline-mirror="$OFFLINE_MIRROR" > .npmrc
describe "Installing react-native node_modules from offline cache"
yarn install --mutex network --offline --frozen-lockfile --ignore-engines --ignore-scripts 2>&1
describe "Running a Flow check"
mv .github.flowconfig .flowconfig
./node_modules/.bin/flow check
describe "Running a basic packager test"
touch .watchmanconfig
node local-cli/cli.js bundle --platform android --dev true --entry-file ReactAndroid/src/androidTest/js/TestBundle.js --bundle-output ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
describe "Creating package for e2e test"
yarn pack
REACT_NATIVE_PACKAGE="$(pwd)/react-native-v1000.0.0.tgz"
REACT_VERSION=$(node -p -e "require('./package.json').peerDependencies['react']")
REACT_NATIVE_HASH=$(shasum "$REACT_NATIVE_PACKAGE" | awk '{print $1;}')
REACT_NATIVE_DEPS=$(node -p -e "const deps=require('./package.json').dependencies; ' ' + Object.keys(deps).map(dep => dep + ' \"' + deps[dep] +'\"').join('\n ')")
popd >/dev/null
describe "Installing temporary RN app"
mkdir "$REACT_NATIVE_APP_TEMP_DIR/PackagerTest"
pushd "$REACT_NATIVE_APP_TEMP_DIR/PackagerTest" >/dev/null
cp "$REACT_NATIVE_PACKAGE" ./
cp "$REACT_NATIVE_PACKAGE" "$OFFLINE_MIRROR"
cp "$REACT_NATIVE_TEMP_DIR/react-native/.npmrc" ./
cp "$REACT_NATIVE_TEMP_DIR/react-native/yarn.lock" ./
cat <<LOCKFILE >> yarn.lock
react-native@1000.0.0:
version "1000.0.0"
resolved react-native-v1000.0.0.tgz#$REACT_NATIVE_HASH
dependencies:
$REACT_NATIVE_DEPS
LOCKFILE
cat > package.json <<- EndOfFile
{
"name": "packager-test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "$REACT_VERSION",
"react-native": "1000.0.0"
}
}
EndOfFile
yarn install --mutex network --offline --frozen-lockfile --ignore-engines --ignore-scripts 2>&1
sed -e s/"HelloWorld"/PackagerTest/g "react-native/local-cli/templates/HelloWorld/app.json" > app.json
cp "react-native/local-cli/templates/HelloWorld/_buckconfig" .buckconfig
cp "react-native/local-cli/templates/HelloWorld/_flowconfig" .flowconfig
cp "react-native/local-cli/templates/HelloWorld/_watchmanconfig" .watchmanconfig
cp "react-native/local-cli/templates/HelloWorld/App.js" App.js
cp "react-native/local-cli/templates/HelloWorld/index.js" index.js
describe "Running a Flow check on a new RN app"
flow check
describe "Verifying packager can produce JS bundle for a new RN app on both platforms"
node ./node_modules/react-native/local-cli/cli.js bundle --platform ios --dev true --entry-file index.js --bundle-output ios-bundle.js
test -e ios-bundle.js
rm ios-bundle.js
node ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --entry-file index.js --bundle-output android-bundle.js
test -e android-bundle.js
rm android-bundle.js
popd >/dev/null
```
Reviewed By: arcanis
Differential Revision: D9129463
fbshipit-source-id: a91eeaa150ae6623ee67bd758bc8a98bb31e57b8
|
||
|---|---|---|
| .circleci | ||
| .github | ||
| ContainerShip | ||
| IntegrationTests | ||
| Libraries | ||
| RNTester | ||
| React | ||
| ReactAndroid | ||
| ReactCommon | ||
| ReactNative | ||
| bots | ||
| flow | ||
| flow-github | ||
| gradle/wrapper | ||
| jest | ||
| keystores | ||
| lib | ||
| local-cli | ||
| react-native-cli | ||
| react-native-git-upgrade | ||
| scripts | ||
| third-party-podspecs | ||
| .buckconfig | ||
| .buckjavaargs | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc | ||
| .flowconfig | ||
| .gitattributes | ||
| .github.flowconfig.android | ||
| .gitignore | ||
| .npmignore | ||
| .nvmrc | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| DockerTests.md | ||
| Jenkinsfile | ||
| LICENSE | ||
| LICENSE-docs | ||
| README.md | ||
| React.podspec | ||
| Releases.md | ||
| appveyor.yml | ||
| build.gradle | ||
| cli.js | ||
| gradlew | ||
| gradlew.bat | ||
| jest-preset.json | ||
| package.json | ||
| react.gradle | ||
| rn-cli.config.js | ||
| rn-get-polyfills.js | ||
| runXcodeTests.sh | ||
| settings.gradle | ||
| setupBabel.js | ||
README.md
React Native · 
Learn once, write anywhere: Build mobile apps with React.
- Build native mobile apps using JavaScript and React: React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
- A React Native app is a real mobile app: With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
- Don't waste time recompiling: React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
- Use native code when you need to: React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.
See the official React Native website for an introduction to React Native.
Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.
Getting Started
Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
Documentation
The website’s documentation is divided into multiple sections.
- There are Guides that discuss topics like debugging, integrating with existing apps, and the gesture responder system.
- The Components section covers React components such as
ViewandButton. - The APIs section covers other libraries like Animated and StyleSheet that aren’t React components themselves.
- Finally, React Native provides a small number of Polyfills that offer web-like APIs.
Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries/Components directory for components like ScrollView and TextInput, for example. The RNTester example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each component’s behavior and API.
The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
Upgrading
React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.
Contributing
Read below to learn how you can take part in improving React Native.
Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Contributing Guide
Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to React Native.
Beginner Friendly Bugs
We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
License
React Native is MIT licensed.
React Native documentation is Creative Commons licensed.
