From 8f62f8eb93141d3f369c992080d9a4e24ecae298 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 1 Dec 2017 22:50:50 +0000 Subject: [PATCH] Deploy website Deploy website version based on 45bbb2c3a1495216f38a67f9ee7743f44d117286 --- docs/0.10/app-extensions.html | 2 +- docs/0.10/button.html | 2 +- docs/0.10/debugging.html | 10 ++-- docs/0.10/getting-started.html | 46 +++++++++---------- docs/0.10/handling-touches.html | 2 +- docs/0.10/integration-with-existing-apps.html | 12 ++--- docs/0.10/linking-libraries-ios.html | 6 +-- docs/0.10/navigation.html | 2 +- docs/0.10/performance.html | 26 +++++------ docs/0.10/running-on-device.html | 10 ++-- docs/0.11/app-extensions.html | 2 +- docs/0.11/button.html | 2 +- docs/0.11/debugging.html | 10 ++-- docs/0.11/getting-started.html | 46 +++++++++---------- docs/0.11/handling-touches.html | 2 +- docs/0.11/integration-with-existing-apps.html | 12 ++--- docs/0.11/linking-libraries-ios.html | 6 +-- docs/0.11/navigation.html | 2 +- docs/0.11/performance.html | 26 +++++------ docs/0.11/running-on-device.html | 10 ++-- docs/0.12/app-extensions.html | 2 +- docs/0.12/button.html | 2 +- docs/0.12/debugging.html | 10 ++-- docs/0.12/getting-started.html | 46 +++++++++---------- docs/0.12/handling-touches.html | 2 +- docs/0.12/integration-with-existing-apps.html | 12 ++--- docs/0.12/linking-libraries-ios.html | 6 +-- docs/0.12/navigation.html | 2 +- docs/0.12/performance.html | 26 +++++------ docs/0.12/running-on-device.html | 10 ++-- docs/0.13/app-extensions.html | 2 +- docs/0.13/button.html | 2 +- docs/0.13/debugging.html | 10 ++-- docs/0.13/getting-started.html | 46 +++++++++---------- docs/0.13/handling-touches.html | 2 +- docs/0.13/integration-with-existing-apps.html | 12 ++--- docs/0.13/linking-libraries-ios.html | 6 +-- docs/0.13/navigation.html | 2 +- docs/0.13/performance.html | 26 +++++------ docs/0.13/running-on-device.html | 10 ++-- docs/0.14/app-extensions.html | 2 +- docs/0.14/button.html | 2 +- docs/0.14/debugging.html | 10 ++-- docs/0.14/getting-started.html | 46 +++++++++---------- docs/0.14/handling-touches.html | 2 +- docs/0.14/integration-with-existing-apps.html | 12 ++--- docs/0.14/linking-libraries-ios.html | 6 +-- docs/0.14/navigation.html | 2 +- docs/0.14/performance.html | 26 +++++------ docs/0.14/running-on-device.html | 10 ++-- docs/0.15/app-extensions.html | 2 +- docs/0.15/button.html | 2 +- docs/0.15/debugging.html | 10 ++-- docs/0.15/getting-started.html | 46 +++++++++---------- docs/0.15/handling-touches.html | 2 +- docs/0.15/integration-with-existing-apps.html | 12 ++--- docs/0.15/linking-libraries-ios.html | 6 +-- docs/0.15/navigation.html | 2 +- docs/0.15/performance.html | 26 +++++------ docs/0.15/running-on-device.html | 10 ++-- docs/0.16/app-extensions.html | 2 +- docs/0.16/button.html | 2 +- docs/0.16/debugging.html | 10 ++-- docs/0.16/getting-started.html | 46 +++++++++---------- docs/0.16/handling-touches.html | 2 +- docs/0.16/integration-with-existing-apps.html | 12 ++--- docs/0.16/linking-libraries-ios.html | 6 +-- docs/0.16/navigation.html | 2 +- docs/0.16/performance.html | 26 +++++------ docs/0.16/running-on-device.html | 10 ++-- docs/0.17/app-extensions.html | 2 +- docs/0.17/button.html | 2 +- docs/0.17/debugging.html | 10 ++-- docs/0.17/getting-started.html | 46 +++++++++---------- docs/0.17/handling-touches.html | 2 +- docs/0.17/integration-with-existing-apps.html | 12 ++--- docs/0.17/linking-libraries-ios.html | 6 +-- docs/0.17/navigation.html | 2 +- docs/0.17/performance.html | 26 +++++------ docs/0.17/running-on-device.html | 10 ++-- docs/0.18/app-extensions.html | 2 +- docs/0.18/button.html | 2 +- docs/0.18/debugging.html | 10 ++-- docs/0.18/getting-started.html | 46 +++++++++---------- docs/0.18/handling-touches.html | 2 +- docs/0.18/integration-with-existing-apps.html | 12 ++--- docs/0.18/linking-libraries-ios.html | 6 +-- docs/0.18/navigation.html | 2 +- docs/0.18/performance.html | 26 +++++------ docs/0.18/running-on-device.html | 10 ++-- docs/0.19/app-extensions.html | 2 +- docs/0.19/button.html | 2 +- docs/0.19/debugging.html | 10 ++-- docs/0.19/getting-started.html | 46 +++++++++---------- docs/0.19/handling-touches.html | 2 +- docs/0.19/integration-with-existing-apps.html | 12 ++--- docs/0.19/linking-libraries-ios.html | 6 +-- docs/0.19/navigation.html | 2 +- docs/0.19/performance.html | 26 +++++------ docs/0.19/running-on-device.html | 10 ++-- docs/0.20/app-extensions.html | 2 +- docs/0.20/button.html | 2 +- docs/0.20/debugging.html | 10 ++-- docs/0.20/getting-started.html | 46 +++++++++---------- docs/0.20/handling-touches.html | 2 +- docs/0.20/integration-with-existing-apps.html | 12 ++--- docs/0.20/linking-libraries-ios.html | 6 +-- docs/0.20/navigation.html | 2 +- docs/0.20/performance.html | 26 +++++------ docs/0.20/running-on-device.html | 10 ++-- docs/0.21/app-extensions.html | 2 +- docs/0.21/button.html | 2 +- docs/0.21/debugging.html | 10 ++-- docs/0.21/getting-started.html | 46 +++++++++---------- docs/0.21/handling-touches.html | 2 +- docs/0.21/integration-with-existing-apps.html | 12 ++--- docs/0.21/linking-libraries-ios.html | 6 +-- docs/0.21/navigation.html | 2 +- docs/0.21/performance.html | 26 +++++------ docs/0.21/running-on-device.html | 10 ++-- docs/0.22/app-extensions.html | 2 +- docs/0.22/button.html | 2 +- docs/0.22/debugging.html | 10 ++-- docs/0.22/getting-started.html | 46 +++++++++---------- docs/0.22/handling-touches.html | 2 +- docs/0.22/integration-with-existing-apps.html | 12 ++--- docs/0.22/linking-libraries-ios.html | 6 +-- docs/0.22/navigation.html | 2 +- docs/0.22/performance.html | 26 +++++------ docs/0.22/running-on-device.html | 10 ++-- docs/0.23/app-extensions.html | 2 +- docs/0.23/button.html | 2 +- docs/0.23/debugging.html | 10 ++-- docs/0.23/getting-started.html | 46 +++++++++---------- docs/0.23/handling-touches.html | 2 +- docs/0.23/integration-with-existing-apps.html | 12 ++--- docs/0.23/linking-libraries-ios.html | 6 +-- docs/0.23/navigation.html | 2 +- docs/0.23/performance.html | 26 +++++------ docs/0.23/running-on-device.html | 10 ++-- docs/0.24/app-extensions.html | 2 +- docs/0.24/button.html | 2 +- docs/0.24/debugging.html | 10 ++-- docs/0.24/getting-started.html | 46 +++++++++---------- docs/0.24/handling-touches.html | 2 +- docs/0.24/integration-with-existing-apps.html | 12 ++--- docs/0.24/linking-libraries-ios.html | 6 +-- docs/0.24/navigation.html | 2 +- docs/0.24/performance.html | 26 +++++------ docs/0.24/running-on-device.html | 10 ++-- docs/0.25/app-extensions.html | 2 +- docs/0.25/button.html | 2 +- docs/0.25/debugging.html | 10 ++-- docs/0.25/getting-started.html | 46 +++++++++---------- docs/0.25/handling-touches.html | 2 +- docs/0.25/integration-with-existing-apps.html | 12 ++--- docs/0.25/linking-libraries-ios.html | 6 +-- docs/0.25/navigation.html | 2 +- docs/0.25/performance.html | 26 +++++------ docs/0.25/running-on-device.html | 10 ++-- docs/0.26/app-extensions.html | 2 +- docs/0.26/button.html | 2 +- docs/0.26/debugging.html | 10 ++-- docs/0.26/getting-started.html | 46 +++++++++---------- docs/0.26/handling-touches.html | 2 +- docs/0.26/integration-with-existing-apps.html | 12 ++--- docs/0.26/linking-libraries-ios.html | 6 +-- docs/0.26/navigation.html | 2 +- docs/0.26/performance.html | 26 +++++------ docs/0.26/running-on-device.html | 10 ++-- docs/0.27/app-extensions.html | 2 +- docs/0.27/button.html | 2 +- docs/0.27/debugging.html | 10 ++-- docs/0.27/getting-started.html | 46 +++++++++---------- docs/0.27/handling-touches.html | 2 +- docs/0.27/integration-with-existing-apps.html | 12 ++--- docs/0.27/linking-libraries-ios.html | 6 +-- docs/0.27/navigation.html | 2 +- docs/0.27/performance.html | 26 +++++------ docs/0.27/running-on-device.html | 10 ++-- docs/0.28/app-extensions.html | 2 +- docs/0.28/button.html | 2 +- docs/0.28/debugging.html | 10 ++-- docs/0.28/getting-started.html | 46 +++++++++---------- docs/0.28/handling-touches.html | 2 +- docs/0.28/integration-with-existing-apps.html | 12 ++--- docs/0.28/linking-libraries-ios.html | 6 +-- docs/0.28/navigation.html | 2 +- docs/0.28/performance.html | 26 +++++------ docs/0.28/running-on-device.html | 10 ++-- docs/0.29/app-extensions.html | 2 +- docs/0.29/button.html | 2 +- docs/0.29/debugging.html | 10 ++-- docs/0.29/getting-started.html | 46 +++++++++---------- docs/0.29/handling-touches.html | 2 +- docs/0.29/integration-with-existing-apps.html | 12 ++--- docs/0.29/linking-libraries-ios.html | 6 +-- docs/0.29/navigation.html | 2 +- docs/0.29/performance.html | 26 +++++------ docs/0.29/running-on-device.html | 10 ++-- docs/0.30/app-extensions.html | 2 +- docs/0.30/button.html | 2 +- docs/0.30/debugging.html | 10 ++-- docs/0.30/getting-started.html | 46 +++++++++---------- docs/0.30/handling-touches.html | 2 +- docs/0.30/integration-with-existing-apps.html | 12 ++--- docs/0.30/linking-libraries-ios.html | 6 +-- docs/0.30/navigation.html | 2 +- docs/0.30/performance.html | 26 +++++------ docs/0.30/running-on-device.html | 10 ++-- docs/0.31/app-extensions.html | 2 +- docs/0.31/button.html | 2 +- docs/0.31/debugging.html | 10 ++-- docs/0.31/getting-started.html | 46 +++++++++---------- docs/0.31/handling-touches.html | 2 +- docs/0.31/integration-with-existing-apps.html | 12 ++--- docs/0.31/linking-libraries-ios.html | 6 +-- docs/0.31/navigation.html | 2 +- docs/0.31/performance.html | 26 +++++------ docs/0.31/running-on-device.html | 10 ++-- docs/0.32/app-extensions.html | 2 +- docs/0.32/button.html | 2 +- docs/0.32/debugging.html | 10 ++-- docs/0.32/getting-started.html | 46 +++++++++---------- docs/0.32/handling-touches.html | 2 +- docs/0.32/integration-with-existing-apps.html | 12 ++--- docs/0.32/linking-libraries-ios.html | 6 +-- docs/0.32/navigation.html | 2 +- docs/0.32/performance.html | 26 +++++------ docs/0.32/running-on-device.html | 10 ++-- docs/0.33/app-extensions.html | 2 +- docs/0.33/button.html | 2 +- docs/0.33/debugging.html | 10 ++-- docs/0.33/getting-started.html | 46 +++++++++---------- docs/0.33/handling-touches.html | 2 +- docs/0.33/integration-with-existing-apps.html | 12 ++--- docs/0.33/linking-libraries-ios.html | 6 +-- docs/0.33/navigation.html | 2 +- docs/0.33/performance.html | 26 +++++------ docs/0.33/running-on-device.html | 10 ++-- docs/0.34/app-extensions.html | 2 +- docs/0.34/button.html | 2 +- docs/0.34/debugging.html | 10 ++-- docs/0.34/getting-started.html | 46 +++++++++---------- docs/0.34/handling-touches.html | 2 +- docs/0.34/integration-with-existing-apps.html | 12 ++--- docs/0.34/linking-libraries-ios.html | 6 +-- docs/0.34/navigation.html | 2 +- docs/0.34/performance.html | 26 +++++------ docs/0.34/running-on-device.html | 10 ++-- docs/0.35/app-extensions.html | 2 +- docs/0.35/button.html | 2 +- docs/0.35/debugging.html | 10 ++-- docs/0.35/getting-started.html | 46 +++++++++---------- docs/0.35/handling-touches.html | 2 +- docs/0.35/integration-with-existing-apps.html | 12 ++--- docs/0.35/linking-libraries-ios.html | 6 +-- docs/0.35/navigation.html | 2 +- docs/0.35/performance.html | 26 +++++------ docs/0.35/running-on-device.html | 10 ++-- docs/0.36/app-extensions.html | 2 +- docs/0.36/button.html | 2 +- docs/0.36/debugging.html | 10 ++-- docs/0.36/getting-started.html | 46 +++++++++---------- docs/0.36/handling-touches.html | 2 +- docs/0.36/integration-with-existing-apps.html | 12 ++--- docs/0.36/linking-libraries-ios.html | 6 +-- docs/0.36/navigation.html | 2 +- docs/0.36/performance.html | 26 +++++------ docs/0.36/running-on-device.html | 10 ++-- docs/0.37/app-extensions.html | 2 +- docs/0.37/button.html | 2 +- docs/0.37/debugging.html | 10 ++-- docs/0.37/getting-started.html | 46 +++++++++---------- docs/0.37/handling-touches.html | 2 +- docs/0.37/integration-with-existing-apps.html | 12 ++--- docs/0.37/linking-libraries-ios.html | 6 +-- docs/0.37/navigation.html | 2 +- docs/0.37/performance.html | 26 +++++------ docs/0.37/running-on-device.html | 10 ++-- docs/0.38/app-extensions.html | 2 +- docs/0.38/button.html | 2 +- docs/0.38/debugging.html | 10 ++-- docs/0.38/getting-started.html | 46 +++++++++---------- docs/0.38/handling-touches.html | 2 +- docs/0.38/integration-with-existing-apps.html | 12 ++--- docs/0.38/linking-libraries-ios.html | 6 +-- docs/0.38/navigation.html | 2 +- docs/0.38/performance.html | 26 +++++------ docs/0.38/running-on-device.html | 10 ++-- docs/0.39/app-extensions.html | 2 +- docs/0.39/button.html | 2 +- docs/0.39/debugging.html | 10 ++-- docs/0.39/getting-started.html | 46 +++++++++---------- docs/0.39/handling-touches.html | 2 +- docs/0.39/integration-with-existing-apps.html | 12 ++--- docs/0.39/linking-libraries-ios.html | 6 +-- docs/0.39/navigation.html | 2 +- docs/0.39/performance.html | 26 +++++------ docs/0.39/running-on-device.html | 10 ++-- docs/0.40/app-extensions.html | 2 +- docs/0.40/button.html | 2 +- docs/0.40/debugging.html | 10 ++-- docs/0.40/getting-started.html | 46 +++++++++---------- docs/0.40/handling-touches.html | 2 +- docs/0.40/integration-with-existing-apps.html | 12 ++--- docs/0.40/linking-libraries-ios.html | 6 +-- docs/0.40/navigation.html | 2 +- docs/0.40/performance.html | 26 +++++------ docs/0.40/running-on-device.html | 10 ++-- docs/0.41/app-extensions.html | 2 +- docs/0.41/button.html | 2 +- docs/0.41/debugging.html | 10 ++-- docs/0.41/getting-started.html | 46 +++++++++---------- docs/0.41/handling-touches.html | 2 +- docs/0.41/integration-with-existing-apps.html | 12 ++--- docs/0.41/linking-libraries-ios.html | 6 +-- docs/0.41/navigation.html | 2 +- docs/0.41/performance.html | 26 +++++------ docs/0.41/running-on-device.html | 10 ++-- docs/0.42/app-extensions.html | 2 +- docs/0.42/button.html | 2 +- docs/0.42/debugging.html | 10 ++-- docs/0.42/getting-started.html | 46 +++++++++---------- docs/0.42/handling-touches.html | 2 +- docs/0.42/integration-with-existing-apps.html | 12 ++--- docs/0.42/linking-libraries-ios.html | 6 +-- docs/0.42/navigation.html | 2 +- docs/0.42/performance.html | 26 +++++------ docs/0.42/running-on-device.html | 10 ++-- docs/0.43/app-extensions.html | 2 +- docs/0.43/button.html | 2 +- docs/0.43/debugging.html | 10 ++-- docs/0.43/getting-started.html | 46 +++++++++---------- docs/0.43/handling-touches.html | 2 +- docs/0.43/integration-with-existing-apps.html | 12 ++--- docs/0.43/linking-libraries-ios.html | 6 +-- docs/0.43/navigation.html | 2 +- docs/0.43/performance.html | 26 +++++------ docs/0.43/running-on-device.html | 10 ++-- docs/0.44/app-extensions.html | 2 +- docs/0.44/button.html | 2 +- docs/0.44/debugging.html | 10 ++-- docs/0.44/getting-started.html | 46 +++++++++---------- docs/0.44/handling-touches.html | 2 +- docs/0.44/integration-with-existing-apps.html | 12 ++--- docs/0.44/linking-libraries-ios.html | 6 +-- docs/0.44/navigation.html | 2 +- docs/0.44/performance.html | 26 +++++------ docs/0.44/running-on-device.html | 10 ++-- docs/0.45/app-extensions.html | 2 +- docs/0.45/button.html | 2 +- docs/0.45/debugging.html | 10 ++-- docs/0.45/getting-started.html | 46 +++++++++---------- docs/0.45/handling-touches.html | 2 +- docs/0.45/integration-with-existing-apps.html | 12 ++--- docs/0.45/linking-libraries-ios.html | 6 +-- docs/0.45/navigation.html | 2 +- docs/0.45/performance.html | 26 +++++------ docs/0.45/running-on-device.html | 10 ++-- docs/0.46/app-extensions.html | 2 +- docs/0.46/button.html | 2 +- docs/0.46/debugging.html | 10 ++-- docs/0.46/getting-started.html | 46 +++++++++---------- docs/0.46/handling-touches.html | 2 +- docs/0.46/integration-with-existing-apps.html | 12 ++--- docs/0.46/linking-libraries-ios.html | 6 +-- docs/0.46/navigation.html | 2 +- docs/0.46/performance.html | 26 +++++------ docs/0.46/running-on-device.html | 10 ++-- docs/0.47/app-extensions.html | 2 +- docs/0.47/button.html | 2 +- docs/0.47/debugging.html | 10 ++-- docs/0.47/getting-started.html | 46 +++++++++---------- docs/0.47/handling-touches.html | 2 +- docs/0.47/integration-with-existing-apps.html | 12 ++--- docs/0.47/linking-libraries-ios.html | 6 +-- docs/0.47/navigation.html | 2 +- docs/0.47/performance.html | 26 +++++------ docs/0.47/running-on-device.html | 10 ++-- docs/0.48/app-extensions.html | 2 +- docs/0.48/button.html | 2 +- docs/0.48/debugging.html | 10 ++-- docs/0.48/getting-started.html | 46 +++++++++---------- docs/0.48/handling-touches.html | 2 +- docs/0.48/integration-with-existing-apps.html | 12 ++--- docs/0.48/linking-libraries-ios.html | 6 +-- docs/0.48/navigation.html | 2 +- docs/0.48/performance.html | 26 +++++------ docs/0.48/running-on-device.html | 10 ++-- docs/0.49/app-extensions.html | 2 +- docs/0.49/button.html | 2 +- docs/0.49/debugging.html | 10 ++-- docs/0.49/getting-started.html | 46 +++++++++---------- docs/0.49/handling-touches.html | 2 +- docs/0.49/integration-with-existing-apps.html | 12 ++--- docs/0.49/linking-libraries-ios.html | 6 +-- docs/0.49/navigation.html | 2 +- docs/0.49/performance.html | 26 +++++------ docs/0.49/running-on-device.html | 10 ++-- docs/0.5/app-extensions.html | 2 +- docs/0.5/button.html | 2 +- docs/0.5/debugging.html | 10 ++-- docs/0.5/getting-started.html | 46 +++++++++---------- docs/0.5/handling-touches.html | 2 +- docs/0.5/integration-with-existing-apps.html | 12 ++--- docs/0.5/linking-libraries-ios.html | 6 +-- docs/0.5/navigation.html | 2 +- docs/0.5/performance.html | 26 +++++------ docs/0.5/running-on-device.html | 10 ++-- docs/0.50/app-extensions.html | 2 +- docs/0.50/button.html | 2 +- docs/0.50/debugging.html | 10 ++-- docs/0.50/getting-started.html | 46 +++++++++---------- docs/0.50/handling-touches.html | 2 +- docs/0.50/integration-with-existing-apps.html | 12 ++--- docs/0.50/linking-libraries-ios.html | 6 +-- docs/0.50/navigation.html | 2 +- docs/0.50/performance.html | 26 +++++------ docs/0.50/running-on-device.html | 10 ++-- docs/0.6/app-extensions.html | 2 +- docs/0.6/button.html | 2 +- docs/0.6/debugging.html | 10 ++-- docs/0.6/getting-started.html | 46 +++++++++---------- docs/0.6/handling-touches.html | 2 +- docs/0.6/integration-with-existing-apps.html | 12 ++--- docs/0.6/linking-libraries-ios.html | 6 +-- docs/0.6/navigation.html | 2 +- docs/0.6/performance.html | 26 +++++------ docs/0.6/running-on-device.html | 10 ++-- docs/0.7/app-extensions.html | 2 +- docs/0.7/button.html | 2 +- docs/0.7/debugging.html | 10 ++-- docs/0.7/getting-started.html | 46 +++++++++---------- docs/0.7/handling-touches.html | 2 +- docs/0.7/integration-with-existing-apps.html | 12 ++--- docs/0.7/linking-libraries-ios.html | 6 +-- docs/0.7/navigation.html | 2 +- docs/0.7/performance.html | 26 +++++------ docs/0.7/running-on-device.html | 10 ++-- docs/0.8/app-extensions.html | 2 +- docs/0.8/button.html | 2 +- docs/0.8/debugging.html | 10 ++-- docs/0.8/getting-started.html | 46 +++++++++---------- docs/0.8/handling-touches.html | 2 +- docs/0.8/integration-with-existing-apps.html | 12 ++--- docs/0.8/linking-libraries-ios.html | 6 +-- docs/0.8/navigation.html | 2 +- docs/0.8/performance.html | 26 +++++------ docs/0.8/running-on-device.html | 10 ++-- docs/0.9/app-extensions.html | 2 +- docs/0.9/button.html | 2 +- docs/0.9/debugging.html | 10 ++-- docs/0.9/getting-started.html | 46 +++++++++---------- docs/0.9/handling-touches.html | 2 +- docs/0.9/integration-with-existing-apps.html | 12 ++--- docs/0.9/linking-libraries-ios.html | 6 +-- docs/0.9/navigation.html | 2 +- docs/0.9/performance.html | 26 +++++------ docs/0.9/running-on-device.html | 10 ++-- docs/app-extensions.html | 2 +- docs/button.html | 2 +- docs/debugging.html | 10 ++-- docs/getting-started.html | 46 +++++++++---------- docs/handling-touches.html | 2 +- docs/image.html | 4 +- docs/integration-with-existing-apps.html | 12 ++--- docs/linking-libraries-ios.html | 6 +-- docs/navigation.html | 2 +- docs/next/app-extensions.html | 2 +- docs/next/button.html | 2 +- docs/next/debugging.html | 10 ++-- docs/next/getting-started.html | 46 +++++++++---------- docs/next/handling-touches.html | 2 +- docs/next/image.html | 4 +- docs/next/integration-with-existing-apps.html | 12 ++--- docs/next/linking-libraries-ios.html | 6 +-- docs/next/navigation.html | 2 +- docs/next/performance.html | 26 +++++------ docs/next/running-on-device.html | 10 ++-- docs/performance.html | 26 +++++------ docs/running-on-device.html | 10 ++-- 482 files changed, 2836 insertions(+), 2836 deletions(-) diff --git a/docs/0.10/app-extensions.html b/docs/0.10/app-extensions.html index b4ccfa41615..876f7b68930 100644 --- a/docs/0.10/app-extensions.html +++ b/docs/0.10/app-extensions.html @@ -10,7 +10,7 @@

