Alexandre Moureaux
Lead Dev @
@almouro
github.com/almouro
Check out our open-source (github.com/bamlab) and our blog (blog.bam.tech)
Native
React Native
JS VM
<Image />
ImageView
BUT IT'S A FULL JS SOLUTION
NATIVE SCREEN
NATIVE SCREEN
REACT SCREEN
REACT SCREEN
NATIVE SCREEN
native-navigation by
import Navigator from "native-navigation";
import ArticleDetailScreen from "./screens/ArticleDetail";
Navigator.registerScreen("ArticleDetail", () => ArticleDetailScreen);
let screen = ReactViewController(
moduleName: "ArticleDetail",
props: ["articleId": articleRef.identifier as AnyObject],
)
navigationController?.pushReactViewController(screen,
animated: true)
final Bundle props = new Bundle();
props.putString("articleId", article.getId());
screenCoordinator.pushScreen("ArticleDetail", props);
Navigator.push("ArticleDetail", { articleId: article.id });
import Navigator from "native-navigation";
import ArticleDetailScreen from "./screens/ArticleDetail";
Navigator.registerScreen("ArticleDetail", () => (
<Navigator.Config
statusBarHidden={false}
title="HISTORY"
titleFontSize={14}
titleFontName={`${themes.fonts.competitionFont}-Bold`}
titleColor="white"
backButtonTitle=""
displayHomeAsUp
showTitle
contentInsetStartWithNavigation={0}
statusBarTranslucent={false}
>
....
</Navigator.Config>
);
Native app
JS engine
thread
Bridge
Asynchronous messages or events (sent on a queue)
Main thread
Native module thread
- Video Player
- Photo Gallery
- Membership
- Translations
#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(VideoPlayer, NSObject)
RCT_EXTERN_METHOD(
startVideos:(nonnull NSArray<NSString *>)videoIds
at:(nonnull NSInteger)index
loadRelatedContent:(BOOL)loadRelatedContent)
@end
@objc(VideoPlayer)
class VideoPlayer: NSObject {
@objc(startVideos:at:loadRelatedContent:)
func startVideos(videoIds: [String],
at index: Int, loadRelatedContent: Bool) {
..
// Native modules are in a separate native thread
DispatchQueue.main.async(execute: {() -> Void in
presentVC.startVideos(
videos: videoRefs)
})
}
class VideoPlayerModule extends ReactContextBaseJavaModule {
@ReactMethod
public void startVideos(List<String> videoIds) {
VideoPlayerActivity.startVideos(
getCurrentActivity(),
videoIds);
}
}
public class VideoPlayerPackage implements ReactPackage {
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new VideoPlayerModule(reactContext));
return modules;
}
}
public class MainApplication extends BaseApplication
implements ReactApplication {
private final ReactNativeHost reactNativeHost =
new ReactNativeHost(this) {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new VideoPlayerPackage(),
}
};
}
import { NativeModules } from "react-native";
const VideoPlayer = NativeModules.VideoPlayer;
VideoPlayer.startVideos(videoIds, at, loadRelatedContent)
@objc func constantsToExport() -> NSObject {
let dict: [String: [String: String?]] = [
"api": [
"gotw_base_url": ApiBaseURL.goalOfTheWeek.urlString,
"digital_base_url": ApiBaseURL.mobileBackend.urlString,
],
"competition": UefaConfiguration.getCurrentCompetition()
]
return dict as NSObject
}
import { NativeModules } from "react-native";
const Configuration = NativeModules.UefaConfiguration;
const apiUrl = Configuration.api.digital_base_url;
https://github.com/bamlab/generator-module-react-native
- AdMobBanner
- TwitterKit
- Match Card
- react-native-linear-gradient
- react-native-admob-banner
class func didAppearBecauseScroll() {
let args: [AnyObject] = ["onAppearBecauseScroll" as AnyObject]
ReactNavigationCoordinator.sharedInstance.bridge?
.enqueueJSCall("RCTDeviceEventEmitter.emit", args: args)
}
import DeviceEventEmitter from "RCTDeviceEventEmitter";
DeviceEventEmitter.addListener(
"onAppearBecauseScroll",
this.onAppearBecauseScroll
);
- Android App in android folder
- iOS App in iOS folder
- RN screens and components in js folder
- no Multiflavors build support out of the box on Android
- lots of Bridges to write
- knowledge of Native code is necessary
- Cannot use react-native cli tools easily
- More documentation on the Github repo to come
- Series of blog articles to come
@almouro
github.com/almouro