Skip to content

Commit 2a3659e

Browse files
committed
Merge the Objective-C and Swift iOS existing-app guides
Use `<Tabs>` to display the appropriate-language content.
1 parent 3817751 commit 2a3659e

File tree

4 files changed

+57
-369
lines changed

4 files changed

+57
-369
lines changed
File renamed without changes.

docs/_integration-with-exisiting-apps-swift.md renamed to docs/_integration-with-exisiting-apps-ios.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,14 +244,61 @@ When you build a React Native application, you use the [Metro bundler][metro] to
244244

245245
We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the `index.bundle`. Finally, we will create the main `RCTRootView`. Notice how we provide `RNHighScores` as the `moduleName` that we created [above](#the-react-native-component) when writing the code for our React Native component.
246246

247+
<Tabs groupId="language" defaultValue="objective-c" values={[ {label: 'Objective-C', value: 'objective-c'}, {label: 'Swift', value: 'swift'}, ]}>
248+
<TabItem value="objective-c">
249+
250+
First `import` the `RCTRootView` header.
251+
252+
```objectivec
253+
#import <React/RCTRootView.h>
254+
```
255+
256+
</TabItem>
257+
<TabItem value="swift">
258+
247259
First `import` the `React` module.
248260

249261
```swift
250262
import React
251263
```
252264

265+
</TabItem>
266+
</Tabs>
267+
253268
> The `initialProperties` are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use `this.props` to get access to that data.
254269
270+
<Tabs groupId="language" defaultValue="objective-c" values={[ {label: 'Objective-C', value: 'objective-c'}, {label: 'Swift', value: 'swift'}, ]}>
271+
<TabItem value="objective-c">
272+
273+
```objectivec
274+
- (IBAction)highScoreButtonPressed:(id)sender {
275+
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
276+
NSDictionary *mockData = @{
277+
@"scores" : @[
278+
@{ @"name" : @"Alex", @"value": @"42" },
279+
@{ @"name" : @"Joel", @"value": @"10" },
280+
],
281+
};
282+
283+
RCTRootView *rootView =
284+
[[RCTRootView alloc] initWithBundleURL:jsCodeLocation
285+
moduleName:@"RNHighScores"
286+
initialProperties:mockData
287+
launchOptions:nil];
288+
289+
UIViewController *vc = [[UIViewController alloc] init];
290+
vc.view = rootView;
291+
[self presentViewController:vc animated:YES completion:nil];
292+
}
293+
```
294+
295+
> Note that `-[RCTRootView initWithBundleURL:...]` starts up a new JavaScript VM. To save resources and simplify the communication between React Native views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `-[RCTRootView initWithBundleURL:...]`, use [`-[RCTBridge initWithBundleURL:...]`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge, and then use `-[RCTRootView initWithBridge:...]`.
296+
297+
> When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
298+
299+
</TabItem>
300+
<TabItem value="swift">
301+
255302
```swift
256303
@IBAction func highScoreButtonTapped(sender: UIButton) {
257304
let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
@@ -279,6 +326,9 @@ import React
279326
280327
> When moving your app to production, the `URL` can point to a pre-bundled file on disk via something like `Bundle.main.url(forResource: "main", withExtension: "jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
281328
329+
</TabItem>
330+
</Tabs>
331+
282332
##### 3. Wire Up
283333

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

0 commit comments

Comments
 (0)