Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 16565 articles
Browse latest View live

Tried to register two views with the same name RCTScrollView

$
0
0

i try to run my react native app to ios but i got this error, while in android the app work just fine, do someone know about this ?

xcode 11.5,rn 0.61.5,using react native cli

i already search on several site but dont seem find any solution, here the screen shoot :

enter image description here

"dependencies": {"@microsoft/signalr": "^3.1.3","@react-native-community/async-storage": "^1.7.1","@react-native-community/datetimepicker": "^2.2.1","@react-native-community/masked-view": "0.1.5","@react-native-community/picker": "^1.6.1","@react-native-community/viewpager": "3.3.0","@sentry/react-native": "^1.4.1","axios": "^0.19.1","color": "^3.1.2","ellipsize": "^0.1.0","form-data": "^3.0.0","google-translate": "^3.0.0","i18n-js": "^3.5.1","intl": "^1.2.5","moment": "^2.24.0","moment-range": "^4.0.2","numeral": "^2.0.6","opentok-react-native": "^0.12.2","react": "16.9.0","react-cookies": "^0.1.1","react-native": "0.61.5","react-native-amazing-cropper": "^0.1.1","react-native-biometrics": "^2.1.4","react-native-camera": "^3.17.0","react-native-collapsible": "^1.5.1","react-native-daterange-picker": "^1.1.3","react-native-device-info": "^5.5.3","react-native-file-picker": "0.0.19","react-native-geocoder": "^0.5.0","react-native-gesture-handler": "^1.5.3","react-native-image-crop-tools": "^1.3.4","react-native-image-picker": "^2.3.0","react-native-localize": "^1.4.0","react-native-location": "^2.5.0","react-native-masked-text": "^1.13.0","react-native-onesignal": "^3.6.3","react-native-overlay-section": "0.1.13","react-native-paper": "3.4.0","react-native-reanimated": "^1.4.0","react-native-responsive-screen": "1.4.0","react-native-safe-area-context": "0.6.2","react-native-screens": "2.0.0-alpha.22","react-native-vector-icons": "^6.6.0","react-native-webview": "8.1.1","react-navigation": "^4.0.10","react-navigation-stack": "^2.0.4","react-navigation-tabs": "^2.7.0","react-redux": "^7.1.3","reanimated-bottom-sheet": "1.0.0-alpha.18","redux": "^4.0.5","redux-persist": "^6.0.0","redux-thunk": "^2.3.0","sendbird": "3.0.117","styled-components": "^4.4.1","throttle-debounce": "^2.1.0","validator": "^12.1.0"

},


How to fix iOS/Xcode build error, undefined symbol `__C.NSURLSession.DataTaskPublisher`?

$
0
0

When adding a cocoapods dependency, we started getting build errors like these:

Undefined symbols for architecture x86_64:"type metadata accessor for (extension in Foundation):__C.NSURLSession.DataTaskPublisher", referenced from:      (extension in TinyNetworkingObjcIO):__C.NSURLSession.load<A>(TinyNetworkingObjcIO.Endpoint<A>) -> Combine.AnyPublisher<A, Swift.Error> in libTinyNetworkingObjcIO.a(Endpoint.o)      lazy protocol witness table accessor for type (extension in Foundation):__C.NSURLSession.DataTaskPublisher and conformance (extension in Foundation):__C.NSURLSession.DataTaskPublisher : Combine.Publisher in Foundation in libTinyNetworkingObjcIO.a(Endpoint.o)"protocol conformance descriptor for (extension in Foundation):__C.NSURLSession.DataTaskPublisher : Combine.Publisher in Foundation", referenced from:      lazy protocol witness table accessor for type (extension in Foundation):__C.NSURLSession.DataTaskPublisher and conformance (extension in Foundation):__C.NSURLSession.DataTaskPublisher : Combine.Publisher in Foundation in libTinyNetworkingObjcIO.a(Endpoint.o)"(extension in Foundation):__C.NSURLSession.dataTaskPublisher(for: Foundation.URLRequest) -> (extension in Foundation):__C.NSURLSession.DataTaskPublisher", referenced from:      (extension in TinyNetworkingObjcIO):__C.NSURLSession.load<A>(TinyNetworkingObjcIO.Endpoint<A>) -> Combine.AnyPublisher<A, Swift.Error> in libTinyNetworkingObjcIO.a(Endpoint.o)ld: symbol(s) not found for architecture x86_64clang: error: linker command failed with exit code 1 (use -v to see invocation)