We highly recommend that you watch Conrad Kramer's talk on Memory Use in Extensions to learn more about this topic.

Today widget

The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':

-

+

Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use Xcode's Instruments to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.

To experiment with the limits of React Native Today widget implementations, try extending the example project in react-native-today-widget.

Other app extensions

diff --git a/docs/0.10/button.html b/docs/0.10/button.html index c1cb46e931c..ac6bdf72a56 100644 --- a/docs/0.10/button.html +++ b/docs/0.10/button.html @@ -1,6 +1,6 @@ Button · React Native

React Native

0.10

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.10/debugging.html b/docs/0.10/debugging.html index 85d8aa12678..44a2d575c94 100644 --- a/docs/0.10/debugging.html +++ b/docs/0.10/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.10/getting-started.html b/docs/0.10/getting-started.html index 0105e655792..11788937f71 100644 --- a/docs/0.10/getting-started.html +++ b/docs/0.10/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.10/handling-touches.html b/docs/0.10/handling-touches.html index 1558df155b6..efa2ad1ebf0 100644 --- a/docs/0.10/handling-touches.html +++ b/docs/0.10/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.10/integration-with-existing-apps.html b/docs/0.10/integration-with-existing-apps.html index 27e87512641..f4291af3e2c 100644 --- a/docs/0.10/integration-with-existing-apps.html +++ b/docs/0.10/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.10/linking-libraries-ios.html b/docs/0.10/linking-libraries-ios.html
index 39e88bf2a1a..29bfdb33e48 100644
--- a/docs/0.10/linking-libraries-ios.html
+++ b/docs/0.10/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.11

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.11/debugging.html b/docs/0.11/debugging.html index 9bb525530cc..81f49feffae 100644 --- a/docs/0.11/debugging.html +++ b/docs/0.11/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.11/getting-started.html b/docs/0.11/getting-started.html index 6d940f73763..c7d7f31926c 100644 --- a/docs/0.11/getting-started.html +++ b/docs/0.11/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.11/handling-touches.html b/docs/0.11/handling-touches.html index 6e37f9e8c38..5d78f49861c 100644 --- a/docs/0.11/handling-touches.html +++ b/docs/0.11/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.11/integration-with-existing-apps.html b/docs/0.11/integration-with-existing-apps.html index 4fad86d4f46..f022600a891 100644 --- a/docs/0.11/integration-with-existing-apps.html +++ b/docs/0.11/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.11/linking-libraries-ios.html b/docs/0.11/linking-libraries-ios.html
index 1aa66ee5492..a9b55e7cf7e 100644
--- a/docs/0.11/linking-libraries-ios.html
+++ b/docs/0.11/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.12

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.12/debugging.html b/docs/0.12/debugging.html index 8930743f48b..fb1f6e66a23 100644 --- a/docs/0.12/debugging.html +++ b/docs/0.12/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.12/getting-started.html b/docs/0.12/getting-started.html index ad6c9f112fa..4d9647fe492 100644 --- a/docs/0.12/getting-started.html +++ b/docs/0.12/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.12/handling-touches.html b/docs/0.12/handling-touches.html index 69e22395bb4..32cc3815b24 100644 --- a/docs/0.12/handling-touches.html +++ b/docs/0.12/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.12/integration-with-existing-apps.html b/docs/0.12/integration-with-existing-apps.html index eb37b4a8172..163d0eb16d2 100644 --- a/docs/0.12/integration-with-existing-apps.html +++ b/docs/0.12/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.12/linking-libraries-ios.html b/docs/0.12/linking-libraries-ios.html
index 25d1ec8232e..6291a894cee 100644
--- a/docs/0.12/linking-libraries-ios.html
+++ b/docs/0.12/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.13

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.13/debugging.html b/docs/0.13/debugging.html index ace8c4eaa73..8be2bd421b9 100644 --- a/docs/0.13/debugging.html +++ b/docs/0.13/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.13/getting-started.html b/docs/0.13/getting-started.html index 8c84880e3c2..44bae309284 100644 --- a/docs/0.13/getting-started.html +++ b/docs/0.13/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.13/handling-touches.html b/docs/0.13/handling-touches.html index ecacc065583..2e39da62057 100644 --- a/docs/0.13/handling-touches.html +++ b/docs/0.13/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.13/integration-with-existing-apps.html b/docs/0.13/integration-with-existing-apps.html index 6f33c9ee25f..34b3b7523db 100644 --- a/docs/0.13/integration-with-existing-apps.html +++ b/docs/0.13/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.13/linking-libraries-ios.html b/docs/0.13/linking-libraries-ios.html
index 0a72f544fca..0793614c6bd 100644
--- a/docs/0.13/linking-libraries-ios.html
+++ b/docs/0.13/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.14

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.14/debugging.html b/docs/0.14/debugging.html index 879dd2e8b95..daf3b0b1c76 100644 --- a/docs/0.14/debugging.html +++ b/docs/0.14/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.14/getting-started.html b/docs/0.14/getting-started.html index 46265a2eaf0..428d1b7b18d 100644 --- a/docs/0.14/getting-started.html +++ b/docs/0.14/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.14/handling-touches.html b/docs/0.14/handling-touches.html index b1ac8742413..16b508fc52e 100644 --- a/docs/0.14/handling-touches.html +++ b/docs/0.14/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.14/integration-with-existing-apps.html b/docs/0.14/integration-with-existing-apps.html index 3cef823ecb7..11e0d6d11b0 100644 --- a/docs/0.14/integration-with-existing-apps.html +++ b/docs/0.14/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.14/linking-libraries-ios.html b/docs/0.14/linking-libraries-ios.html
index 3337c80d586..0f7c586a2c6 100644
--- a/docs/0.14/linking-libraries-ios.html
+++ b/docs/0.14/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.15

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.15/debugging.html b/docs/0.15/debugging.html index 61439ff7767..8d8ec604d87 100644 --- a/docs/0.15/debugging.html +++ b/docs/0.15/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.15/getting-started.html b/docs/0.15/getting-started.html index a942f14fe8b..e154e22e104 100644 --- a/docs/0.15/getting-started.html +++ b/docs/0.15/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.15/handling-touches.html b/docs/0.15/handling-touches.html index 553378ed2ac..1abdcfb98d3 100644 --- a/docs/0.15/handling-touches.html +++ b/docs/0.15/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.15/integration-with-existing-apps.html b/docs/0.15/integration-with-existing-apps.html index 955a64efa52..6740347a817 100644 --- a/docs/0.15/integration-with-existing-apps.html +++ b/docs/0.15/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.15/linking-libraries-ios.html b/docs/0.15/linking-libraries-ios.html
index cf8d7090119..afd3c35fd7d 100644
--- a/docs/0.15/linking-libraries-ios.html
+++ b/docs/0.15/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.16

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.16/debugging.html b/docs/0.16/debugging.html index 82cfbaaef74..1b7705dde65 100644 --- a/docs/0.16/debugging.html +++ b/docs/0.16/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.16/getting-started.html b/docs/0.16/getting-started.html index 0027f501bdd..2039d70e770 100644 --- a/docs/0.16/getting-started.html +++ b/docs/0.16/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.16/handling-touches.html b/docs/0.16/handling-touches.html index 0e16271f98c..8995ee697cb 100644 --- a/docs/0.16/handling-touches.html +++ b/docs/0.16/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.16/integration-with-existing-apps.html b/docs/0.16/integration-with-existing-apps.html index 65697503ef3..4f80b792928 100644 --- a/docs/0.16/integration-with-existing-apps.html +++ b/docs/0.16/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.16/linking-libraries-ios.html b/docs/0.16/linking-libraries-ios.html
index b0cf7e5d9df..dd0c72d1868 100644
--- a/docs/0.16/linking-libraries-ios.html
+++ b/docs/0.16/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.17

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.17/debugging.html b/docs/0.17/debugging.html index 7c523df4be0..c9f4eb68801 100644 --- a/docs/0.17/debugging.html +++ b/docs/0.17/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.17/getting-started.html b/docs/0.17/getting-started.html index c3175080999..d8ebdc82a7e 100644 --- a/docs/0.17/getting-started.html +++ b/docs/0.17/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.17/handling-touches.html b/docs/0.17/handling-touches.html index e0ec836a89e..9da472307d6 100644 --- a/docs/0.17/handling-touches.html +++ b/docs/0.17/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.17/integration-with-existing-apps.html b/docs/0.17/integration-with-existing-apps.html index e37577e7d46..3bf02820bda 100644 --- a/docs/0.17/integration-with-existing-apps.html +++ b/docs/0.17/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.17/linking-libraries-ios.html b/docs/0.17/linking-libraries-ios.html
index b917b564b88..b2d19878401 100644
--- a/docs/0.17/linking-libraries-ios.html
+++ b/docs/0.17/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.18

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.18/debugging.html b/docs/0.18/debugging.html index 46e916a8b56..d0273ca2ba2 100644 --- a/docs/0.18/debugging.html +++ b/docs/0.18/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.18/getting-started.html b/docs/0.18/getting-started.html index 862a579f467..bd107e0957c 100644 --- a/docs/0.18/getting-started.html +++ b/docs/0.18/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.18/handling-touches.html b/docs/0.18/handling-touches.html index 76c90744ab8..a66735cfc6f 100644 --- a/docs/0.18/handling-touches.html +++ b/docs/0.18/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.18/integration-with-existing-apps.html b/docs/0.18/integration-with-existing-apps.html index 1d17282418a..da94285f78a 100644 --- a/docs/0.18/integration-with-existing-apps.html +++ b/docs/0.18/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.18/linking-libraries-ios.html b/docs/0.18/linking-libraries-ios.html
index b4e9aaea44b..6054f0e4bec 100644
--- a/docs/0.18/linking-libraries-ios.html
+++ b/docs/0.18/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.19

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.19/debugging.html b/docs/0.19/debugging.html index f78ee8b78e2..d58cf48b774 100644 --- a/docs/0.19/debugging.html +++ b/docs/0.19/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.19/getting-started.html b/docs/0.19/getting-started.html index c3651c38658..81572df9863 100644 --- a/docs/0.19/getting-started.html +++ b/docs/0.19/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.19/handling-touches.html b/docs/0.19/handling-touches.html index e086c4af2e9..bdfcfd76c61 100644 --- a/docs/0.19/handling-touches.html +++ b/docs/0.19/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.19/integration-with-existing-apps.html b/docs/0.19/integration-with-existing-apps.html index 3d1e7f1eb61..3f8549ee4cd 100644 --- a/docs/0.19/integration-with-existing-apps.html +++ b/docs/0.19/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.19/linking-libraries-ios.html b/docs/0.19/linking-libraries-ios.html
index 61205a608fe..ff6918a9630 100644
--- a/docs/0.19/linking-libraries-ios.html
+++ b/docs/0.19/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.20

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.20/debugging.html b/docs/0.20/debugging.html index 3b22810f3bc..48961f857f5 100644 --- a/docs/0.20/debugging.html +++ b/docs/0.20/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.20/getting-started.html b/docs/0.20/getting-started.html index 813ba36085f..011cf796519 100644 --- a/docs/0.20/getting-started.html +++ b/docs/0.20/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.20/handling-touches.html b/docs/0.20/handling-touches.html index 7f17cfaa1b9..ebf03e1c635 100644 --- a/docs/0.20/handling-touches.html +++ b/docs/0.20/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.20/integration-with-existing-apps.html b/docs/0.20/integration-with-existing-apps.html index 2c354c5b0f6..c7fdcb1e931 100644 --- a/docs/0.20/integration-with-existing-apps.html +++ b/docs/0.20/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.20/linking-libraries-ios.html b/docs/0.20/linking-libraries-ios.html
index 9571db9e883..ef4e5112b3e 100644
--- a/docs/0.20/linking-libraries-ios.html
+++ b/docs/0.20/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.21

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.21/debugging.html b/docs/0.21/debugging.html index 6e0820dd85c..c76ae956751 100644 --- a/docs/0.21/debugging.html +++ b/docs/0.21/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.21/getting-started.html b/docs/0.21/getting-started.html index 32fdafc08e4..da29999b172 100644 --- a/docs/0.21/getting-started.html +++ b/docs/0.21/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.21/handling-touches.html b/docs/0.21/handling-touches.html index b8600dab8a8..1e2d7c29069 100644 --- a/docs/0.21/handling-touches.html +++ b/docs/0.21/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.21/integration-with-existing-apps.html b/docs/0.21/integration-with-existing-apps.html index 81128188a63..f319d98d6f7 100644 --- a/docs/0.21/integration-with-existing-apps.html +++ b/docs/0.21/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.21/linking-libraries-ios.html b/docs/0.21/linking-libraries-ios.html
index 47b4372995a..a8ff903bb95 100644
--- a/docs/0.21/linking-libraries-ios.html
+++ b/docs/0.21/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.22

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.22/debugging.html b/docs/0.22/debugging.html index 2be42924ca8..00e61c0342e 100644 --- a/docs/0.22/debugging.html +++ b/docs/0.22/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.22/getting-started.html b/docs/0.22/getting-started.html index c05d1b7a66a..1cd2784e343 100644 --- a/docs/0.22/getting-started.html +++ b/docs/0.22/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.22/handling-touches.html b/docs/0.22/handling-touches.html index eda20ae47ba..b14ddf55039 100644 --- a/docs/0.22/handling-touches.html +++ b/docs/0.22/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.22/integration-with-existing-apps.html b/docs/0.22/integration-with-existing-apps.html index 3c527ec88bf..1c6263c4a00 100644 --- a/docs/0.22/integration-with-existing-apps.html +++ b/docs/0.22/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.22/linking-libraries-ios.html b/docs/0.22/linking-libraries-ios.html
index fc88f894384..59e7e669067 100644
--- a/docs/0.22/linking-libraries-ios.html
+++ b/docs/0.22/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.23

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.23/debugging.html b/docs/0.23/debugging.html index 6502a1c27bb..6c7f415ef83 100644 --- a/docs/0.23/debugging.html +++ b/docs/0.23/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.23/getting-started.html b/docs/0.23/getting-started.html index 81055f6233e..6ef24bec888 100644 --- a/docs/0.23/getting-started.html +++ b/docs/0.23/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.23/handling-touches.html b/docs/0.23/handling-touches.html index e38f31a84b7..4106c243d01 100644 --- a/docs/0.23/handling-touches.html +++ b/docs/0.23/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.23/integration-with-existing-apps.html b/docs/0.23/integration-with-existing-apps.html index 4b8f1d09b8b..3def437f810 100644 --- a/docs/0.23/integration-with-existing-apps.html +++ b/docs/0.23/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.23/linking-libraries-ios.html b/docs/0.23/linking-libraries-ios.html
index c08414c69ee..8164940b705 100644
--- a/docs/0.23/linking-libraries-ios.html
+++ b/docs/0.23/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.24

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.24/debugging.html b/docs/0.24/debugging.html index 2c8a3477688..3396444348d 100644 --- a/docs/0.24/debugging.html +++ b/docs/0.24/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.24/getting-started.html b/docs/0.24/getting-started.html index 5fe2e806d84..3360bd1dc69 100644 --- a/docs/0.24/getting-started.html +++ b/docs/0.24/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.24/handling-touches.html b/docs/0.24/handling-touches.html index 2b8a65b87b3..6ef7db87853 100644 --- a/docs/0.24/handling-touches.html +++ b/docs/0.24/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.24/integration-with-existing-apps.html b/docs/0.24/integration-with-existing-apps.html index ce190306997..f99fabe1694 100644 --- a/docs/0.24/integration-with-existing-apps.html +++ b/docs/0.24/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.24/linking-libraries-ios.html b/docs/0.24/linking-libraries-ios.html
index 640ec05e61b..74bc0f7f07d 100644
--- a/docs/0.24/linking-libraries-ios.html
+++ b/docs/0.24/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.25

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.25/debugging.html b/docs/0.25/debugging.html index 85965b68285..7ab9d0ff748 100644 --- a/docs/0.25/debugging.html +++ b/docs/0.25/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.25/getting-started.html b/docs/0.25/getting-started.html index bb396164c30..f0d2291f49d 100644 --- a/docs/0.25/getting-started.html +++ b/docs/0.25/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.25/handling-touches.html b/docs/0.25/handling-touches.html index 9479fb2cedf..5e5733d89cb 100644 --- a/docs/0.25/handling-touches.html +++ b/docs/0.25/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.25/integration-with-existing-apps.html b/docs/0.25/integration-with-existing-apps.html index ecd876f6610..6746db3c311 100644 --- a/docs/0.25/integration-with-existing-apps.html +++ b/docs/0.25/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.25/linking-libraries-ios.html b/docs/0.25/linking-libraries-ios.html
index 73e6b4a10e8..3d3a4f8cb00 100644
--- a/docs/0.25/linking-libraries-ios.html
+++ b/docs/0.25/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.26

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.26/debugging.html b/docs/0.26/debugging.html index 8b893d77a5f..41a4ba4b2b2 100644 --- a/docs/0.26/debugging.html +++ b/docs/0.26/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.26/getting-started.html b/docs/0.26/getting-started.html index 7470cb1d231..856275075bd 100644 --- a/docs/0.26/getting-started.html +++ b/docs/0.26/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.26/handling-touches.html b/docs/0.26/handling-touches.html index 530faa2c869..62bcff57906 100644 --- a/docs/0.26/handling-touches.html +++ b/docs/0.26/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.26/integration-with-existing-apps.html b/docs/0.26/integration-with-existing-apps.html index f860d3f54c6..afec1046727 100644 --- a/docs/0.26/integration-with-existing-apps.html +++ b/docs/0.26/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.26/linking-libraries-ios.html b/docs/0.26/linking-libraries-ios.html
index 8f819450488..c6c0893c929 100644
--- a/docs/0.26/linking-libraries-ios.html
+++ b/docs/0.26/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.27

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.27/debugging.html b/docs/0.27/debugging.html index 7381f002e4c..69ca71f28b5 100644 --- a/docs/0.27/debugging.html +++ b/docs/0.27/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.27/getting-started.html b/docs/0.27/getting-started.html index f87f96b36a8..fa9641b5f0e 100644 --- a/docs/0.27/getting-started.html +++ b/docs/0.27/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.27/handling-touches.html b/docs/0.27/handling-touches.html index 0a8d0948438..ea42198d30e 100644 --- a/docs/0.27/handling-touches.html +++ b/docs/0.27/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.27/integration-with-existing-apps.html b/docs/0.27/integration-with-existing-apps.html index 2a2aba02634..b20a3326299 100644 --- a/docs/0.27/integration-with-existing-apps.html +++ b/docs/0.27/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.27/linking-libraries-ios.html b/docs/0.27/linking-libraries-ios.html
index bfc7da7b199..eb4176a358f 100644
--- a/docs/0.27/linking-libraries-ios.html
+++ b/docs/0.27/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.28

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.28/debugging.html b/docs/0.28/debugging.html index 7b00480ae02..19490df7d64 100644 --- a/docs/0.28/debugging.html +++ b/docs/0.28/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.28/getting-started.html b/docs/0.28/getting-started.html index 25f37b56bec..475d13b03ae 100644 --- a/docs/0.28/getting-started.html +++ b/docs/0.28/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.28/handling-touches.html b/docs/0.28/handling-touches.html index abf8db260e2..50afa21d5a7 100644 --- a/docs/0.28/handling-touches.html +++ b/docs/0.28/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.28/integration-with-existing-apps.html b/docs/0.28/integration-with-existing-apps.html index 65157578d06..2a69b375231 100644 --- a/docs/0.28/integration-with-existing-apps.html +++ b/docs/0.28/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.28/linking-libraries-ios.html b/docs/0.28/linking-libraries-ios.html
index 42cfe2f2627..eaa8783a0c4 100644
--- a/docs/0.28/linking-libraries-ios.html
+++ b/docs/0.28/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.29

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.29/debugging.html b/docs/0.29/debugging.html index 44b85a0998a..8f5e33d3560 100644 --- a/docs/0.29/debugging.html +++ b/docs/0.29/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.29/getting-started.html b/docs/0.29/getting-started.html index af9a5be78d7..d41e02960ed 100644 --- a/docs/0.29/getting-started.html +++ b/docs/0.29/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.29/handling-touches.html b/docs/0.29/handling-touches.html index 4bb1aa10c8c..0ffd33ceee1 100644 --- a/docs/0.29/handling-touches.html +++ b/docs/0.29/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.29/integration-with-existing-apps.html b/docs/0.29/integration-with-existing-apps.html index 6f39b05621d..ff18c2dc27f 100644 --- a/docs/0.29/integration-with-existing-apps.html +++ b/docs/0.29/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.29/linking-libraries-ios.html b/docs/0.29/linking-libraries-ios.html
index 30fe64bf2b1..15921d10053 100644
--- a/docs/0.29/linking-libraries-ios.html
+++ b/docs/0.29/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.30

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.30/debugging.html b/docs/0.30/debugging.html index 33db9152d1f..11433c7a25b 100644 --- a/docs/0.30/debugging.html +++ b/docs/0.30/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.30/getting-started.html b/docs/0.30/getting-started.html index d32185188e5..53951df0a62 100644 --- a/docs/0.30/getting-started.html +++ b/docs/0.30/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.30/handling-touches.html b/docs/0.30/handling-touches.html index e120d15e7d2..226ceaab82b 100644 --- a/docs/0.30/handling-touches.html +++ b/docs/0.30/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.30/integration-with-existing-apps.html b/docs/0.30/integration-with-existing-apps.html index 93ae1ee5a18..e5021e87c85 100644 --- a/docs/0.30/integration-with-existing-apps.html +++ b/docs/0.30/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.30/linking-libraries-ios.html b/docs/0.30/linking-libraries-ios.html
index 1d1436cd7ba..c952f84f31d 100644
--- a/docs/0.30/linking-libraries-ios.html
+++ b/docs/0.30/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.31

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.31/debugging.html b/docs/0.31/debugging.html index 62a76003765..4e29e8f1000 100644 --- a/docs/0.31/debugging.html +++ b/docs/0.31/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.31/getting-started.html b/docs/0.31/getting-started.html index d58844e2925..41b5a7cdf6b 100644 --- a/docs/0.31/getting-started.html +++ b/docs/0.31/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.31/handling-touches.html b/docs/0.31/handling-touches.html index 686fd449427..0cbc3db1edf 100644 --- a/docs/0.31/handling-touches.html +++ b/docs/0.31/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.31/integration-with-existing-apps.html b/docs/0.31/integration-with-existing-apps.html index e90cc232138..70d0836ee3c 100644 --- a/docs/0.31/integration-with-existing-apps.html +++ b/docs/0.31/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.31/linking-libraries-ios.html b/docs/0.31/linking-libraries-ios.html
index 58953df6923..e7e738d1b8c 100644
--- a/docs/0.31/linking-libraries-ios.html
+++ b/docs/0.31/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.32

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.32/debugging.html b/docs/0.32/debugging.html index bc2edebfa54..400a3898d46 100644 --- a/docs/0.32/debugging.html +++ b/docs/0.32/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.32/getting-started.html b/docs/0.32/getting-started.html index 682afc08a00..ba49fe89a92 100644 --- a/docs/0.32/getting-started.html +++ b/docs/0.32/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.32/handling-touches.html b/docs/0.32/handling-touches.html index a115bdbc35c..f2d657eb66e 100644 --- a/docs/0.32/handling-touches.html +++ b/docs/0.32/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.32/integration-with-existing-apps.html b/docs/0.32/integration-with-existing-apps.html index aa2d6531d1f..35406d4b20a 100644 --- a/docs/0.32/integration-with-existing-apps.html +++ b/docs/0.32/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.32/linking-libraries-ios.html b/docs/0.32/linking-libraries-ios.html
index 96aabc4bbcb..1e0d81a9f73 100644
--- a/docs/0.32/linking-libraries-ios.html
+++ b/docs/0.32/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.33

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.33/debugging.html b/docs/0.33/debugging.html index dbdaa02e8de..f2658f6c33b 100644 --- a/docs/0.33/debugging.html +++ b/docs/0.33/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.33/getting-started.html b/docs/0.33/getting-started.html index 2e8e2d895ee..c41f9fe3fef 100644 --- a/docs/0.33/getting-started.html +++ b/docs/0.33/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.33/handling-touches.html b/docs/0.33/handling-touches.html index 44acdc82c5d..7894269b5b9 100644 --- a/docs/0.33/handling-touches.html +++ b/docs/0.33/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.33/integration-with-existing-apps.html b/docs/0.33/integration-with-existing-apps.html index 96bb8c92e1f..a2950062440 100644 --- a/docs/0.33/integration-with-existing-apps.html +++ b/docs/0.33/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.33/linking-libraries-ios.html b/docs/0.33/linking-libraries-ios.html
index df1e64c23a8..7cb1f7e654f 100644
--- a/docs/0.33/linking-libraries-ios.html
+++ b/docs/0.33/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.34

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.34/debugging.html b/docs/0.34/debugging.html index cc823448fd5..83c3813e8ca 100644 --- a/docs/0.34/debugging.html +++ b/docs/0.34/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.34/getting-started.html b/docs/0.34/getting-started.html index 40faa6933a8..a4fa2973f4e 100644 --- a/docs/0.34/getting-started.html +++ b/docs/0.34/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.34/handling-touches.html b/docs/0.34/handling-touches.html index cd9a02a8393..4b39a205459 100644 --- a/docs/0.34/handling-touches.html +++ b/docs/0.34/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.34/integration-with-existing-apps.html b/docs/0.34/integration-with-existing-apps.html index 15a68e1d8f5..3b0cc75b3c4 100644 --- a/docs/0.34/integration-with-existing-apps.html +++ b/docs/0.34/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.34/linking-libraries-ios.html b/docs/0.34/linking-libraries-ios.html
index 3aae545d5f1..0ba50fef9f9 100644
--- a/docs/0.34/linking-libraries-ios.html
+++ b/docs/0.34/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.35

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.35/debugging.html b/docs/0.35/debugging.html index 300485fabdc..82207d3185d 100644 --- a/docs/0.35/debugging.html +++ b/docs/0.35/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.35/getting-started.html b/docs/0.35/getting-started.html index 586e6bce722..5ad61b044bf 100644 --- a/docs/0.35/getting-started.html +++ b/docs/0.35/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.35/handling-touches.html b/docs/0.35/handling-touches.html index f11b1828b7b..334fb512bbc 100644 --- a/docs/0.35/handling-touches.html +++ b/docs/0.35/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.35/integration-with-existing-apps.html b/docs/0.35/integration-with-existing-apps.html index 90302183826..8e4c1ddbb89 100644 --- a/docs/0.35/integration-with-existing-apps.html +++ b/docs/0.35/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.35/linking-libraries-ios.html b/docs/0.35/linking-libraries-ios.html
index b40a8e65c0e..3bc0f1abbe4 100644
--- a/docs/0.35/linking-libraries-ios.html
+++ b/docs/0.35/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.36

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.36/debugging.html b/docs/0.36/debugging.html index 06c41ae1b7a..6205b27deb7 100644 --- a/docs/0.36/debugging.html +++ b/docs/0.36/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.36/getting-started.html b/docs/0.36/getting-started.html index f6fa256ecc4..3b13d150170 100644 --- a/docs/0.36/getting-started.html +++ b/docs/0.36/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.36/handling-touches.html b/docs/0.36/handling-touches.html index 0ebfe8986a5..a3fa960031f 100644 --- a/docs/0.36/handling-touches.html +++ b/docs/0.36/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.36/integration-with-existing-apps.html b/docs/0.36/integration-with-existing-apps.html index 863a3c95bfc..e1b58b10d6c 100644 --- a/docs/0.36/integration-with-existing-apps.html +++ b/docs/0.36/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.36/linking-libraries-ios.html b/docs/0.36/linking-libraries-ios.html
index e91b8e8d5e8..2837551a816 100644
--- a/docs/0.36/linking-libraries-ios.html
+++ b/docs/0.36/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity diff --git a/docs/0.37/debugging.html b/docs/0.37/debugging.html index e0c42f86a6d..d61767ed530 100644 --- a/docs/0.37/debugging.html +++ b/docs/0.37/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.37/getting-started.html b/docs/0.37/getting-started.html index 1f5e669bf98..a8e2afe96ac 100644 --- a/docs/0.37/getting-started.html +++ b/docs/0.37/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.37/handling-touches.html b/docs/0.37/handling-touches.html index 0b54f627cf0..81c4411d297 100644 --- a/docs/0.37/handling-touches.html +++ b/docs/0.37/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.37/integration-with-existing-apps.html b/docs/0.37/integration-with-existing-apps.html index 63f8ec034ad..defe027a5cb 100644 --- a/docs/0.37/integration-with-existing-apps.html +++ b/docs/0.37/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.37/linking-libraries-ios.html b/docs/0.37/linking-libraries-ios.html
index 7df58b35d59..9ff922870d7 100644
--- a/docs/0.37/linking-libraries-ios.html
+++ b/docs/0.37/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity diff --git a/docs/0.38/debugging.html b/docs/0.38/debugging.html index e25a8e66ddc..5f115567a98 100644 --- a/docs/0.38/debugging.html +++ b/docs/0.38/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.38/getting-started.html b/docs/0.38/getting-started.html index 1674cf74e7b..e8d4737d190 100644 --- a/docs/0.38/getting-started.html +++ b/docs/0.38/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.38/handling-touches.html b/docs/0.38/handling-touches.html index 236f7f4977e..5f5c7e38a51 100644 --- a/docs/0.38/handling-touches.html +++ b/docs/0.38/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.38/integration-with-existing-apps.html b/docs/0.38/integration-with-existing-apps.html index cf86c9cc295..a99fd065543 100644 --- a/docs/0.38/integration-with-existing-apps.html +++ b/docs/0.38/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.38/linking-libraries-ios.html b/docs/0.38/linking-libraries-ios.html
index 2043d168c03..a4f484e0778 100644
--- a/docs/0.38/linking-libraries-ios.html
+++ b/docs/0.38/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity diff --git a/docs/0.39/debugging.html b/docs/0.39/debugging.html index 904a42be350..f867cb7fd58 100644 --- a/docs/0.39/debugging.html +++ b/docs/0.39/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.39/getting-started.html b/docs/0.39/getting-started.html index 41e86760fc6..d677a6aaf25 100644 --- a/docs/0.39/getting-started.html +++ b/docs/0.39/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.39/handling-touches.html b/docs/0.39/handling-touches.html index 9a543407357..19b579bf21b 100644 --- a/docs/0.39/handling-touches.html +++ b/docs/0.39/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.39/integration-with-existing-apps.html b/docs/0.39/integration-with-existing-apps.html index f85618cfcea..82e7be9e348 100644 --- a/docs/0.39/integration-with-existing-apps.html +++ b/docs/0.39/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.39/linking-libraries-ios.html b/docs/0.39/linking-libraries-ios.html
index 3d795fc6de3..34539e96b4e 100644
--- a/docs/0.39/linking-libraries-ios.html
+++ b/docs/0.39/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity diff --git a/docs/0.40/debugging.html b/docs/0.40/debugging.html index abf0967b20c..d0bae6be564 100644 --- a/docs/0.40/debugging.html +++ b/docs/0.40/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.40/getting-started.html b/docs/0.40/getting-started.html index 27aa922802e..f0e2f1be779 100644 --- a/docs/0.40/getting-started.html +++ b/docs/0.40/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.40/handling-touches.html b/docs/0.40/handling-touches.html index 57873c56c35..fa68585d913 100644 --- a/docs/0.40/handling-touches.html +++ b/docs/0.40/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.40/integration-with-existing-apps.html b/docs/0.40/integration-with-existing-apps.html index 8ecbc0228cc..589218acf6b 100644 --- a/docs/0.40/integration-with-existing-apps.html +++ b/docs/0.40/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.40/linking-libraries-ios.html b/docs/0.40/linking-libraries-ios.html
index 53fbf3f5dc6..1c61baf8709 100644
--- a/docs/0.40/linking-libraries-ios.html
+++ b/docs/0.40/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity diff --git a/docs/0.41/debugging.html b/docs/0.41/debugging.html index 9993e3d518e..58daf674e95 100644 --- a/docs/0.41/debugging.html +++ b/docs/0.41/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.41/getting-started.html b/docs/0.41/getting-started.html index ea53640d1c5..7bf4b3956af 100644 --- a/docs/0.41/getting-started.html +++ b/docs/0.41/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.41/handling-touches.html b/docs/0.41/handling-touches.html index 0df5fe8820e..097b63038e9 100644 --- a/docs/0.41/handling-touches.html +++ b/docs/0.41/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.41/integration-with-existing-apps.html b/docs/0.41/integration-with-existing-apps.html index 889ca69fe6e..560b6fde5ba 100644 --- a/docs/0.41/integration-with-existing-apps.html +++ b/docs/0.41/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.41/linking-libraries-ios.html b/docs/0.41/linking-libraries-ios.html
index e0549d7d1d1..6c584c57558 100644
--- a/docs/0.41/linking-libraries-ios.html
+++ b/docs/0.41/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.42/debugging.html b/docs/0.42/debugging.html index dd97de7bcf3..531877348d8 100644 --- a/docs/0.42/debugging.html +++ b/docs/0.42/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.42/getting-started.html b/docs/0.42/getting-started.html index 2880f9223f9..5724a30c2ee 100644 --- a/docs/0.42/getting-started.html +++ b/docs/0.42/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.42/handling-touches.html b/docs/0.42/handling-touches.html index b0ecbbc7577..80241b27976 100644 --- a/docs/0.42/handling-touches.html +++ b/docs/0.42/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.42/integration-with-existing-apps.html b/docs/0.42/integration-with-existing-apps.html index b8e430902b9..1174af76f62 100644 --- a/docs/0.42/integration-with-existing-apps.html +++ b/docs/0.42/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.42/linking-libraries-ios.html b/docs/0.42/linking-libraries-ios.html
index 5cd46044ab9..6e544391f7c 100644
--- a/docs/0.42/linking-libraries-ios.html
+++ b/docs/0.42/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.43/debugging.html b/docs/0.43/debugging.html index 939b80869da..502cac7d393 100644 --- a/docs/0.43/debugging.html +++ b/docs/0.43/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.43/getting-started.html b/docs/0.43/getting-started.html index 502ef92b9ea..a45b3a0edcc 100644 --- a/docs/0.43/getting-started.html +++ b/docs/0.43/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.43/handling-touches.html b/docs/0.43/handling-touches.html index de94eebcd4f..07c459217ab 100644 --- a/docs/0.43/handling-touches.html +++ b/docs/0.43/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.43/integration-with-existing-apps.html b/docs/0.43/integration-with-existing-apps.html index 8de8930829f..9813297dbc2 100644 --- a/docs/0.43/integration-with-existing-apps.html +++ b/docs/0.43/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.43/linking-libraries-ios.html b/docs/0.43/linking-libraries-ios.html
index 8b8b2ef98ae..79612a6695a 100644
--- a/docs/0.43/linking-libraries-ios.html
+++ b/docs/0.43/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.44/debugging.html b/docs/0.44/debugging.html index 11674f4f8cc..2e48783c3b2 100644 --- a/docs/0.44/debugging.html +++ b/docs/0.44/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.44/getting-started.html b/docs/0.44/getting-started.html index 384aa7462d5..34883895e02 100644 --- a/docs/0.44/getting-started.html +++ b/docs/0.44/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.44/handling-touches.html b/docs/0.44/handling-touches.html index 096f309c544..1dccf618c52 100644 --- a/docs/0.44/handling-touches.html +++ b/docs/0.44/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.44/integration-with-existing-apps.html b/docs/0.44/integration-with-existing-apps.html index 78903825366..a2e0fbe56ed 100644 --- a/docs/0.44/integration-with-existing-apps.html +++ b/docs/0.44/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.44/linking-libraries-ios.html b/docs/0.44/linking-libraries-ios.html
index abb8f1d7e12..63001b8ceeb 100644
--- a/docs/0.44/linking-libraries-ios.html
+++ b/docs/0.44/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.45/debugging.html b/docs/0.45/debugging.html index eafab6eac2e..b15f4c96df4 100644 --- a/docs/0.45/debugging.html +++ b/docs/0.45/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.45/getting-started.html b/docs/0.45/getting-started.html index c381affd48d..0ebaa4a88c1 100644 --- a/docs/0.45/getting-started.html +++ b/docs/0.45/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.45/handling-touches.html b/docs/0.45/handling-touches.html index d029de025f5..82574aa01cc 100644 --- a/docs/0.45/handling-touches.html +++ b/docs/0.45/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.45/integration-with-existing-apps.html b/docs/0.45/integration-with-existing-apps.html index 1a398655f8c..b8bd0db4806 100644 --- a/docs/0.45/integration-with-existing-apps.html +++ b/docs/0.45/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.45/linking-libraries-ios.html b/docs/0.45/linking-libraries-ios.html
index 65a6f5965e1..0a050420f3d 100644
--- a/docs/0.45/linking-libraries-ios.html
+++ b/docs/0.45/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.46/debugging.html b/docs/0.46/debugging.html index 6cec6edd915..e344ab2b956 100644 --- a/docs/0.46/debugging.html +++ b/docs/0.46/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.46/getting-started.html b/docs/0.46/getting-started.html index cebf07c45e8..ecfdcce1db8 100644 --- a/docs/0.46/getting-started.html +++ b/docs/0.46/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.46/handling-touches.html b/docs/0.46/handling-touches.html index 482caacf37e..c0855c288ac 100644 --- a/docs/0.46/handling-touches.html +++ b/docs/0.46/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.46/integration-with-existing-apps.html b/docs/0.46/integration-with-existing-apps.html index fec998b04bc..b929e146caf 100644 --- a/docs/0.46/integration-with-existing-apps.html +++ b/docs/0.46/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.46/linking-libraries-ios.html b/docs/0.46/linking-libraries-ios.html
index ba9321877ba..05b8d7d0267 100644
--- a/docs/0.46/linking-libraries-ios.html
+++ b/docs/0.46/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.47/debugging.html b/docs/0.47/debugging.html index 8964ecbedd8..40a77ce0488 100644 --- a/docs/0.47/debugging.html +++ b/docs/0.47/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.47/getting-started.html b/docs/0.47/getting-started.html index 48d78fde51c..5343ded1c2b 100644 --- a/docs/0.47/getting-started.html +++ b/docs/0.47/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.47/handling-touches.html b/docs/0.47/handling-touches.html index e81470d95c7..985682af051 100644 --- a/docs/0.47/handling-touches.html +++ b/docs/0.47/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.47/integration-with-existing-apps.html b/docs/0.47/integration-with-existing-apps.html index 389c495037c..aa0fdf4fdf9 100644 --- a/docs/0.47/integration-with-existing-apps.html +++ b/docs/0.47/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.47/linking-libraries-ios.html b/docs/0.47/linking-libraries-ios.html
index 4b549e38420..c68ca1f22be 100644
--- a/docs/0.47/linking-libraries-ios.html
+++ b/docs/0.47/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.48/debugging.html b/docs/0.48/debugging.html index 4b14791d19c..fdb3ca516ee 100644 --- a/docs/0.48/debugging.html +++ b/docs/0.48/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.48/getting-started.html b/docs/0.48/getting-started.html index 637e4eb48f3..233b19c02ba 100644 --- a/docs/0.48/getting-started.html +++ b/docs/0.48/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.48/handling-touches.html b/docs/0.48/handling-touches.html index f172987dad2..70d81901447 100644 --- a/docs/0.48/handling-touches.html +++ b/docs/0.48/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.48/integration-with-existing-apps.html b/docs/0.48/integration-with-existing-apps.html index a0d954a4ee1..ffea1dedec5 100644 --- a/docs/0.48/integration-with-existing-apps.html +++ b/docs/0.48/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.48/linking-libraries-ios.html b/docs/0.48/linking-libraries-ios.html
index 42f5deb9160..699cf4226f7 100644
--- a/docs/0.48/linking-libraries-ios.html
+++ b/docs/0.48/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.49/debugging.html b/docs/0.49/debugging.html index 0d6e69c5420..d788816ae69 100644 --- a/docs/0.49/debugging.html +++ b/docs/0.49/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.49/getting-started.html b/docs/0.49/getting-started.html index 70c1f8175db..5e58a704c1e 100644 --- a/docs/0.49/getting-started.html +++ b/docs/0.49/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.49/handling-touches.html b/docs/0.49/handling-touches.html index 50bb8648f99..e22e8d78e09 100644 --- a/docs/0.49/handling-touches.html +++ b/docs/0.49/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.49/integration-with-existing-apps.html b/docs/0.49/integration-with-existing-apps.html index d8e4a70acdf..853932ae9b9 100644 --- a/docs/0.49/integration-with-existing-apps.html +++ b/docs/0.49/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.49/linking-libraries-ios.html b/docs/0.49/linking-libraries-ios.html
index fd837881322..26a3fb77bd6 100644
--- a/docs/0.49/linking-libraries-ios.html
+++ b/docs/0.49/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.5

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.5/debugging.html b/docs/0.5/debugging.html index f2a5bb786f2..8d20be29a25 100644 --- a/docs/0.5/debugging.html +++ b/docs/0.5/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.5/getting-started.html b/docs/0.5/getting-started.html index 65e58200ad4..f7d6c95920d 100644 --- a/docs/0.5/getting-started.html +++ b/docs/0.5/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.5/handling-touches.html b/docs/0.5/handling-touches.html index 7bfe3010f1d..6c6df536752 100644 --- a/docs/0.5/handling-touches.html +++ b/docs/0.5/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.5/integration-with-existing-apps.html b/docs/0.5/integration-with-existing-apps.html index 14c0fed7a37..3dcf1c83d40 100644 --- a/docs/0.5/integration-with-existing-apps.html +++ b/docs/0.5/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.5/linking-libraries-ios.html b/docs/0.5/linking-libraries-ios.html
index 90810a1db6d..2ef07474590 100644
--- a/docs/0.5/linking-libraries-ios.html
+++ b/docs/0.5/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.50/debugging.html b/docs/0.50/debugging.html index b7154157962..db2cfa85e99 100644 --- a/docs/0.50/debugging.html +++ b/docs/0.50/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.50/getting-started.html b/docs/0.50/getting-started.html index ef20d27249a..6719ddb44cc 100644 --- a/docs/0.50/getting-started.html +++ b/docs/0.50/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.50/handling-touches.html b/docs/0.50/handling-touches.html index 6570b7f715f..864abf2ac81 100644 --- a/docs/0.50/handling-touches.html +++ b/docs/0.50/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.50/integration-with-existing-apps.html b/docs/0.50/integration-with-existing-apps.html index 9b29a8ee22f..f25f7221e13 100644 --- a/docs/0.50/integration-with-existing-apps.html +++ b/docs/0.50/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.50/linking-libraries-ios.html b/docs/0.50/linking-libraries-ios.html
index 3a5f40fd121..1764b43e2dc 100644
--- a/docs/0.50/linking-libraries-ios.html
+++ b/docs/0.50/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.6

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.6/debugging.html b/docs/0.6/debugging.html index 2f980d9c27e..4ce8668067c 100644 --- a/docs/0.6/debugging.html +++ b/docs/0.6/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.6/getting-started.html b/docs/0.6/getting-started.html index a2b97870d25..f58544374c5 100644 --- a/docs/0.6/getting-started.html +++ b/docs/0.6/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.6/handling-touches.html b/docs/0.6/handling-touches.html index 639892058b0..2d9d9a03532 100644 --- a/docs/0.6/handling-touches.html +++ b/docs/0.6/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.6/integration-with-existing-apps.html b/docs/0.6/integration-with-existing-apps.html index 1e081b2cc72..01d129d9e86 100644 --- a/docs/0.6/integration-with-existing-apps.html +++ b/docs/0.6/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.6/linking-libraries-ios.html b/docs/0.6/linking-libraries-ios.html
index a940e2641a0..ca56cfef6fe 100644
--- a/docs/0.6/linking-libraries-ios.html
+++ b/docs/0.6/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.7

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.7/debugging.html b/docs/0.7/debugging.html index fc6c9463e97..b36a920e169 100644 --- a/docs/0.7/debugging.html +++ b/docs/0.7/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.7/getting-started.html b/docs/0.7/getting-started.html index b204165dea6..c45ff080d52 100644 --- a/docs/0.7/getting-started.html +++ b/docs/0.7/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.7/handling-touches.html b/docs/0.7/handling-touches.html index 002d35bf8de..e2cb538810e 100644 --- a/docs/0.7/handling-touches.html +++ b/docs/0.7/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.7/integration-with-existing-apps.html b/docs/0.7/integration-with-existing-apps.html index 24c0c68622b..dfb8a609e57 100644 --- a/docs/0.7/integration-with-existing-apps.html +++ b/docs/0.7/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.7/linking-libraries-ios.html b/docs/0.7/linking-libraries-ios.html
index 344fc28e329..766bbfe0cb2 100644
--- a/docs/0.7/linking-libraries-ios.html
+++ b/docs/0.7/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.8

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.8/debugging.html b/docs/0.8/debugging.html index ee38721d4be..60f816102ed 100644 --- a/docs/0.8/debugging.html +++ b/docs/0.8/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.8/getting-started.html b/docs/0.8/getting-started.html index f44e51936ff..5022ade5cc0 100644 --- a/docs/0.8/getting-started.html +++ b/docs/0.8/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.8/handling-touches.html b/docs/0.8/handling-touches.html index 8110b700311..172f76d8b96 100644 --- a/docs/0.8/handling-touches.html +++ b/docs/0.8/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.8/integration-with-existing-apps.html b/docs/0.8/integration-with-existing-apps.html index c436ed59a36..0923a3df491 100644 --- a/docs/0.8/integration-with-existing-apps.html +++ b/docs/0.8/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.8/linking-libraries-ios.html b/docs/0.8/linking-libraries-ios.html
index ea844d030d9..457779e6ee2 100644
--- a/docs/0.8/linking-libraries-ios.html
+++ b/docs/0.8/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →

