unname coder's blog

7 2 I have a hook called useQueryEvents that 1) fetches all past transactions for a user and 2) listens to the network for incoming/outgoing transactions. In both cases the transactions are passed into a function addActionToActivity that simply appends it to the activity array and updates it in the context state under the key activity . I can't get the activity to sync correctly. Whenever the state updates it does not have the last transaction because it's always one step behind. If I add activity to the dependancy it works but then starts a new listener (due to the whole function being called again with the new activity value) which causes an infinity-like-loop which keeps switching up the state. function useQueryEvents() { const { state: { connectedNet...

6 1 Working on Webpack 5 and Storybook integration in our React apps' repository. Mainly upgrading from Webpack v4 to v5 because its support has been announced here in this blog post officially. Following the suggested full instructions. With the below mentioned setup I get the following error message on the console: <i> [webpack-dev-middleware] wait until bundle finished 10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished: /opt/app/node_modules/webpack/lib/DefinePlugin.js:549 const oldVersion = compilation.valueCacheVersions.get(name); ^ TypeError: Canno...

7 2 I'm not able to build a React Native project, which built correctly using Xcode 11, using Xcode 12.5. I can no longer use Xcode 11 because only more current versions of Xcode carry the necessary API to publish/upload to TestFlight and the app store. Now I get three build errors: Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *' Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *' Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *' I also noticed that deployment targets were a...

11 2 After upgrading Xcode to 12.5 and iOS to 14.5, I can't run the iOS app on a real device nor in the simulator. After running npm run ios , I get this message: The following build commands failed: CompileC .../Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper-Folly.build/Objects-normal/x86_64/DistributedMutex.o /Users/guilherme/Documents/Dood/ios/Pods/Flipper-Folly/folly/synchronization/DistributedMutex.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler If I try to run the app on a real device using Xcode, this is the error I get (related to Flipper-Folly): .../ios/Pods/Headers/Private/Flipper-Folly/folly/synchronization/DistributedMutex-inl.h:1051:5: 'atomic_notify_one<unsigned long>' is unavailable Id...

3 2 The first snippet is the code im working with and below is the error it throws and it happens on every "yield select" portion that is in the code and im not sure what my next step is. function* onLoadingDomainsresult() { const pathname = yield select(getPathname); interface Params { hastag: string; } 'yield' expression implicitly results in an 'any' type because its containing generator lacks a return-type annotation. TS7057 113 | 114 | function* onLoadingDomainsresult() { > 115 | const pathname = yield select(getPathname); | ^ 116 | 117 | interface Params { 118 | hastag: string; javascript reac...

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'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.

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...

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...

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.

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 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'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.

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....

I am architecting for new application and finalized to use react for web and react native for mobile and graphQl. Now I am wondering whether to build a server using node and express or to use Vulcanjs and build web application using meteor, react and graphQl? My main concern is about mobile application, if meteor goes well with react native? Is it better to do server side rendering for mobile application? react-native-meteor works fine with React Native app with Meteor backend. There is no need of server side rendering for Mobile Application with React Native. If you are using Meteor and React as web application you can reuse the logic of most of the components in React Native application. react-native-meteor will ensure the reactivity of mobile application and this package won't require any REST APIs to work with Meteor backend.