These errors just appear kind of "out of the blue" after we added a new dependency to our Podfile, with no info about what caused them and what part of the code it originates from, they're just printed after the build and during the linking stage, which now fails.

What does this error mean? What can be done to try and resolve it?

This happens to be a react-native generated XCode project, not sure if that's relevant.

Get User location and send to Backend to store in database every hour in React native(Android & IOS) & Rails 6 API

$
0
0

I want to store the Mobile app user location every Hour.

My question is How to trigger the API which gets the location.

Q1 - The following are the flow of getting location feature but do not know its correct.

1 - React Native will send data to the database to store every Hour(is it possible to trigger from the front-end?)

2 - Create a Cron job in Rails which calls the API to get the user location every hour(In this Will it be an extra load on the rails backend server?)

3 - Create a silent push notification from the Rails side and it will trigger the Front end (React -native) to send the location details of user to save in database.

Q2- Also, is it possible to store the location of the User who is not signed in(guest user)?

Looking forward to your reply.

Thanks

Unrecognized font family 'Roboto' - React Native iOS

$
0
0

enter image description here

Problems when i build my app in react native with the comand: react-native run-ios

How to return to the browser after processing deep link? Android & iOS (react native)

$
0
0

I’m successfully deep linking from the browser into my React Native App, completing what I need to do, and then am wanting to be sent back to the browser. How can this be done for Android and iOS?

iOS React Native: Add build configuration other than Debug and Release

$
0
0

I'm working on a react native project, by default they are two build configurations (Debug and Release) that works just fine. However, when i create a new build configuration by duplicating the Release configuration and then try to run the application targeting the created build configuration, i get the following error:

fatal error: module map file 'PathToBuildFolder/Stage-iphoneos/YogaKit/YogaKit.modulemap' not found

Stage is the name of the created build configuration, any idea how i can solve this ?

Thx

How do we link oauth identity with local identity?

$
0
0

I am trying to build a mobile application in React Native that allows "social" login, i.e. Google, Facebook, Instagram, GitHub, etc. I had a few questions regarding this:

  1. How do I handle user account creation on the backend, i.e. once a user authenticates with (say) Google on the app using, for example, the react-native-google-signin plugin, how do I create an account for that user on my backend?

  2. If my backend has to use the client credentials to obtain the data for registration (e.g. user email, first name, last name) from the service, would I have to implement a separate connection for each service against which I want to authenticate?

  3. If my backend is written in Django, are there Django plugins that allow me to do this out-of-the-box?

React Native App: Include Images or Graphics into Camera Stream in Real Time and Broadcast to Facebook Live

$
0
0