React Native

0.9

Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.9/debugging.html b/docs/0.9/debugging.html index ebf2304f338..a8a9c7c2e2f 100644 --- a/docs/0.9/debugging.html +++ b/docs/0.9/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/0.9/getting-started.html b/docs/0.9/getting-started.html index d3746dd9b5c..6610b019b3e 100644 --- a/docs/0.9/getting-started.html +++ b/docs/0.9/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/0.9/handling-touches.html b/docs/0.9/handling-touches.html index caa2f8ce68e..0af9b0cb12b 100644 --- a/docs/0.9/handling-touches.html +++ b/docs/0.9/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/0.9/integration-with-existing-apps.html b/docs/0.9/integration-with-existing-apps.html index c4a767b140e..1689533b117 100644 --- a/docs/0.9/integration-with-existing-apps.html +++ b/docs/0.9/integration-with-existing-apps.html @@ -149,7 +149,7 @@

    Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

    -

    Before RN Integration

    +

    Before RN Integration

    Configuring CocoaPods dependencies

    Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

    The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

    @@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

    1. Create an Event Path

    You can add a new link on the main game menu to go to the "High Score" React Native page.

    -

    Event Path

    +

    Event Path

    2. Event Handler

    We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

    When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

    @@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

    3. Wire Up

    Wire up the new link in the main menu to the newly added event handler method.

    -

    Event Path

    +

    Event Path

    One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

    @@ -414,9 +414,9 @@ $ react-native run-ios

    In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

    Here is the native application home screen:

    -

    Home Screen

    +

    Home Screen

    Here is the React Native high score screen:

    -

    High Scores

    +

    High Scores

    If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

    @@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

    Now build and run your Android app as normal.

    Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

    -

    Screenshot

    +

    Screenshot

    Creating a release build in Android Studio

    You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

    $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/0.9/linking-libraries-ios.html b/docs/0.9/linking-libraries-ios.html
