unname coder's blog

I tried to somehow connect those to examples: react-native-drawer with react-native-router-flux: following this documentation: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md How do I have to put the Custom Drawer in a file? I always get errors, when trying to have it like this: File: components/Drawer.js import Drawer from 'react-native-drawer'; import ControlPanel from './ControlPanel'; import {Actions, DefaultRenderer} from 'react-native-router-flux'; export default class extends Component { render(){ const state = this.props.navigationState; const children = state.children; return ( <Drawer ref="navigation" open={state.open} onOpen={()=>Actions.refresh({key:state.key, open: true})} onClose={()=>Actions.refresh({key:state.key, open: false})} type="displace" co...

I have followed the guide written on https://github.com/facebook/react-native-fbsdk to install and use the react-native-fbsdk module. However, when I click the "Share" button it throws the following error: 'Error: undefined is not an object (evaluating \'FBSDKShareDialogInterface.show\') Also 3 warnings appear when I run the app: 'Warning: Native component for "RCTFBSDKShareButton" does not exist' 'Warning: Native component for "RCTFBSDKSendButton" does not exist' 'Warning: Native component for "RCTFBSDKLikeControl" does not exist' This is the code that I use: var FBSDKShare = require('react-native-fbsdkshare'); var { FBSDKShareDialog, FBSDKShareDialogInterface, FBSDKShareLinkContent, FBSDKShareShareButton } = FBSDKShare; shareOnFacebook() { var linkContent = new FBSDKShareLinkContent('https://facebook.com', 'Wow, check out this great site!', ...

I am new to react native. Can anyone suggest how do i implement multiple select dropdown in react native. I have tried MultiSelect (https://github.com/toystars/react-native-multiple-select) from react-native-multiple-select but it is not working. I have implemented React Native component. Source code is attached. It shows how to make list checkable. It may be a base for your solution. Please see. import React from 'react'; import {View, Text, StyleSheet, FlatList, TouchableHighlight} from 'react-native'; var thisObj; export default class MultiSelect extends React.Component { constructor(props) { super(props); this.state = { selectedItems: {} }; } onItemPressed(item) { var oldSelectedItems = this.state.selectedItems; var itemState = oldSelectedItems[item.key]; if(!itemState) { oldSelectedItems[item.key] = true; } else { var newState = itemState? false: true; oldSelectedItems[item.key] = newSt...

I am trying to integrate map in react native. I am following the below tutorial. https://github.com/airbnb/react-native-maps I gone through all the installation instruction. I am using react-native version : 0.44.0 and react-native-map version : 0.13.0 I made sure that react-native-link is linked with android and iOS. While rendering the mapview in ios simulator, map is not showing and only i am able to a blank map with red outline. Please check my below code and let me know, where i am wrong. var MapView = require('react-native-maps'); <MapView initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} /> Try adding a View and some heights and ...StyleSheet.absoluteFillObject <View style={{height:400}}> <MapView style={{ ...StyleSheet.absoluteFillObject,height:400 }} initialRegion={{ latitude: 37.78825, longitude: -...

Is there a way to style the textInput in react-native android? Like change the underlineColor when selected and the cursor color? As of React Native version 0.21, there is still no way to style the cursor color via view props. I have successfully styled the cursor color by adding a custom style to my app theme. You will want to place this code in the styles.xml file, which is located in the android folder of your React project, at android/app/src/main/res/values/styles.xml . <resources> <style name="AppTheme" parent="Theme.AppCompat.Light"> <!-- typical material style colors --> <item name="colorPrimary">@color/kio_turquoise</item> <item name="colorPrimaryDark">@color/kio_hot_pink</item> <!-- sets cursor color --> <item name="colorControlActivated">@android:color/black</item> </style> </resources> ...

I want to remove react-native-elements in my react-native project. yarn remove react-native-elements yarn remove react-native-vector-icons when I remove this module and its dependence, I got an error . error: bundling failed: Error: Unable to resolve module `react-native-elements` from `/Users/assetfun/Desktop/amigo/src/components/registerLogin/registerLogin.js`: Module `react-native-elements` does not exist in the Haste module map this method can't solve the problem. Clear watchman watches: watchman watch-del-all . Delete the node_modules folder: rm -rf node_modules && npm install . Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache . 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-* . want someone help Ensure you don't import react-native-elements and react-native-vector-icons in any file (surely you import it in registerLogin.js). Even you removed that you try to import ...

I am trying to figure out how to mask TextInput for a react-native app. I am completely new react-native, and I would prefer to not have to code a component for each iOS, Android and potentially Windows. I see a bunch of existing modules for jQuery and regular React. Did not find one for react-native. How does one go about addressing something like this? Do I attach a listener to the text input field, and rewrite the representation whenever the value of my field changes? Please advise. Ended-up hooking onChangeText and just using a roll-my-own function. Instead of onChangeText, we could also hook event from onChange. The arguments are different text vs event. You can use secureTextEntry for password kind of masking: <TextInput secureTextEntry={true} /> https://facebook.github.io/react-native/docs/textinput.html#securetextentry

I'm planning to write a cross platform app using react native using Firebase for backend. I did some research and found the library called React-Native-Firebase. But this library seems to use native part of firebase(android and ios), and my concern is: If I use React-Native-Firebase to do backend jobs, will I need to write those logics AGAIN using normal Firebase(web version) for building web app with react? I thought this way because using firebase seems basically like calling Firebase API's in react native or react code.

I'm trying to build a Chromecast App with React Native, and my options for the Chromecast library are either an ObjectiveC version. With React Native, how would I get the ObjectiveC library into my React Native App? The React Native documentation walks you through writing a native module to expose JavaScript functions that can call Objective-C methods: https://facebook.github.io/react-native/docs/nativemodulesios.html. Chromecast App using React Native (Swift) https://github.com/holoed/ChromeCast_ReactNative

I see that someone made this for it: https://github.com/brentvatne/react-native-linear-gradient But is there support for it in RN itself? Something like style = StyleSheet.create({ backgroundGradient: "vertical", backgroundGradientTop: "#333333", backgroundGradientBottom: "#666666" }); Not at the moment. You should use the library you linked; they recently added Android support and it is by one of the main contributors of react-native. Looking for a similar solution I just came across this brand new tutorial, which lets you bridge a Swift gradient background (https://github.com/soffes/GradientView) library while walking through every step to get a working React component. It is a step-by-step tutorial, allowing you to build your own component by bridging the swift and objective-c component into a usable React Native component, which overrides the standard View component and allows you to define a gradient like the foll...

Below is the details about my environment and logs of the build failure. Anyone facing similar issue or know steps to overcome this please do point me out to relevant steps or docs. Xcode: 7.2.1 Node: v5.9.0 npm: 3.7.3 react-native-cli: 0.1.10 react-native: 0.22.2 Running "sudo react-native run-ios" leaves me with the below logs. LOGS: ** BUILD FAILED ** The following build commands failed: PhaseScriptExecution Run\ Script /Users/abc/Desktop/REACT-NATIVE/demo/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh (1 failure) Installing build/Build/Products/Debug-iphonesimulator/demo.app No devices are booted. Print: Entry, ":CFBundleIdentifier", Does Not Exist /Users/abc/Desktop/REACT-NATIVE/demo/node_modules/promise/lib/done.js:10 throw err; ^ Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/demo.app/Info....

Does anyone know how I can have a native UIViewController present or push a React Native view, and go back and forth between the two? If possible, I'd like to load the React Native view inside a UIViewController so I can retain my navigation bar, but use the React Native view. I've been reading the documentation, but I have not been able to find anything that works. I've tried a combination of this: // RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:nil launchOptions:nil]; // RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"My Test" initialProperties:nil]; NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; RCTRootView *reactView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"My Test" ...

I am trying to connect to redis server via npm redis. when creating react-native app. I am getting node_modules/redis/index.js : Module net` does not exist in the Haste module map This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following: 1. Clear watchman watches: watchman watch-del-all . 2. Delete the node_modules folder: rm -rf node_modules && npm install . 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache . 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-* . I wanted to know can we use normal npm modules while building react native apps ? or How would I connect to Redis via react-native

I'd like to upload an image by clicking on avatar component and then pick a picture from the device. Anyone knows if its possible using avatar component from react-native-elements? I have already added the permissons below: <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> Do you think I have to install the react-native-image-picker library as well? Thanks in advance, constructor(props: Object) { super(props); this.state = { image_uri: '' //initially set the state of image with default image }; } **your avatar component** <Avatar small rounded source = {{uri: this.state.image_uri}} onPress={() => this.openImagePicker()} activeOpacity={0.7} /> **import { showImagePicker } from 'react-native-image-picker';** captureMediaOrGetFromDeviceLibrary(options: Object = OPTIONS...

I am doing some research on react-native and android. Does anyone know the lowest api level react-native supports for android? I've searched all over their docs page and couldn't find it. Supported operating systems are >= Android 4.1 (API 16) and >= iOS 9.0. https://github.com/facebook/react-native/releases/tag/v0.56.0 iOS minimal version has changed to >=8.0 , follow the link, right after the first paragraph of the readme In their build version from 0.38 & above i believe they have upgraded lowest supported android API to 6.0(Marshmallow) as specified on the official website http://facebook.github.io/react-native/releases/0.40/docs/getting-started.html#content They seem not to have updated the information on the GIT docs.

How can i rebuild a layout of my react-native app? I need it when changed orientation. Detecting orientationchange with react-native-orientation plugin works well, but all layout in render() function does not changed. For example this not working. When i am using orientationchange function, alert works, but this.setState({bgColor: 'green'}); does nothing. state = { bgColor: 'green', orientation: 'PORTRAIT', }; componentWillMount() { if (this.state.orientation === 'LANDSCAPE') { if (Device.width > 768) { this.setState({bgColor: 'red'}); } } else{ this.setState({bgColor: 'green'}); } } render() { return ( <View style={[styles.appWrap, { backgroundColor: this.state.bgColor}]}></View> )} Most probably your handle orientation method is not bind to context. So you need to use this._orientationDidChange.bind(this) in your code. Try this ou...

We are building a mobile application using React-Native and need to embedd some sensitive data such as client secret keys/passwords into the mobile application itself. What is the standard practice on this in terms of security (hardest to reverse-engineer)? Should the data be at native code level as constants, resource files or react native javascript files? Thanks. you could use a library like react-native-keychain, which uses the native keychain libraries on iOS and Android Old question but really, the answer is obvious and I'm very surprised by the other answers you've got. ...need to embedd some sensitive data such as client secret keys/passwords into the mobile application itself. NO. You do not need to do this. This is poor design on so many levels, not only security wise because you are giving away your secrets. What happens when your client secret is leaked and you need to quickly replace it. Do you want to call all your users and ask t...

How would I go about animating from one color to another in React Native. I've found that by interpolating an Animated.Value you can animate colors by: var BLACK = 0; var RED = 1; var BLUE = 2; backgroundColor: this.state.color.interpolate({ inputRange: [BLACK, RED, BLUE], outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)'] }) and Animated.timing(this.state.color, {toValue: RED}).start(); But using this method, going from BLACK to BLUE, you have to go through red. Add more colors to the mix and you end up in a 1980s disco. Is there another way of doing this that allows you to go straight from one color to another? Given you have Animated.Value lets say x , you can interpolate color like this: render() { var color = this.state.x.interpolate({ inputRange: [0, 300], outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'] }); return ( <View style={{background...

I am trying to set up a connection with a WebSocket server in a React-Native application using the npm package react-native-autobahnjs. Here is my code : import autobahn from 'react-native-autobahnjs'; class websocket extends Component { componentWillMount () { console.warn("MOUNTING MAIN COMPONENT"); const connection = new autobahn.Connection({ url: 'wss://myserver/ws', realm: 'realm1' }); connection.onopen = () => { console.warn("onopen"); }; connection.onclose = (reason, details) => { console.warn("onclose : reason = " + reason + ", details = " + details); }; console.warn("connection.open()"); connection.open(); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> autobahn.js test page </Text> </View> ); } } I get the...

I wanted to use the Native IOS search bar from https://github.com/umhan35/react-native-search-bar and when I run npm install --save (http://facebook.github.io/react-native/docs/linking-libraries-ios.html) I get error bash: library-with-native-dependencies: No such file or directory. I tried to link the library manually but it fails without showing any error. Can some one help? I hope you did not type npm install <library-with-native-dependencies> --save -bash: library-with-native-dependencies: No such file or directory In case you did, it should have been npm install react-native-search-bar --save If you managed to link it manually and run it, try setting a width and height for the SearchBar ......... render(){ return (<SearchBar style={styles.searchBar} ref='searchBar' placeholder='Search'/>); } ......... const styles = StyleSheet.create({ searchBar:{ width: 200, height: 40 } }); Check whether module pres...

I'm new to react native moved from ReactJS I thought I can use same packages as my previous pure Reactjs app but I was wrong. What I'm trying to do is to make a websocket connection. I'm recently using autobahnJS package WAMP2 in my ReactJS app but when I moved to react native it seems autobahnJS doesn't support react-native connectToSocketFunction = () =>{ // autobahn code let connection = new autobahn.Connection({ url: 'wss://api.example.com/websocket/', realm: 'Realm1', authmethods: ['jwt'] }); connection.onopen = (session, detalis) => { session.subscribe('ChannelName', (data)=>console.log(data)); }; Anyone know how does react native make socket connection based on my code? I have tried react-native-autobahnjs doesn't work The React Native documentation mentions support for WebSocket connections: var ws = new WebSocket('ws://host.com/path'); ws.o...

Save 'unique Id' as session variable in react native You can add the unique id using AsyncStorage like this : AsyncStorage.setItem('Key Name', uniqueId) And after that you can get from other component like this : AsyncStorage.getItem('Key Name').then((value) => console.log(value)) For details you can read from the documentation. I hope this answer can help you. import { AsyncStorage} from 'react-native'; AsyncStorage.getItem('Key Name').then((value) => console.log(value)) we can get value from asyncstorage in any component of app. number of another function are used like merge,remove etc.please see documentation

I want to create a generic element which returns div in the web and View in React-Native. Currently, it looks like this: export const Element = ({children, ...rest}) => { if (typeof document != 'undefined') { return <div {...rest}>{children}</div> } try { const View = require('react-native').View; return <View {...rest}>{children}</View> } catch (e) { return {}; } }; I use try-catch because I get this error: Module not found: Error: Can't resolve 'react-native' How can I conditionally require React-Native without the need for try-catch?

I am new to react native and need your help. I am new to react native I am trying to integrate blink sdk with my react native app. I have exposed a native method to react native js using RCT_EXPORT_METHOD() . JS button click is invoking this native method. Now from this native method I want to open camera using: /* Allocate and present the scanning view controller */ UIViewController<PPScanningViewController>* scanningViewController = [coordinator cameraViewControllerWithDelegate:self]; scanningViewController.autorotate = YES; scanningViewController.supportedOrientations = UIInterfaceOrientationMaskAll; Now there are two problems: If I run it just like that, it gives me red screen saying "invoke the method on main thread". Now to run it on main thread, I added -(dispatch_queue_t)methodQueue { return dispatch_get_main_queue(); } Still it is not running and saying not present in view hierarchy. Please help.

Hello,I'm new in React-native I got this from yesterday when I going to execute my react-native project. I clean cache , gradle clean, npm restart, Pc restart, react-native start not getting anything how I have to solve ? Your help will be highly appreciatable I think the issue is with watchman can you please check weather watchman is installed properly.

I can't install react native react-native-maps, i get this error when i try to build with react-native run-android (I didn't try on iOS yet) : A problem occurred configuring project ':app'. Could not resolve all dependencies for configuration ':app:_debugApk'. Configuration with name 'default' not found. I followed the instructions here : https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md when i run : react-native link I get : rnpm-install info iOS module react-native-maps is already linked rnpm-install info Android module react-native-geocoder is already linked rnpm-install info iOS module react-native-geocoder is already linked It seams that it worked on iOS but not on android although for geocoder it worked (and the service is working fine). So i follwed manual instructions and edited (but i still get the error above) : android/app/build.gradle android/settings.gradle MainApplication.j...

This article https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/ talks about AccessibilityInfo API as part of react -native AX APIs, but I can't seem to find that in their repository. Is that not supported anymore? https://github.com/facebook/react-native/find/master It's still supported. Check AccessibilityInfo.ios.js: https://github.com/facebook/react-native/blob/cfe003238ab8c5686d185f6ce9e0776eeb4bb729/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js

I implemented native module on React Native / Android Project. In android native project, I used startActivity function to move to the new activity I created manually. I will share some of the codes. //MainApplication.java public class MainApplication extends MultiDexApplication { ... // Needed for `react-native link` public List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new AnExampleReactPackage(this) ); } ... } Here, if I use the code new MainReactPackage() then I see the error while running app on my android device. Native module AccessibilityInfoModule tried to override AccessibilityInfoModule for module name AccessibilityInfo. If this was your intention, set canOverrideExistingModule=true But I'm not sure how I can set the canOverrideExistingModule . How can I solve this? Relative Question: React Native: Android activity go back Do you really want to overri...

I am new to react/react-native/babel world. I am trying to make async/await work. package.json { "name": "App", "version": "0.0.5", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.44.0", "react-native-fs": "^2.3.3" }, "devDependencies": { "babel-jest": "20.0.3", "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-preset-react-native": "1.9.2", "babel-preset-stage-3": "^6.24.1", "jest": "20.0.3", "react-test-renderer": "16.0.0-alpha.6" }, "jest": { "preset": ...

Is it possible to upload file (images) to server with react-native using FormData? Tried to use it like this: const data = new FormData(); data.append('file', {uri: 'file://' + fileObject.uri, name: 'image.jpg', type: 'image/jpg;'}); const request = { method: method, mode: 'cors', credentials: 'include', headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d', }, body: data } return fetch(`${API}/${url}`, request).then((response) => { return Promise.all([Promise.resolve(response), response.json()]); }) For web FormData works as expected but for react-native no. Tried to use react-native-fetch-blob but here is no ability to use credentials ( important for me ) so server sending unauthorized Hope your help! For image pick using react-native-image-picker I faced the same proble...

I want to get html in web view. I read react-native-doc(https://facebook.github.io/react-native/docs/webview.html#content) but I cannot found it. Can I do this? I found this. https://github.com/alinz/react-native-webview-bridge But I could not use this in android. This works only in android. I don't know this problem is only my problem or library problem. In Android I use onNavigationStateChange. Read https://github.com/facebook/react-native/issues/586#issuecomment-90826117 I think this is not good way. But I really need this. so I used this. In case anyone comes across this in the future. You options here is to use javascript. You can use injectedJavaScript on the webview to inject a window.postmessge($('body').html()) and then handle the reply in the onMessage function on the webview. The cleaner way would be to fetch the page yourself and then load it into the webview.

Has anyone been successful in using the ViewPagerAndroid component? EDIT react-native 0.13.0-rc The error I'm getting is: No ViewManager defined for class AndroidViewPager Original post below react-native 1.2.0 I keep getting this error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. I tried their code exatly as in the UIExplorer examples, ViewPagerAndroidExample.android.js render: function() { var pages = []; for (var i = 0; i < PAGES; i++) { var pageStyle = { backgroundColor: BGCOLOR[i % BGCOLOR.length], alignItems: 'center', padding: 20, }; pages.push( <View key={i} style={pageStyle} collapsable={false}> <Image style={styles.image} source={{uri: IMAGE_URIS[i % BGCOLOR.length]}} /> <LikeCount /> <...

Hello, I'm trying to use push notification in react native and for that, I am using react-native-fcm. It is working on Android and it allows the receiving of notifications from firebase. However, on IOS, I get build errors as shown in the attached photo. I did react-native link, made sure the lib was in build phases for linked binaries and also modified the AppDelegate as mentioned in the installation steps. Has anyone encountered the below error? I did a project clean, delete the build folder but to no avail. Install pods for FCM... https://medium.com/google-cloud/push-notification-for-react-native-bef05ea4d1d0 Please check So, after much struggling... The issue was not with IOS or the react-native-fcm module. It was with an outdated pod repository. After updating the pod repo, "pod update Firebase/Core", all the errors disappeared.

Does React Native Navigation experimental support slide from bottom, slide from left, fade effects etc? If yes how do we do it. Please help. When you render your scene using renderScene of NavigationTransitioner , you get props object that contains layout , position , scene and progress . You can use them with your custom interpolation function to create any animation you like. At this time, react native seems to have only right-to-left and bottom-to-up animations out-of-the-box. You can use them via NavigationCardStackStyleInterpolator : forHorizontal and forVertical . See: NavigationCardStackStyleInterpolator.js for more details. If your code looks like: RN-NavigationExperimental-Redux-Example You can define style property of NavigationCard like: <NavigationCard {...props} style={NavigationCardStackStyleInterpolator.forVertical(props)} renderScene={this._renderScene} key={props.scene.navigationState.key} /> This will change transition fro...

React Native documentation tells you to change source code manually to switch between development and production builds. https://facebook.github.io/react-native/docs/running-on-device.html#building-your-app-for-production Is this the only option? Why isn't there a way that allows you to flag this and generate a production build using the same source code?

Every time I run my react-native project it's stuck in 99%. I've tried to run ./Gradlew clean and kill adb but nothing works. I already used my device via usb, genymotion and android studio emulator and it always the same... Building and installing the app on the device (cd android && gradlew.bat install Debug)... Incremental java compilation is an incubating feature. :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE :app:checkDebugManifest :app:preReleaseBuild UP-TO-DATE :react-native-maps:preBuild UP-TO-DATE :react-native-maps:preReleaseBuild UP-TO-DATE :react-native-maps:checkReleaseManifest :react-native-maps:preDebugAndroidTestBuild UP-TO-DATE :react-native-maps:preDebugBuild UP-TO-DATE :react-native-maps:preDebugUnitTestBuild UP-TO-DATE :react-native-maps:preReleaseUnitTestBuild UP-TO-DATE :react-native-maps:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE :react-native-maps:prepareComAndroidSupportSupportV42400Libr...

I can't find any instructions on how to install and run one of the other Examples provided in 'https://github.com/facebook/react-native/tree/master/Examples' such as 'https://github.com/facebook/react-native/tree/master/Examples/Movies'. The tutorial only tells you to do react-native init AwesomeProject which grabs 'https://github.com/facebook/react-native/tree/master/Examples/SampleApp'. If I clone the entire 'react-native' repository, and then run npm install npm start From the root folder (i.e. '/react-native'), and then open '/react-native/Examples/Movies/Movies.xcodeproj' in Xcode, and Run the project, it seems to build fine. The Simulator comes up, shows a "Movies" intro screen for the app, but then the red screen of death appears with a print out of: :0 and Terminal, where 'npm start' is running at the root folder, prints out: Error: EISDIR, read at Error (native) [02:35:02] <STA...

Is it possible to connect to thermal receipt printer via Bluetooth in react native? If yes the how to connect receipt printer via Bluetooth in react native? Yes it's possible to connect a React Native app to Printer via Bluetooth. The package called react-native-ble-plx allows you to do so. Read their documentation at Github.io You can also try react-native-ble-manager : Full source code can be found here.

I have a number of components that are being integrated into Android and iOS apps, and would like to have some metadata that lives alongside the React Native code that gives the apps some information about the components before they are mounted/loaded . The native React Native framework allows one to inject constants and functions through "native modules," which can be accessed globally without being tied to a component, activity, view controller, etc. Basically, we can easily send data Native => React Native. Is there a simple way to do the same thing from React Native => Native, like exposing a constant or a function which can be accessed through the React bridge/context by the native app? I needed to pass some data from React Native to Native(iOS) for that I have used Notifications. May be this can help some one. Import NativeModules in your React Native file import { StyleSheet, AppRegistry, Text, TextInput, View, NavigatorIOS, Butt...

I'm about to develop offline dictionary app with React Native. But I'm not sure which storage is the best in React Native between SQLite & AsyncStorage . As I read some online documentation and tutorials, when I use SQLite I must need to configure SQLite library in each app iOS and android . And when I look through AsyncStorage not sure it can be handle or not million records inside it. That's why I like to know which one should I use between SQLite & AsyncStorage or some cool library out there for React Native? For that case, I recommend using Realm. It is simply much faster than AsyncStorage and SQLite. Read this and this for more info. AsyncStorage has slow runtime and has no indexing capabilities. It accepts only strings as its value and you need to serialize data before inserting and deserialize when reading. So it's not good for large amount of data. It also has 6MB limitation for Android devices.

Working on a React Native app I'm trying to make a simple referral system if the user shares their link to their friend then when their friend uses the link and registers successfully it will send a request. for now I am using the react-native Share: https://facebook.github.io/react-native/docs/share.html and the react-native Linking: https://facebook.github.io/react-native/docs/linking.html This is working ok for now but the problems comes when a user doesn's have the app yet. How to redirect to installation and keep the data from the link through the install process. Using firebase for the login I thought of using the firebase invites however it is not compatible to use with react-native. would their be any other alternate solution?

I'm new to using react-native and also the fetch api in javascript. I authenticate my app with a backend and after several refreshes in my ios simulator the app checks if it's authenticated with the backend on the initial loading and to my surprise, it is! This begs the question of where and what is persisting inside react-native and the fetch api? Thanks! fetch on React Native is implemented on top of native-level APIs and differs slightly from the whatwg specification and the well-known github polyfill. This means that when the actual HTTP request is made, it's made by the native networking stack on iOS or OkHttp3 on Android, and in each case, it's the underlying ObjC or Java code that handles and stores the cookies, away from your JS code. Until this commit of Nov 2015, cookies weren't properly persisted on Android at all, but since RN 0.16 they've been supported on both platforms regardless of the credential setting in your fetch calls....

* NOTE [RESOLVED] * React-Native-Elements issue : SearchBar missing functions #877 soln : updated react-native-elements package from 1.0.0.0-beta2 -> 1.0.0.0-beta4 Based on the DOCS, My goal is to be able to call focus() on the 'Search Bar' component <SearchBar ref={search => this.search = search} onClearText={()=>this.handleOnClearText()} /> However, when I capture the onClearText( ) action I am unable to call : handleOnClearText = () => { if(this.search != null) this.search.focus() . //=====> Error here } I get error : ExceptionsManager.js:65 TypeError: _this.search.focus is not a function I am able to reference my SearchBar component but the focus() methods is missing. COMPLETE CODE: import React, { Component } from "react"; import {Text,View,StyleSheet,Platform,Keyboard,TextInput} from "react-native"; import {SearchBar} from "react-native-elements"; export default clas...

Install APK debug to my device failed. jianglinghuadeMacBook-Pro:hello jianglinghua$ react-native run-android JS server already running. Building and installing the app on the device (cd android && ./gradlew installDebug... WARNING [Project: :app] Current NDK support is deprecated. Alternative will be provided in the future. :app:preBuild UP-TO-DATE ...... :app:assembleDebug UP-TO-DATE :app:installDebug Installing APK 'app-debug.apk' on 'MI NOTE LTE - 6.0.1' Unable to install /Users/jianglinghua/Desktop/hello/android/app/build/outputs/apk/app-debug.apk com.android.ddmlib.InstallException: Failed to establish session at com.android.ddmlib.Device.installPackages(Device.java:894) ........ at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61) :app:installDebug FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceExcep...