History

Janic Duplessis db061ea8c7 Don't wrap ListEmptyComponent in an extra view Summary: A common UI pattern for list empty states is some text/images centered inside the visible part of the list. This is pretty hard to do currently because we wrap ListEmptyComponent with an extra view with no way to style it so we cannot just use `flex: 1` to make it fill the available space. - Added an example of ListEmptyComponent in the FlatList example in RNTester Before (no way to make ListEmptyComponent fill the space): <img width="377" alt="screen shot 2018-03-05 at 5 24 15 pm" src="https://user-images.githubusercontent.com/2677334/37003152-129db3ac-209a-11e8-9600-110f10d57144.png"> After: <img width="377" alt="screen shot 2018-03-05 at 5 09 20 pm" src="https://user-images.githubusercontent.com/2677334/37002809-e6971178-2098-11e8-8cf7-74bfb2f6a992.png"> - Tested some edge cases like returning null from the ListEmptyComponent - Tested in an app that uses FlatList + ListEmptyComponent [GENERAL] [MINOR] [VirtualizedList] - Don't wrap ListEmptyComponent in an extra view Closes https://github.com/facebook/react-native/pull/18206 Differential Revision: D7266274 Pulled By: sahrens fbshipit-source-id: 4636d2418474a4c86ac63e5e18a9afc391a518c5		2018-03-13 18:11:31 -07:00
..
RNTester	Update license headers for MIT license	2018-02-16 18:31:53 -08:00
RNTester-tvOS	Re-license and rename UIExplorer integration test app as RNTester	2017-05-08 11:31:19 -07:00
RNTester.xcodeproj	Reimagining of RCTShadowView layout API	2018-02-12 00:32:43 -08:00
RNTesterIntegrationTests	Fixed problem in Text measurent on iOS	2018-02-25 09:37:38 -08:00
RNTesterUnitTests	Update license headers for MIT license	2018-02-16 18:31:53 -08:00
android/app	Add support for Android TV devices	2018-03-06 10:47:02 -08:00
js	Don't wrap ListEmptyComponent in an extra view	2018-03-13 18:11:31 -07:00
README.md	Move packager launcher scripts outside of `packager/`	2017-05-23 16:17:09 -07:00

README.md

RNTester

The RNTester showcases React Native views and modules.

Running this app

Before running the app, make sure you ran:

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

Running on iOS

Mac OS and Xcode are required.

Open RNTester/RNTester.xcodeproj in Xcode
Hit the Run button

See Running on device if you want to use a physical device.

Running on Android

You'll need to have all the prerequisites (SDK, NDK) for Building React Native installed.

Start an Android emulator (Genymotion is recommended).

cd react-native
./gradlew :RNTester:android:app:installDebug
./scripts/packager.sh

Note: Building for the first time can take a while.

Open the RNTester app in your emulator.

See Running on Device in case you want to use a physical device.

Running with Buck

Follow the same setup as running with gradle.

Install Buck from here.

Run the following commands from the react-native folder:

./gradlew :ReactAndroid:packageReactNdkLibsForBuck
buck fetch rntester
buck install -r rntester
./scripts/packager.sh

Note: The native libs are still built using gradle. Full build with buck is coming soon(tm).

Built from source

Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.

This is different from apps created using react-native init which have a dependency on a specific version of React Native JS and native code, declared in a package.json file (and build.gradle for Android apps).