index 4d3ff41cb6d..b47d6b60e47 100644
--- a/docs/0.9/linking-libraries-ios.html
+++ b/docs/0.9/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);
    
-
    
+
    
 
    Step 2
    
 
    Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries
    
-
    
+
    
 
    Step 3
    
 
    Not every library will need this step, what you need to consider is:
    
 
    Do I need to know the contents of the library at compile time?
    
@@ -61,7 +61,7 @@ received.
    
 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).
    
-
    
+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/debugging.html b/docs/debugging.html index 9da8feb0029..1c2f942a186 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/getting-started.html b/docs/getting-started.html index 50fa9d98f29..04278b91880 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/handling-touches.html b/docs/handling-touches.html index 181a2dc66a3..9befafb7b05 100644 --- a/docs/handling-touches.html +++ b/docs/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/image.html b/docs/image.html index e5d2cd3fcc5..5280a319eb2 100644 --- a/docs/image.html +++ b/docs/image.html @@ -24,7 +24,7 @@ as well as one from network and even from data provided in the 'data:''data:'
+

You can also add style to an image:

import React, { Component } from 'react';
diff --git a/docs/integration-with-existing-apps.html b/docs/integration-with-existing-apps.html
index da61ca7d57d..a0816b46c51 100644
--- a/docs/integration-with-existing-apps.html
+++ b/docs/integration-with-existing-apps.html
@@ -149,7 +149,7 @@
 

 
Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

 