I want to build a React Native app for iOS and Android (preferably using Expo managed workflow). The app lets the user to use the phone camera to live into their Facebook Live. In addition, I want to have a feature which allows my app user to add some texts (e.g. their company name), some count down timer, some graphics or images (e.g. their company's Logo) onto their live stream in real time. So the audiences of their Facebook Live will see those texts, graphics or images. Something similar to what Switcher Studio (https://www.switcherstudio.com/) has in offer.

I found some articles which explain how to add a layer (on top of the Video stream) and render something on this layer. But, this way the Audiences will not see this effect.

My question is how can I do that?

Here's what I have found:1). I will need NodeMediaClient to encode my the stream from my camera into RTMP (something like this guy has here https://www.syntx.io/react-native/video-live-streaming-with-react-native/).2). Then I can feed this RTMP stream into Facebook Live API. Something similar to this post: https://developers.facebook.com/docs/live-video-api/getting-started.

But, I don't know how can I add any texts, images or graphics onto this Camera stream in real time before encoding it to RTMP.

Please correct me if what I've found is incorrect? and please help me out on how to add texts, images or graphics onto Camera stream in real time.


Can I make a purely voice driven app in Expo?

$
0
0

I want to create an Expo app for ios that will say something, and wait for my reply, via headphones. The headphones part is immaterial but it indicates what I want... which is for this to run while my phone is locked and in my pocket. Once I have replied, the app would proceed. I have built Expo apps but I am unsure of whether an app can still interact with me via audio and the microphone in this way while the phone is locked. Also, I don't know if Expo has introduced this sort of capability. I also don't know if React Native (i.e. ejected Expo apps) can do this sort of thing. The lack of apps that truly interact in this way (not via Siri etc) are far and few between so I'm assuming it's a hard problem to solve. I would be just as happy if I could have a browser page running on the device do the same thing, but I'm pretty sure webpages can't play audio and wait for replies when a phone is locked. Is any of this possible at this point?

I did research this online, just to be clear. I wasn't able to find an answer so I came here. I mention this because this whole post does have that 'can you research this for me' vibe. I'm just hoping someone has knowledge of what is possible.

how to add third party (.)framework as dependency for React native native module in Xcode

$
0
0

We have a SDK which depends on Alamofire and Private framework to function. Now we are trying to build a wrapper over the SDK for react native. We created native module code and added Alamofire as dependency for it through Podspec. Our private framework is not hosted anywhere. Now we want to add this private framework to react native native module as dependency. We tried adding to react native project/iOS part, but react native project complaints while building the native module about pvt_framework_headers.h not found. Private framework is added and embedded correctly. How to add external dependencies to react native module?

Podspec file:

  s.dependency "React"  # ...  # s.dependency "..."  s.dependency 'IQKeyboardManagerSwift'  s.dependency 'SwiftyJSON'  s.dependency 'SVProgressHUD'  s.dependency 'Alamofire'  s.dependency 'AFNetworking', '~> 3.0'

Any help or guidance highly appreciated.

React-native screen does not appear on the iOS simulator using react-native

$
0
0

I am now trying to develop an application with react-native, but the first project does not work well.

Environment

  • cocoapods-1.9.3
  • node v10.16.2
  • watchman 4.9.0
  • Apple Swift version 5.2.4 (swiftlang-1103.0.32.9 clang-1103.0.32.53)Target: x86_64-apple-darwin19.4.0

What I've tried

I did environment setup according to the official cite.

$ npx react-native init AwesomeProject$ cd AwesomeProject$ npx react-native run-ios

And I see the iOS screen, but there is no statement like "Welcome to react-native", which should be appeard on the screen.What I can see on the simulator is this.

When I execute the command

$ npx react-native start

I can see the react-native logo like this,

               ######                ######                            ###     ####        ####     ###                         ##          ###    ###          ##                        ##             ####             ##                        ##             ####             ##                        ##           ##    ##           ##                        ##         ###      ###         ##                         ##  ########################  ##                       ######    ###            ###    ######                ###     ##    ##              ##    ##     ###         ###         ## ###      ####      ### ##         ###     ##           ####      ########      ####           ##   ##             ###     ##########     ###             ##   ##           ####      ########      ####           ##     ###         ## ###      ####      ### ##         ###         ###     ##    ##              ##    ##     ###                ######    ###            ###    ######                       ##  ########################  ##                         ##         ###      ###         ##                        ##           ##    ##           ##                        ##             ####             ##                        ##             ####             ##                        ##          ###    ###          ##                         ###     ####        ####     ###                            ######                ######                                Welcome to React Native!                Learn once, write anywhereTo reload the app press "r"To open developer menu press "d"

but under there is a warning statement.

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.info Reloading app...

How can I get the simulator screen like this picture which is shown as a success result?

Does exist a mature React Native Video library/component?

$
0
0

Recently, I face a project that needs a mature React Native library/component that plays several video format types like MKV, MKV x265 and etc that the react-native-video couldn't support them. because the react-native-video uses AVFoundation and AVFoundation doesn't support many video formats.

So after many searches, I realized there is an awesome kit that name is VLCKit and it could be added to a React Native component and awesomely it can play any video format types.

But I don't know Objective-C and time is short to learn iOS development based on Objective-C.

After all and many mining on Google, I find react-native-media-player that implements the VLCKit and extract a pure component that I can use it and make my view component but this implementation doesn't have subtitle controlling.

It's really a serious question: does exist a mature React Native library/component that could play many modern video format types and encoding and also having control on volume, subtitle, and etc...

If anybody knows an unsung library that my desired features please introduce it to me as an answer.


Note: mature means:

  • show mkv, mkv x265, mp4 and etc.
  • at least have control over subtitle (soft-sub, external-sub)
  • having control on volume

React Native local assets images not showing

$
0
0

I built a new react native app(react native init), and upload it to github,All was good and I saw the images.

I downloaded the branch to check it.

The Problem -

I don't see local assets in Android and in iOS

I tried to run this command and it created "index.android.bundle" but it didn't help

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

React-native iOS build error after link command

$
0
0

I got the following error when I try to run the app. I noticed that this error happens after run 'npx react-native link'.

    Command line invocation:/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MyApp.xcworkspace -configuration Debug -scheme MyApp -destination id=ED360224-1DF7-481F-BCE5-9700938E4533note: Using new build systemnote: Building targets in parallelnote: Planning buildnote: Constructing build descriptionBuild system informationerror: Multiple commands produce '/Users/vidolin/Library/Developer/Xcode/DerivedData/MyApp-gbsfowkzxjogwsdruwnezgcjnqvv/Build/Products/Debug-iphonesimulator/MyApp.app/Zocial.ttf':Target 'MyApp' (project 'MyApp') has copy command from '/Users/vidolin/development/MyApp/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/Users/vidolin/Library/DCommand line invocation:/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MyApp.xcworkspace -configuration Debug -scheme MyApp -destination id=ED360224-1DF7-481F-BCE5-9700938E4533note: Using new build systemnote: Building targets in parallelnote: Planning buildnote: Constructing build descriptionBuild system informationerror: Multiple commands produce '/Users/vidolin/Library/Developer/Xcode/DerivedData/MyApp-gbsfowkzxjogwsdruwnezgcjnqvv/Build/Products/Debug-iphonesimulator/MyApp.app/Zocial.ttf':Target 'MyApp' (project 'MyApp') has copy command from '/Users/vidolin/development/MyApp/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/Users/vidolin/Library/D

Can anyone help me, pls?

Tks

react native slow close camera after barcode scanned

$
0
0

I just learned about react native. I use the react-native-camera-kit library and there are obstacles when I finish scanning a barcode. The barcode was scanned successfully but the camera took a while to close. I load data from the API, if only a small amount of data is loaded then the camera will close quickly but if the data is loaded a lot then the camera will close slowly. And this is my code.

import React, {Component} from 'react';import {View, PermissionsAndroid} from 'react-native';import {  Container,  Content,  Card,  CardItem,  Body,  Text,  Button,  Icon,  Left,  Footer,  Thumbnail,  Spinner,  Root,} from 'native-base';import {CameraKitCameraScreen} from 'react-native-camera-kit';export default class App extends Component {  constructor() {    super();    this.state = {      movies: [],      isLoading: true,      opneScanner: false,    };  }  async getMoviesFromApiAsync() {    try {      const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=100&offset=200',      );      const json = await response.json();      this.setState({        movies: json.results,        isLoading: false,      });    } catch (error) {      console.error(error);    }  }  onBarcodeScan(qrvalue) {    //called after te successful scanning of QRCode/Barcode    console.log(qrvalue);    this.setState({opneScanner: false});    // this.scan(qrvalue); // other method  }  onOpneScanner() {    var that = this;    //To Start Scanning    if (Platform.OS === 'android') {      async function requestCameraPermission() {        try {          const granted = await PermissionsAndroid.request(            PermissionsAndroid.PERMISSIONS.CAMERA,            {              title: 'CameraExample App Camera Permission',              message: 'CameraExample App needs access to your camera ',            },          );          if (granted === PermissionsAndroid.RESULTS.GRANTED) {            //If CAMERA Permission is granted            that.setState({opneScanner: true});          } else {            alert('CAMERA permission denied');          }        } catch (err) {          alert('Camera permission err', err);          console.warn(err);        }      }      //Calling the camera permission function      requestCameraPermission();    } else {      that.setState({opneScanner: true});    }  }  componentDidMount() {    this.getMoviesFromApiAsync();  }  render() {    const {isLoading, opneScanner} = this.state;    if (!opneScanner) {      return (<Container><Content padder>              {isLoading ? (<Spinner />              ) : (                this.state.movies.map((movie, index) => (<Card key={index}><CardItem><Left><Thumbnail                          source={{                            uri:'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/220px-React-icon.svg.png',                          }}                        /><Body><Text> {movie.name}</Text><Text note> {movie.url}</Text></Body></Left></CardItem></Card>                ))              )}</Content><Footer><Button                onPress={() => {                  this.onOpneScanner();                }}                vertical                success                style={{                  width: '100%',                }}><Icon name="camera" /><Text>Scan</Text></Button></Footer></Container>      );    }    return (<View style={{flex: 1}}><CameraKitCameraScreen          showFrame={true}          //Show/hide scan frame          scanBarcode={true}          //Can restrict for the QR Code only          laserColor={'blue'}          //Color can be of your choice          frameColor={'yellow'}          //If frame is visible then frame color          colorForScannerFrame={'black'}          //Scanner Frame color          onReadCode={(event) => {            this.onBarcodeScan(event.nativeEvent.codeStringValue);          }}        /></View>    );  }}

please help me.....


How to set up an existing React-Native project from a new computer for the first time?

$
0
0

So I recently started working with my friend on his app project and I've had trouble building his react-native based project. It's both ios and android.

On android, I can get as far as building, but when I run the app shuts down instantly or shows a red screen with some firebase error.

On ios, I get a build error.

My question is: what do I need to install when I first pull the repo from github? I run '''yarn install''' straight away and run '''pod install''' from the ios folder but that isn't enough. Anything I should run for android more than the yarn install command I had already used?

Thanks!

How can I create a drawer where I can change the text according to user settings like language in react native?

$
0
0

I used the Galio framework to start building an App and it creates a drawer with the following function imported by App.js:

const GalioApp = createDrawerNavigator(screens, options);

I want to for example be able to load the language the user is using from the memory and change the drawerLabels accordingly. Like options is in a constant object then how to I get the language from async storage and render it accordingly.

Unable to receive Firebase Console manually sent notification (react-native[IOS])

$
0
0
  • Unable to receive manual notification sent from Firebase Console under cloud messaging for android / ios using react-native app

  • Able to receive notification send via back end server whenever the required task is complete & also notification send via Postman with the specified FCM Token are received.

  • Using react-native-firebase v5.6.0 and to listen to notification listenerfirebase.notifications().onNotification((notification: Notification) => {}) is being used andfirebase.notifications().displayNotification(displayNotifcation) is being used to display the incoming notification.

How to check internet connection in React Native application for both iOS and Android?

$
0
0

I have a React Native application and I'm seeking to add functionality that checks if there is an active internet connection when the app first starts up, and continuously thereafter.

If there is no internet connection, I'm seeking to display a message saying "Internet connection not detected" with a button to "Try again"; if there is an internet connection, I'm seeking to load a page (WebView).

I'm also seeking to support both iOS and Android devices; I've researched this independently and have found a couple libraries on GitHub. However, many require an extra step of including a permissions addition in Android Manifest XML, however I don't see an Android Manifest XML file in my app; why does only Android need a manifest?

Any help is appreciated; thanks and take care.

react-native-keyboard-aware-scroll-view not working properly

$
0
0

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and react-native-keyboard-aware-scroll-view v 0.2.1.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

enter image description here

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';class LoginIOS extends Component{  constructor(props) {    super(props);    this.login = this.login.bind(this);    this.renderScene = this.renderScene.bind(this);    this.state={      username: '',      password: ''    };  }  render() {    return (<Navigator          renderScene={this.renderScene}          navigator={this.props.navigator}          navigationBar={<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}                routeMapper={NavigationBarRouteMapper} />          } />    );  }  renderScene() {    return (<KeyboardAwareScrollView><View style={styles.container}><Spinner visible={this.state.visible} /><StatusBar barStyle="light-content" hidden={true}/><View style={styles.topContainer}><View style={styles.bannerContainer}><View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}><Image style={styles.mark} source={require('***')} /></View></View><View style={styles.credentialContainer}><View style={styles.inputContainer}><Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" /><View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><TextInput                            style={styles.input}                            placeholder="Username"                            autoCorrect={false}                            autoCapitalize="none"                            returnKeyType="next"                            placeholderTextColor="#e0e0e0"                            onChangeText={(text) => this.setState({username: text})}                            value={this.state.username}></TextInput></View></View><View style={styles.inputContainer}><Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" /><View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><TextInput                            style={styles.input}                            placeholder="Password"                            returnKeyType="done"                            autoCorrect={false}                            secureTextEntry={true}                            placeholderTextColor="#e0e0e0"                            onChangeText={(text) => this.setState({password: text})}                            value={this.state.password}                            onSubmitEditing={(event)=> {                              this.login();                            }}></TextInput></View></View><TouchableOpacity style={styles.forgotContainer}></TouchableOpacity></View></View><TouchableHighlight          underlayColor="#D6AB00"          onPress={this.login}          style={styles.signInButtonContainer}><Text style={styles.signInText}>Sign In</Text></TouchableHighlight></View></KeyboardAwareScrollView>    );  }
Viewing all 16565 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>