Skip to content

Commit 34de6d5

Browse files
hramoshramos
committed
Un-version Guides
1 parent a93e634 commit 34de6d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+95
-3795
lines changed

‎website/versioned_docs/version-0.5/building-for-apple-tv.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,10 +167,6 @@ var running_on_android_tv = Platform.isTV;
167167
```javascript
168168
var TVEventHandler = require('TVEventHandler');
169169

170-
.
171-
.
172-
.
173-
174170
class Game2048 extends React.Component {
175171
_tvEventHandler: any;
176172

‎website/versioned_docs/version-0.5/building-from-source.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ Assuming you have the Android SDK installed, run `android` to open the Android S
1414

1515
Make sure you have the following installed:
1616

17-
1. Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
18-
2. SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
19-
3. Android Support Repository >= 17 (for Android Support Library)
17+
1. Android SDK version 26 (compileSdkVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
18+
2. SDK build tools version 26.0.3 (buildToolsVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
19+
3. Android Support Repository >= 26 (for Android Support Library)
2020
4. Android NDK (download links and installation instructions below)
2121

2222
#### Point Gradle to your Android SDK:
@@ -101,7 +101,7 @@ Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instea
101101
...
102102
dependencies {
103103
compile fileTree(dir: 'libs', include: ['*.jar'])
104-
compile 'com.android.support:appcompat-v7:23.0.1'
104+
compile 'com.android.support:appcompat-v7:26.0.2'
105105
106106
compile project(':ReactAndroid')
107107

‎website/versioned_docs/version-0.5/debugging.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ React Native supports a few keyboard shortcuts in the iOS Simulator. They are de
1010

1111
## Accessing the In-App Developer Menu
1212

13-
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).
13+
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 on Mac OS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code).
1414

1515
![](/react-native/docs/assets/DeveloperMenu.png)
1616

‎website/versioned_docs/version-0.5/images.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,12 +200,14 @@ You might not want to use `<ImageBackground>` in some cases, since the implement
200200

201201
```javascript
202202
return (
203-
<ImageBackground source={...}>
203+
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
204204
<Text>Inside</Text>
205205
</ImageBackground>
206206
);
207207
```
208208

209+
Note that you must specify some width and height style attributes.
210+
209211
## iOS Border Radius Styles
210212

211213
Please note that the following corner specific, border radius style properties are currently ignored by iOS's image component:

‎website/versioned_docs/version-0.5/improvingux.md

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,6 @@ title: Improving User Experience
44
original_id: improvingux
55
---
66

7-
Building apps for mobile platforms is nuanced, there are many little details that developers coming from a web background often do not consider. This guide is intended to explain some of these nuances and demonstrate how you might factor them in to your application.
8-
9-
> We are improving and adding more details to this page. If you'd like to help out, chime in at [react-native/14979](https://github.com/facebook/react-native/issues/14979).
10-
11-
## Topics index
12-
13-
* [Configure text inputs](#configure-text-inputs)
14-
* [Manage layout when keyboard is visible](#manage-layout-when-keyboard-is-visible)
15-
* [Make tappable areas larger](#make-tappable-areas-larger)
16-
* [Use Android Ripple](#use-android-ripple)
17-
* [Learn More](#learn-more)
18-
19-
---
20-
217
## Configure text inputs
228

239
Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
@@ -60,7 +46,9 @@ Android API 21+ uses the material design ripple to provide user with feedback wh
6046

6147
## Screen orientation lock
6248

63-
Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add 'android:screenOrientation=”portrait”' to lock to portrait or 'android:screenOrientation=”landscape”' to lock to landscape.
49+
Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
50+
51+
On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
6452

6553
# Learn more
6654

‎website/versioned_docs/version-0.5/native-modules-android.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ This guide will use the [Toast](http://developer.android.com/reference/android/w
1818

1919
We start by creating a native module. A native module is a Java class that usually extends the `ReactContextBaseJavaModule` class and implements the functionality required by the JavaScript. Our goal here is to be able to write `ToastExample.show('Awesome', ToastExample.SHORT);` from JavaScript to display a short toast on the screen.
2020

21+
create a new Java Class named `ToastModule.java` inside `android/app/src/main/java/com/your-app-name/` folder with the content below:
22+
2123
```java
24+
// ToastModule.java
25+
2226
package com.facebook.react.modules.toast;
2327