-
Before RN Integration

+
Before RN Integration

 
Configuring CocoaPods dependencies

 
Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

 
The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
 
We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

 
1. Create an Event Path

 
You can add a new link on the main game menu to go to the "High Score" React Native page.

-
Event Path

+
Event Path

 
2. Event Handler

 
We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

 
When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
 

 
3. Wire Up

 
Wire up the new link in the main menu to the newly added event handler method.

-
Event Path

+
Event Path

 

 
One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

 

@@ -414,9 +414,9 @@ $ react-native run-ios

In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

Here is the native application home screen:

-

Home Screen

+

Home Screen

Here is the React Native high score screen:

-

High Scores

+

High Scores

If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

@@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

Now build and run your Android app as normal.

Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

-

Screenshot

+

Screenshot

Creating a release build in Android Studio

You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/linking-libraries-ios.html b/docs/linking-libraries-ios.html
index 78a3e32c76b..4238540924e 100644
--- a/docs/linking-libraries-ios.html
+++ b/docs/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);

-

+

 
Step 2

 
Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries

-

+

 
Step 3

 
Not every library will need this step, what you need to consider is:

 
Do I need to know the contents of the library at compile time?

@@ -61,7 +61,7 @@ received.

 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).

-

+
← Native UI ComponentsRunning On Simulator →
Edit

Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

