Comments (10)
@frantic do you have steps for new project creation?
The packager currently only looks in the project root because our @providesModule format forces us to build a dependency graph ahead of time by reading files. Otherwise we'll end up reading your entire drive. There are probably ways around that. I'll look into this tomorrow make sure it works as expected
from react-native.
But options is parsed from the command line arguments and I don't see the projectRoot command line arg.
Oh, I missed that when syncing changes to github repo :)
We don't have a good story for creating new apps yet, but imho would be great if all you needed was npm install react-native
+ packages that your app depends on, and run npm exec devserver
to start packager
from react-native.
We don't have a good story for creating new apps yet, but imho would be great if all you needed was npm install react-native + packages that your app depends on, and run npm exec devserver to start packager
That's definitely the ideal goal. This & showing how to integrate with other bundlers like webpack would be great.
from react-native.
@frantic, even if the story for new project creation is not there yet, could you still share the manual steps needed to setup a fresh new project? It's been harder than expected, and we have fallen back to just copying one of the examples and hacking away within the cloned repo.
from react-native.
@sjmueller Personally I didn't find it too hard, except for not being able to set the project root of the packager. If I remember right:
- Import ReactKit.xcodeproj into your project
- Link to libReactKit.a in the link phase
- Make the
RCTRootView
in your delegate, like:
RCTRootView *rootView = [[RCTRootView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
rootView.scriptURL = jsCodeLocation;
rootView.moduleName = @"App";
And just append it as a subview where you need it
- Make a
js
folder in your project - Change the root project url in packager/packager.js to your
js
folder - Copy the package.json from the root of
react-native
intojs
and runnpm install
- Copy the
Libraries
folder fromreact-native
into your project
The last steps are the annoying ones, but I'm sure that'll be fixed soon. I may have forgotten something. (definitely need to write this down in docs)
from react-native.
Thanks @jlongster! @sjmueller If you don't have iOS experience, it's easier to just copy the example app and change it's name
from react-native.
Much appreciated, @jlongster!
from react-native.
Closing as it's not very actionable. We definitely want to improve this new project creation experience.
from react-native.
I went through the process of creating a new Swift v1.2 project from scratch with Xcode 6.3 beta, and preparing it for use with react-native. I know the end goal is to improve the experience so that this is trivial, but for the time being, here are the steps if anyone is curious:
-
Create a new swift project. I generated mine with Xcode 6.3-beta as Single View Application.
-
Copy
packager
,libraries
, andreactkit
folders from react-native. Copy over.gitignore
as well, or create one yourself. -
Import ReactKit as a subproject. The easiest way is to drag
ReactKit/ReactKit.xcodeproj
from finder into the Project navigator in your newly created Xcode project. -
Link ReactKit library to build with main binary. This is done by selecting the main project in Xcode, choosing the Build Phases tab, and adding a new framework under the Link Binary With Libraries group. Choose
libReactKit.a
, as Required. -
Add bridging header to use ReactKit in swift. You can do this by adding an temporary ObjC file to your project, and Xcode will prompt you asking if you want to create a Bridging Header. You can then delete the temp file, and continue to use the newly created
[app]-bridging-header.h
file. -
Add all the headers you plan to use from ReactKit into your [app]-bridging-header. I added all of them, since there are some interesting errors if you don't get the dependencies right. I bet there's an easier way to do this, but if not just let me know and I can post my bridging-header.
-
In order for the headers inside ReactKit to be found, you must add the
project as a search path. Select main project, choose Build Settings
tab. Under Search Paths, add a new entry Header Search Paths:
$(PROJECT_DIR)/ReactKit
, recursive. -
Initialize app with RCTRootView, set js bundle location. I used the following code in
AppDelegate.swift
:func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { let jsCodeLocation = NSURL(string: "http:localhost:8081/Cards/CardsApp.includeRequire.runModule.bundle"), rootView = RCTRootView(), rootViewController = UIViewController() rootView.scriptURL = jsCodeLocation rootView.moduleName = "CardsApp" self.window = UIWindow(frame: UIScreen.mainScreen().bounds) rootViewController.view = rootView self.window!.rootViewController = rootViewController self.window!.makeKeyAndVisible() return true }
-
Delete unused default storyboard, viewcontroller under your [app] folder, since they aren't being used.
-
Modify
Info.plist
to remove storyboard entry:- <key>UIMainStoryboardFile</key> - <string>Main</string>
-
Add
-all_load
linker flag to pick up ReactKit objc category methods. Otherwise you'll receive errors likeunrecognized selector sent to class
when trying to useRCTRootView
. On your main project, select Build Settings tab, Linking -> Other Linker Flags: Add-all_load
. I've read that there are more optimal ways to do this, but good enough for now. -
Add main entry point to js application as
[AppName]App.js
. Just for starters you can use something like the code below (check out the tictactoe app for a full example):var App = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.title}>My App</Text> </View> ); } });
Perhaps there are some steps that are extraneous, and a few obviously won't apply to a pure ObjC project. Hope this helps.
from react-native.
@sjmueller Thanks a lot. I was stuck because of not adding all headers to bridging-header
for quite a while, and I would suggest this to go into the docs as well (or) to Examples/SwiftApp
And instead of copying files around, you can open packager/packager.js
and add your project directory to options.projectRoots
. #64 would fix it where you could run
./packager/packager.sh --root ~/workspace/Cards
and your jsCodeLocation
would be http://localhost:8081/CardsApp.includeRequire.runModule.bundle
where CardsApp.js
is the entry point.
from react-native.
Related Issues (20)
- Xcode 15.3 YogaKit/YGLayout.m Incompatible function pointer types passing 'YGSize (YGNodeRef, float, YGMeasureMode, float, YGMeasureMode)' HOT 5
- `react-native run-ios` tries to run on a non-existent device/simulator HOT 2
- No haptic feedback when using RefreshControl with a tintColor prop
- Uncontrolled input value clears when color is changed HOT 1
- [0.74] New app hangs on blank screen if dev server is not started HOT 3
- `selectOnFocus` does not work with `autoFocus` HOT 2
- Android Native Module: Unresolved reference: PackageList HOT 2
- [0.73.6] HOT 2
- γiOSγThe contentOffset property is missing from TextInputView's onScroll callback HOT 4
- Animated.Event not working attached to onLayout with useNativeDriver enabled HOT 2
- [iOS][Information] App store submissions will require a privacy manifest and signature for hermes HOT 3
- Cookies not being sent to webview for iOS after React Native Upgrade HOT 4
- [0.74] Cannot access Dev Menu on Android (RNTester) HOT 4
- TextInput contextMenuHidden does not hide autofill HOT 1
- Showing Recent Messages Command PhaseScriptExecution failed with a nonzero exit code HOT 3
- Unknown unicode characters in Image source broken on iOS in New Architecture HOT 1
- TouchableWithoutFeedback crashes when SVG component is a direct child of it HOT 2
- FBReactNativeSpec build commands failed with RN 0.71.4 / Xcode 15.3 / M2 HOT 6
- error `fsevents` unavailable (this watcher can only be used on Darwin) HOT 2
- `@synthesize bridge = _bridge` not working with bridgeless mode and TurboModule
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.