React Native

Issue #521 #import <React/RCTBridgeModule.h> @interface RNSurveyManager : NSObject <RCTBridgeModule> @end #import "RNSurveyManager.h" #import <React/RCTLog.h> #import <SurveyMonkeyiOSSDK/SurveyMonkeyiOSSDK.h> @interface RNSurveyManager()<SMFeedbackDelegate> @property (nonatomic, strong) SMFeedbackViewController * feedbackController; @end @implementation RNSurveyManager - (instancetype)init { self = [super init]; if (self) { self.feedbackController = [[SMFeedbackViewController alloc] initWithSurvey:@"VV8X5QA"]; self.feedbackController.delegate = self; } return self; } + (BOOL)requiresMainQueueSetup { return YES; } - (dispatch_queue_t)methodQueue { return dispatch_get_main_queue(); } RCT_EXPORT_MODULE(SurveyManager); - (void)respondentDidEndSurvey:(SMRespondent *)respondent error:(NSError *)error { NSLog(@"respondent %@ error %@", respondent, error); } RCT_EXPORT_METHOD(show:(RCTResponseSenderBlock)callback) { [UIApplication....

Issue #476 React Native comes with a default React library, and most CocoaPods libraries for React Native has React as a dependency pod, which causes the conflict https://github.com/react-native-community/react-native-svg/issues/621 https://stackoverflow.com/questions/45296994/difference-between-react-native-link-and-cocoapods https://github.com/onmyway133/notes/issues/486 https://github.com/facebook/react-native/pull/23563

Issue #279 Original post https://medium.com/fantageek/what-is-create-react-native-app-9f3bc5a6c2a3 As someone who comes to React Native from iOS and Android background, I like React and Javascript as much as I like Swift and Kotlin. React Native is a cool concept, but things that sound good in theory may not work well in practice. Another layer of abstraction Up until now, I still don’t get why big companies choose React Native over native ones, as in the end what we do is to deliver good experience to the end user, not the easy development for developers....

Issue #277 Original post https://codeburst.io/using-bitrise-ci-for-react-native-apps-b9e7b2722fe5 After trying Travis, CircleCI and BuddyBuild, I now choose Bitrise for my mobile applications. The many cool steps and workflows make Bitrise an ideal CI to try. Like any other CIs, the learning steps and configurations can be intimidating at first. Things that work locally can fail on CI, and how to send things that are marked as git ignore to be used in CI builds are popular issues....

Issue #271 Original post https://hackernoon.com/how-to-make-tag-selection-view-in-react-native-b6f8b0adc891 Besides React style programming, Yoga is another cool feature of React Native. It is a cross-platform layout engine which implements Flexbox so we use the same layout code for both platforms. As someone who uses Auto Layout in iOS and Constraint Layout in Android, I find Flexbox bit hard to use at first, but there are many tasks that Flexbox does very well, they are distribute elements in space and flow layout....

Issue #268 React Native was designed to be “learn once, write anywhere,” and it is usually used to build cross platform apps for iOS and Android. And for each app that we build, there are times we need to reuse the same code, build and tweak it a bit to make it work for different environments. For example, we might need multiple skins, themes, a free and paid version, or more often different staging and production environments....

Issue #266 Original post https://medium.freecodecamp.org/get-to-know-different-javascript-environments-in-react-native-4951c15d61f5 React Native can be very easy to get started with, and then at some point problems occur and we need to dive deep into it. The other day we had a strange bug that was only occurring in production build, and in iOS only. A long backtrace in the app revealed that it was due to Date constructor failure. const date = new Date("2019-01-18 12:00:00") This returns the correct Date object in debug mode, but yields Invalid Date in release....

Issue #264 Original post https://medium.com/react-native-training/react-native-bridging-how-to-make-linear-gradient-view-83c3805373b7 React Native lets us build mobile apps using only Javascript. It works by providing a common interface that talks to native iOS and Android components. There are enough essentials components to get started, but the cooler thing is that it is easy to build our own, hence we are not limited by React Native. In this post we will implement a linear gradient view, which is not supported by default in React Native, using native UI component, particularly CAGradientLayer in iOS and GradientDrawable in Android....

Issue #263 Original post https://medium.com/react-native-training/how-to-dismiss-keyboard-with-react-navigation-in-react-native-apps-4b987bbfdc48 Showing and dismiss keyboard seems like a trivial thing to do in mobile apps, but it can be tricky in automatically dismissing it when it comes together with react-navigation and modal presentation. At least that’s according to my initial assumption. This article aims to detail what I have learned about keyboard handling and how to avoid extra tap when dealing with TextInput There will also be lots of code spelunking, thanks to the all the libraries being open source....

Issue #260 Original post https://medium.com/react-native-training/firebase-sdk-with-firestore-for-react-native-apps-in-2018-aa89a67d6934 At Firebase Dev Summit 2017, Google introduced Firestore as fully-managed NoSQL document database for mobile and web app development. Compared to Firebase Realtime Database, it has better querying and more structured data, together with ease manual fetching of data. The new structure of collection and document is probably the eye catching, this makes data more intuitive to users and query a breeze. From https://firebase.googleblog.com/2017/10/cloud-firestore-for-rtdb-developers.html In this post, I will show how to setup Firebase Cloud Firestore in React Native apps for both iOS and Android through, of course, some pain points....

Issue #259 Original post https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42 React Native uses Yoga to achieve Flexbox style layout, which helps us set up layout in a declarative and easy way. The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities As someone who worked with Auto Layout in iOS and Constrain Layout in Android, I sometimes find it difficult to work with Flexbox in React Native....

Issue #256 Original post https://medium.freecodecamp.org/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92 React and React Native are just frameworks, and they do not dictate how we should structure our projects. It all depends on your personal taste and the project you’re working on. In this post, we will go through how to structure a project and how to manage local assets. This of course is not written in stone, and you are free to apply only the pieces that suit you....

Issue #254 Original post https://stackoverflow.com/a/54108708/1418457 Make our own convenient OverlayContainer. The trick is to use absolute with 100% size // @flow import React from 'react' import { View, StyleSheet } from 'react-native' type Props = { behind: React.Component, front: React.Component, under: React.Component } // Show something on top of other export default class OverlayContainer extends React.Component<Props> { render() { const { behind, front, under } = this.props return ( <View style={styles....

Issue #100 For now, I still believe in native. Here are some interesting links Why we are not cross-platform developers Why I’m not a React Native Developer We are ditching Xamarin. Why? https://en.wikipedia.org/wiki/Leaky_abstraction I’m harvesting credit card numbers and passwords from your site. Here’s how. How one developer just broke Node, Babel and thousands of projects in 11 lines of JavaScript React Native https://medium.com/snipe-gg/should-you-use-react-native-to-build-your-startups-mobile-app-c0baf9f4d9ad https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933