-

+

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/next/debugging.html b/docs/next/debugging.html index d314c91f68d..d6401594cec 100644 --- a/docs/next/debugging.html +++ b/docs/next/debugging.html @@ -8,7 +8,7 @@

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

-

+

The Developer Menu is disabled in release (production) builds.

@@ -56,23 +56,23 @@

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools
-

React DevTools

+

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

-

React Native Inspector

+

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

-

React DevTools Inspector Integration

+

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

-

React DevTools Chrome Console Integration

+

React DevTools Chrome Console Integration

Performance Monitor

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

diff --git a/docs/next/getting-started.html b/docs/next/getting-started.html index 790cc5ac7e5..eed98a7bc05 100644 --- a/docs/next/getting-started.html +++ b/docs/next/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.

That's it!

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

-

+

Now what?

  • Create React Native App also has a @@ -275,7 +275,7 @@ higher.

    choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    -

    Xcode Command Line Tools

    +

    Xcode Command Line Tools

    Java Development Kit

    React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.

    The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    -

    Android Studio Welcome

    +

    Android Studio Welcome

    The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:

  • Google APIs Intel x86 Atom_64 System Image

-

Android SDK Manager

+

Android SDK Manager

-

Android SDK Manager

+

Android SDK Manager

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 23.0.1 is selected.

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

