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

11 4 I have updated the iOS SDK platform to version 14.5 . The xCode version is now 12.5 . After updating, I cannot launch the application on my device. An error: No matching function for call to 'RCTBridgeModuleNameForClass' . I tried reinstalling the pods but it didn't help. How can fix it? Thanks ios xcode react-native sdk Share Improve this question Follow ...

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

22 4 I have a react native app which is on play store for some time and recently i received this important notice from play store, stating if i don't fix this my app will be removed from play store. Can anyone tell me what this is and how to fix it? Here is the complete message from Play store We've detected that your app contains the requestLegacyExternalStorage flag in the manifest file of 1 or more of your app bundles or APKs. Developers with apps on devices running Android 11+ must use Scoped Storage to give users better access control over their device storage. To release your app on Android 11 or newer after May 5th, you must either: Update your app to use more privacy friendly best practices, such as the Storage Access Framework or Media Store API ...

5 I am getting RNSScreen error even though I have installed all related packages and followed react-navigation guide (https://reactnavigation.org/docs/getting-started#installation) but nothing worked for me. react-native react-navigation react-navigation-v5 Share Improve this question Follow asked Apr 2 at 15:02 ...

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

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