2428
import android.widget.Toast;
@@ -94,7 +98,11 @@ Read more about [ReadableMap](https://github.com/facebook/react-native/blob/mast
9498

9599
The last step within Java is to register the Module; this happens in the `createNativeModules` of your apps package. If a module is not registered it will not be available from JavaScript.
96100

101+
create a new Java Class named `CustomToastPackage.java` inside `android/app/src/main/java/com/your-app-name/` folder with the content below:
102+
97103
```java
104+
// CustomToastPackage.java
105+
98106
package com.facebook.react.modules.toast;
99107

100108
import com.facebook.react.ReactPackage;
@@ -106,7 +114,7 @@ import java.util.ArrayList;
106114
import java.util.Collections;
107115
import java.util.List;
108116

109-
public class AnExampleReactPackage implements ReactPackage {
117+
public class CustomToastPackage implements ReactPackage {
110118

111119
@Override
112120
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
@@ -132,7 +140,7 @@ The package needs to be provided in the `getPackages` method of the `MainApplica
132140
protected List<ReactPackage> getPackages() {
133141
return Arrays.<ReactPackage>asList(
134142
new MainReactPackage(),
135-
new AnExampleReactPackage()); // <-- Add this line with your package name.
143+
new CustomToastPackage()); // <-- Add this line with your package name.
136144
}
137145
```
138146

‎website/versioned_docs/version-0.5/native-modules-ios.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ In addition to implementing the `RCTBridgeModule` protocol, your class must also
2828

2929
```objectivec
3030
// CalendarManager.m
31+
#import "CalendarManager.h"
32+
3133
@implementation CalendarManager
3234

3335
// To export a module named CalendarManager
@@ -213,7 +215,7 @@ RCT_REMAP_METHOD(findEvents,
213215
214216
The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:
215217
216-
```js
218+
```javascript
217219
async function updateEvents() {
218220
try {
219221
var events = await CalendarManager.findEvents();
@@ -445,7 +447,8 @@ class CalendarManager: NSObject {
445447
// Date is ready to use!
446448
}
447449
448-
func constantsToExport() -> [AnyHashable: Any]! {
450+
@objc
451+
func constantsToExport() -> [String: Any]! {
449452
return ["someKey": "someValue"]
450453
}
451454

‎website/versioned_docs/version-0.5/navigation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ Then you can quickly create an app with a home screen and a profile screen:
2626

2727
```
2828
import {
29-
StackNavigator,
29+
createStackNavigator,
3030
} from 'react-navigation';
3131
32-
const App = StackNavigator({
32+
const App = createStackNavigator({
3333
Home: { screen: HomeScreen },
3434
Profile: { screen: ProfileScreen },
3535
});

‎website/versioned_docs/version-0.5/performance.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ If your [`FlatList`](flatlist.md) is rendering slow, be sure that you've impleme
6262

6363
If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
6464

65-
Similarly, you can implement `shouldComponentUpdate` and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
65+
Similarly, you can implement `shouldComponentUpdate` and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
6666

6767
### Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time
6868

‎website/versioned_docs/version-0.5/signed-apk-android.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ This command prompts you for passwords for the keystore and key, and to provide
1616

1717
The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.
1818

19-
_Note: Remember to keep your keystore file private and never commit it to version control._
19+
On Mac if you not sure where is your jdk bin folder is then perform the following command to find it, `$ /usr/libexec/java_home` it will output the directroy of jdk which looks like this, `/Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/Home` then navigate to that directory by the following command, `$ cd /Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/Home/` Now you can perform the keytool command with sudo permission as shown below, `$ sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000` _Note: Remember to keep your keystore file private and never commit it to version control._
2020

2121
### Setting up gradle variables
2222

@@ -72,7 +72,8 @@ android {
7272
Simply run the following in a terminal:
7373

7474
```sh
75-
$ cd android && ./gradlew assembleRelease
75+
$ cd android
76+
$ ./gradlew assembleRelease
7677
```
7778

7879
Gradle's `assembleRelease` will bundle all the JavaScript needed to run your app into the APK. If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at `android/app/build.gradle` to see how you can update it to reflect these changes.

0 commit comments

Comments
 (0)