-

Android SDK Manager - 23.0.1 Build Tools

+

Android SDK Manager - 23.0.1 Build Tools

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

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

-

Android SDK Manager - Installs

+

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order @@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under click on Change settings.... Open the Advanced tab and click on Environment Variables.... Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

-

ANDROID_HOME Environment Variable

+

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
@@ -445,15 +445,15 @@ instructions here.<

Using a virtual device

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

+

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-

Android Studio AVD Manager

+

Android Studio AVD Manager

-

Android Studio AVD Manager

+

Android Studio AVD Manager

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

-

Install HAXM

+

Install HAXM

If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.

-

AVD List

+

AVD List

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 @@ -491,7 +491,7 @@ proceed to the next step.

react-native run-ios

You should see your new app running in the iOS Simulator shortly.

-

AwesomeProject on iOS

+

AwesomeProject on iOS

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode or Nuclide.

@@ -511,9 +511,9 @@ react-native run-android

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

-

AwesomeProject on Android

+

AwesomeProject on Android

-

AwesomeProject on Android

+

AwesomeProject on Android

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

@@ -546,12 +546,12 @@ see your changes!

That's it!

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

-

+

That's it!

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

-

+

Now what?

    diff --git a/docs/next/handling-touches.html b/docs/next/handling-touches.html index e49470f28ea..6deffafa962 100644 --- a/docs/next/handling-touches.html +++ b/docs/next/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:

    text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

    -

    +

    Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.

    diff --git a/docs/next/image.html b/docs/next/image.html index bcd69ede3f7..7540e0d6945 100644 --- a/docs/next/image.html +++ b/docs/next/image.html @@ -25,7 +25,7 @@ dimensions of your image!

    /> <Image style={{width: 50, height: 50}} - source={{uri: 'https://facebook.github.io/react-native/assets/favicon.png'}} + source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} /> <Image style={{width: 66, height: 58}} @@ -38,7 +38,7 @@ dimensions of your image!

    // skip this line if using Create React Native App AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -
