Iam new to react native, how can I create plugin in react-native.I have my own Embedded framework,Where I want to include this framework in plugin.Any idea
Please any help would be highly appreciated.
↧
How to create plugin in react native
↧
How to create plugin for iOS framework using React Native
Iam new to react native, how can I create plugin in react-native.I have my own Embedded framework,Where I want to include this framework in plugin.Any idea
Please any help would be highly appreciated.
↧
↧
Can't show Image by URI in React Native iOS Simulator
I'm using react-native 0.28.0
I'm trying to show an image on iPhone simulator according to this tutorial: http://www.appcoda.com/react-native-introduction/
var styles = StyleSheet.create({image: { width: 107, height: 165, padding: 10 }}var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'Then in the render() function, I add this:
<Image style={styles.image} source={{uri:imageURI}} />The space allocated for the image is there, but the image is not shown.
However, if I use local image instead, the image will be shown.
var Picture = require('./content.jpeg')In render() function:
<Image source={Picture} style={styles.thumbnail} />How can I show picture using URI as source?
↧
'folly/Portability.h' file not found React library
Running into a build failure on Xcode with my react native project.the error is 'folly/Portability.h' file not found
I have been trying to fix this issue on my own for the last few days but unable resolve it.
RN info:
React Native Environment Info: System: OS: macOS 10.14 CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz Memory: 641.79 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.6.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 IDEs: Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.8 => 0.59.8 npmGlobalPackages: react-native-cli: 2.0.1podfile
# Uncomment the next line to define a global platform for your projectplatform :ios, '9.0'# Required by RNFirebasepod 'Firebase/Core', '~> 5.20.1'target 'WhosThat_app' do # Uncomment the next line if you're using Swift or would like to use dynamic frameworks # use_frameworks! pod 'Firebase/Firestore' pod 'Firebase/Storage' pod 'Firebase/Auth' pod 'GoogleMaps', '~> 2.7.0' pod 'Fabric', '~> 1.10.1' pod 'Crashlytics', '~> 3.13.1' # Pods for WhosThat_app pod 'RNImageCropPicker', :path => '../node_modules/react-native-image-crop-picker' pod 'RNBackgroundGeolocation', :path => '../node_modules/react-native-background-geolocation' pod 'RNBackgroundFetch', :path => '../node_modules/react-native-background-fetch' pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info' pod 'React', :path => '../node_modules/react-native' pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'Folly', podspec: '../node_modules/react-native/third-party-podspecs/Folly.podspec' target 'WhosThat_app-tvOSTests' do inherit! :search_paths # Pods for testing end target 'WhosThat_appTests' do inherit! :search_paths # Pods for testing endendTried removing the pods folder and reinstalling them and removing node-modules folder
↧
React-Native Firebase ML Kit Vision Image Labeling not working with iOS
I am trying to use RNFirebase MLKit image labelling in my RN app. It works fine on android, but on iOS i get the following error,
NativeFirebaseError: [vision/file-not-found] The local file specified does not exist on the device.
The images are taken though "@react-native-community/cameraroll" and the ios image path is as follows,
ph://45983F53-3C96-42D0-9337-C9F681293627/L0/001
The fixes i have tried are,
import {utils} from '@react-native-firebase/app';${utils.FilePath.PICTURES_DIRECTORY}/${ // d[key].node.image.filename // }'assets-library'+'://asset/asset.JPEG?id='+ d[key].node.image.uri.substring(5).replace('/L0/001', '') +'&ext=JPEG'ph-upload://45983F53-3C96-42D0-9337-C9F681293627/L0/001None of the above worked.
The Build versions are,
"react-native": "0.62.2"."@react-native-community/cameraroll": "^1.5.2"."@react-native-firebase/ml-vision": "^7.0.1","@react-native-firebase/app": "^7.0.1",↧
↧
How to save downloaded files and view in File app using React Native in iOS?
I am using react-native-fs to download files from server and save them. Once they are downloaded I am using react-native-file-viewer to open them. This process totally works fine: I am able to download and open it in the viewer, but I am not able to save the file in the File application from the viewer, though I can save in iCloud but not in the iPhone.The downloaded file is stored in a place like
/var/mobile/Containers/Data/Application/CCF6CD16-A62A-48BB-92F3-3021195CFE0C/Documents/react-native-pdf.pdfbut this is not shown in the File app.
The code I am using to download and view the file is as follows
RNFS.downloadFile({ fromUrl: 'http://www.mywebsite.com/react-native-pdfurl.pdf', toFile: `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`, }).promise.then((r) => { console.log('yo yo yo '); this.setState({ isDone: true }); const path = `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`; FileViewer.open(path) .then(() => { // success }) .catch(error => { // error }); RNFS.readDir(RNFS.DocumentDirectoryPath).then(files => { console.log(files); }) .catch(err => { console.log(err.message, err.code); }); });The readDir gets me the name path of the file saved. But this is not reflected in any folder in the File application.My question is how can I save the file in a way that it shows in the File application.
↧
React Native - iOS Collection View
Which approach should I use in React Native where I need to implement a horizontal scroll like collection view? The look and feel are needed to be exactly similar to the native iOS UICollectionView.
↧
react-native: Get error, invariant violation: View config not found of RNSVGCircle
Ok so basically Im importing many libraries to a project all at once, and trying them out one by one. Right now Im trying to make SVG work (Google Sign In and Gesture Handler work accordingly), but after running this code:
** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, { useState } from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, StatusBar, Text,} from 'react-native';import Svg, { Circle } from 'react-native-svg';import { TapGestureHandler, LongPressGestureHandler, State} from 'react-native-gesture-handler'import OneSignal from 'react-native-onesignal'import { GoogleSignin, GoogleSigninButton, statusCodes,} from '@react-native-community/google-signin';//aaimport RNlocalize from 'react-native-localize'import YouTube from 'react-native-youtube';//import Share from 'react-native-share';const App: () => React$Node = () => { const [text, setText] = useState('Yass') const _handleStateChange = ({ nativeEvent }) => { if (nativeEvent.state === State.ACTIVE) { setText('Long Press') } if (nativeEvent.state === State.END) { setText('Back to Yass') } } return (<View><View style={{ padding: 80 }}><GoogleSigninButton //a style={{ width: 192, height: 48 }} size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} /><Text>HOLAaApessssnesdsdA</Text><LongPressGestureHandler onHandlerStateChange={_handleStateChange}><Text style={styles.buttonText}>Longpress me</Text></LongPressGestureHandler><Text>{text}</Text></View><View><Svg height="100" width="100"><Circle cx="50" cy="50" r="50" fill="pink" /></Svg></View></View> );//a};const styles = StyleSheet.create({ buttonText: { borderWidth: 1, }});export default App;The following error jumps
ExceptionsManager.js:44 Invariant Violation: requireNativeComponent: "RNSVGCircle" was not found in the UIManager.This error is located at: in RNSVGCircle (at Circle.tsx:24) in Circle (at App.js:71) in RNSVGGroup (at G.tsx:28) in G (at Svg.tsx:170) in RNSVGSvgView (at Svg.tsx:157) in Svg (at App.js:70) in RCTView (at App.js:69) in RCTView (at App.js:56) in App (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)Tried readding the library to the project, reinstalling and even manually adding the RNSVG podspec to my podfile. Im out of ideas right now.
ps: Im new on React Native and could be just a big dumb mistake on my part, so bear with me and thanks in advance
↧
How can I make two phones running the same app communicate through bluetooth [closed]
I would like to build an app in which a smartphone (using any OS) can discover other smartphones in the surroundings using Bluetooth. I know this can be probably achieved using BLE.
However, I would like a communication method, in which the devices can "ping" each other through Bluetooth by pressing a button within the app. The app should display something on both devices (like an image) for a few seconds if the buttons in both devices are pressed at the same time. For this, I assume BLE is not enough as it does not support communication between two smartphones and the BLE central and peripheral model does not seem to fit my goal.
I'm new to app development and while I found multiple questions on this, they are pretty old. Any thoughts on how this can be achieved.
Please give me pointers to libraries/resources which would help me achieve this.
↧
↧
Generate "out of view" markers indicators on a map with React Native
For a project, I have to indicate, with colored arrows, in which direction are the markers that aren't shown in the visible region.
When the user scrolls, or zoom on the map, the arrows move accordingly to where the not visible markers are compared to the current center of the visible region.
Here is a picture that demonstrate what is needed :
I am using react-native-mapview and added regular views over the map to show the indicators.
I've started working on this by comparing the coordinates and calculating the point of intersection between lines (border lines and line made by the 2 coordinates) at each frame. It works fine on iOS but is pretty laggy on Android, especially chan there are a lot of markers involved.
What would be the best and optimized way to do this ?
↧
Cannot turn autoCorrect to {false} in react native TextInput
On my TextInput change text, I detect whether the user pushed the @ button for mentions.
onChangeText(text){ const suggestTrigger = text.match(/\B@[A-Za-z0-9]*$/i) //grab "@" trigger const searchQuery = (suggestTrigger && suggestTrigger.length > 0) ? suggestTrigger[0] : null; this.setState({ searchQuery: searchQuery })}Then, in my render, I do:
<TextInput autoCapitalize={this.state.searchQuery ? "none" : "sentences"} autoCorrect={this.state.searchQuery ? false : true} onChangeText={this.onChangeText}/>However, even when I do this, the autoCorrect does not turn off.
I still see this:
This is causing problems because oftentimes the system replaces the entire mention with a different word altogether.
How can I turn autoCorrect and autoCapitalize off when the user pushes the @ button?'I have even tried rendering an entirely different , but the behavior remains.
↧
Access local storage iTunes music (ios) within expo / React Native
I'm building a music player using React Native / Expo and need access to play iTunes music from local storage (outside my app directory), target platform is iOS (Android later).
How can I list (and open) all local iTunes music files within Expo/React Native?
↧
Cancel ApplePay and GooglePay dialog
I'm trying to test an App and I want to click on the cancel button or any other button on the (Apple|Google)Pay dialog and I can't find a way to do that !
↧
↧
In development, how to listen to laptop keystrokes in react native app
I am looking to trigger functions from within a RN app, for example logging out without clicking a button in the app. It's for testing/development. Is there a way to send a message to the app from my laptop keyboard to the app in development? Note I am not trying to do it from the keyboard on the Android/iOS device, but instead from my laptop when running the simulator/emulator.
↧
problems library react-native-contacts not working ios
I was testing an example from the react-native-contacts library in which I leave the link: https://github.com/morenoh149/react-native-contacts/tree/master/example
- git clone https://github.com/rt2zz/react-native-contacts.git
- cd react-native-contacts/example
- npm install
- cd ios && pod install && cd ..
- npx react-native run-ios
at the moment of running the example, a view is displayed with the supposed contacts that I have stored in ios but nothing can be displayed.
my problem is that I don't know what can be missing in the example from the same library, in android it works perfect. But the problem is ios in which it is not working.
please help.
↧
How to solve "config.h file not found"? when running app from the react native on the device?
Getting error "Config.h file not found, lexical or preprocessor error."
I am running app in the device from the xcode project.
I have google and found many solutions but haven't worked, I tried this
https://github.com/facebook/react-native/issues/14382
And when I try to run in the iOS simulator getting this error
https://github.com/facebook/react-native/issues/10401
Tried to follow the above url but didn't work.
Please let me know how to solve the issue.Thanks
↧
React native webview loses injected data on state change
Is there any way to keep injected javascript data in the webview when there are state changes?
I use the injectJavascript prop to enter data into a web view. The data is entered as expected but when the react native state changes the data is lost which probably means the webview is reloaded. Is there any way to keep this data after state changes?
Verified on android device
↧
↧
How to embed a Flutter ui view into a React Native app?
We are merging some flutter and react native components. Thus, in the React Native app, we need to embed some Flutter views.
Thanks for any ideas and suggestions!
P.S. My naive thoughts: Flutter can be embedded into native Android/iOS apps. At the same time, React Native allow rendering a native component. Thus, I can make Flutter a native Android/iOS component, and then let RN render it. But I do not know whether this will have a huge overhead, or any traps that I have not considered?
↧
How to save remote GIF to album in iOS in React Native?
Thanks for reading, I am trying to save remote GIF to system album in React Native in iOS.
I have try the following ways but all of them making GIFs as static images.
I create a new React Native project of 0.62.2 to run these code
"dependencies": {"@react-native-community/cameraroll": "^1.7.2","react": "16.11.0","react-native": "0.62.2","react-native-fs": "^2.16.6","rn-fetch-blob": "^0.12.0" }- Save GIF directly by CameraRoll.
Not working because https://github.com/react-native-community/react-native-cameraroll/issues/16
const uri = 'https://i.loli.net/2020/05/28/YKaCdO1pexuThbN.gif'CameraRoll.saveToCameraRoll(uri);- Download GIF firstly by react-native-fs
const img = 'https://i.loli.net/2020/05/28/YKaCdO1pexuThbN.gif'const storeLocation = `${RNFS.TemporaryDirectoryPath}`;const pathName = `${new Date().getTime()}_babycam_moji.gif`;const downloadPath = `${storeLocation}${pathName}`;const ret = RNFS.downloadFile({ fromUrl: img, toFile: downloadPath,});ret.promise.then((res) => { console.log('res', res); if (res && res.statusCode === 200) { const promise = CameraRoll.saveToCameraRoll( `file://${downloadPath}`, ); promise.then(() => {}); } else { }});- download GIF firstly by rn-fetch-blob
RNFetchBlob.config({appendExt: 'gif', fileCache: true}) .fetch('GET', img) .then((res) => { console.log('res', res.path()); CameraRoll.saveToCameraRoll(res.path());});How can I save GIFs to album in iOS in react-native?
Thanks
↧
How to awake phone screen when app is in background and screen is locked in react native?
I'm making an application, Let's see what i want to do actually. I executed my code using react-native run-android and my home screen is active now. Then i went to the background and locked my phone using lock key of the mobile phone. then i'm sending notification to the app, the notification is being showing in the phone but the screen is still locked, home screen is still inactive. I want to awake my phone on receiving notification and i have used react-native-firebase for push notification.
Thank You.
I had tried to make it using react-native-keep-awake.
On receiving the notification, My code is KeepAwake.activate() but its not awaking my screen.
↧