+

You can also add style to an image:

import React, { Component } from 'react';
diff --git a/docs/next/integration-with-existing-apps.html b/docs/next/integration-with-existing-apps.html
index faf2b84840b..614a1d92c81 100644
--- a/docs/next/integration-with-existing-apps.html
+++ b/docs/next/integration-with-existing-apps.html
@@ -149,7 +149,7 @@
 

 
Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

 

-
Before RN Integration

+
Before RN Integration

 
Configuring CocoaPods dependencies

 
Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

 
The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
 
We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

 
1. Create an Event Path

 
You can add a new link on the main game menu to go to the "High Score" React Native page.

-
Event Path

+
Event Path

 
2. Event Handler

 
We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

 
When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
 

 
3. Wire Up

 
Wire up the new link in the main menu to the newly added event handler method.

-
Event Path

+
Event Path

 

 
One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the Touch Up Inside event, drag that to the storyboard and then select the created method from the list provided.

 

@@ -414,9 +414,9 @@ $ react-native run-ios

In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.

Here is the native application home screen:

-

Home Screen

+

Home Screen

Here is the React Native high score screen:

-

High Scores

+

High Scores

If you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.

@@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the app

Now build and run your Android app as normal.

Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

-

Screenshot

+

Screenshot

Creating a release build in Android Studio

You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
diff --git a/docs/next/linking-libraries-ios.html b/docs/next/linking-libraries-ios.html
index 5b4b38b6811..4d337dc23ac 100644
--- a/docs/next/linking-libraries-ios.html
+++ b/docs/next/linking-libraries-ios.html
@@ -41,12 +41,12 @@ add # Add new pods below this line comment to places where you expe
 folder.
 Drag this file to your project on Xcode (usually under the Libraries group
 on Xcode);

-

+

 
Step 2

 
Click on your main project file (the one that represents the .xcodeproj)
 select Build Phases and drag the static library from the Products folder
 inside the Library you are importing to Link Binary With Libraries

-

+

 
Step 3

 
Not every library will need this step, what you need to consider is:

 
Do I need to know the contents of the library at compile time?

@@ -61,7 +61,7 @@ received.

 to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it recursive, like React on the
 example).

-

+
← Native UI ComponentsRunning On Simulator →