So I am trying to set my initial center coordinates for mapbox so they are not 0,0. On the api it says mapbox expects a prop of

initialCenterCoordinate object  Optional    Initial latitude/longitude the map will load at.    { latitude:0, longitude: 0 }

So I am doing

<Mapbox    initialCenterCoordinate={latitude: 40.444328, longitude: -79.953155} .... other props/>

This is giving me an error on that line saying unexpected token, expecting }.

Whenever I do something like

<Mapbox    initialCenterCoordinate={{latitude: 40.444328, longitude: -79.953155}} .... other props/>

It still sets my initial spot to 0,0. Anyone have any ideas?

EDIT:link to git hub page- https://github.com/mapbox/react-native-mapbox-gl

I have a simple React Native app that I've been testing on Android and now want to test on iOS. It's using React Navigation.

I ran npm run ios but I'm getting the following error:

info In file included from /Users/rbbit/reactnative/testproj1/ios/testproj1/main.m:10:/Users/rbbit/reactnative/testproj1/ios/testproj1/AppDelegate.h:9:9: fatal error: 'UMReactNativeAdapter/UMModuleRegistryAdapter.h' file not found#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~info 1 error generated.

I opened XCode but I'm basically getting the same message, nothing else that would help me debug this.

I do see that there is a package called react-native-adapter (https://github.com/expo/expo/tree/master/packages/%40unimodules/react-native-adapter), however I'm hesitant to just install this since I followed the instructions on how to include react-navigation and didn't mention that, assuming this is related.

Also, that page says If you are using react-native-unimodules, this package will already be installed and configured!, and react-native-unimodules already is in my dependencies.

Any pointers on how to solve this? Thank you!

I need to get my own device's MAC address which I thought should be really simple but after some research it seems likely impossible.

Any one had any experience on this before? I need to get the BLE MAC on both OS.

I try to make my first steps using React Native. Development for Android (on Windows host) works. Now I wanted to test iOS, and tried to set up a development environment on a MacBook Pro.

Problem: React Native starts the iOS simulator, and then nothing happens any more. The simulator runs OK, but my React native app won't start.

What do I need to do to get my React Native installation going?

More Info:

I set up XCode and React Native according to the docs on the MacBook Pro running OSx 10.13.2 (High Sierra). XCode was installed and tested successfully, including the simulator.

When I installed Node.js I deliberately picked an older version (containing npm 4.2.0), since forums say that React Native does still have problems with npm 5. I also installed Homebrew and Watchman, like stated in the docs.

To initialize an empty project, I used

create-react-native-app HelloWorldProject

and a projet structure got created in my Documents folder.

If I finally fire up my "Hello World" test app using

cd HelloWorldProjectsudo react-native run-ios

the system responds:

Starting packager ...Starting simulator ...

and then nothing happens. The simulator does indeed start (boot --> apple logo --> progress bar --> IOs start screen), but nothing happens afterwards.

EditI have given up on React Native for several reasons, I leave this question here for documentary purposes, but I cannot verify or accept any answer, I don't have a React Native development environment any more.

Is there any way or maybe an existing library/package that would allow me to create settings for my app accessible from the phone settings?

the goal of this is to change endpoints during testing similar to the picture below, thanks

I have used react-native-shopify library and it is using boost-react-native.So I am getting error on iOS build

I have tried to add header search path, but is not working.

Thanks!

I am trying to use the react-native-youtube component in my expo project. However, I couldn't get it to work. All I have so far is a black screen with red borders. I tried following the video instructions on online however, expo doesn't have an iOS or Android folder, which means I can't open it in XCode and fiddle with it. How can I play youtube videos using expo? As you might have noticed from my question I'm new to react-native using expo.

I am a junior React Native developer, and I got 3 projects e-commerse with deadlines. It's very comfortable to write in javascript but I still face some issues on React Native that make me feel disappointed like 3rd party library dependecies mathcing with react native, background-tasks, notifications and i.e. Also I am not really keen on the new react navigation 5.0 with its hooks.

Can I move to Flutter being sure that I will make projects on time and being sure that described above issues are to be solved with flutter?

P.S I have 2 months to learn flutter

After updating ios to 13.4.1, there was a problem with the fact that only my app displays two English languages when textinput is active. The previous version did not have this problem. enter image description here

Languages in my program

Everyone else's

Can someone please specify me the procedures for compressing the app size built on react native.I referred to many pages on google, hackernoon, and medium but they were too good for me to understand.

Please if someone knows basic and fewer glitch ideas on how to compress react native apps for both Android and iOS with procedures and where to keep the screen files and assets folder.

I tried by following the steps on medium, detached the iOS and android folders but it was an unsuccessful attempt. Please if someone can help me in compressing the app size.

Error: System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory

in mac os catalina

I'm developing an application which uses a custom SDK to initiate a 1 to 1 video call, I implemented the SDK natively on iOS using swift & it worked properly, however, when I made a native module wrapper for react-native, I was able to run the native screen, present the view controller on top of react-native & initiate the call from client's side, however, once I accept the call from agent's side ( which is an online portal ), The app crashes with this error:

network_thread 0x0x10999ecc0 (26): EXC_BAD_ACCESS (code=2, address=0x1059a1490)

I couldn't find anything useful in the logs once the app crashes.

I believe this framework is using WebRTC to achieve this, however, I cannot share the framework.

I looked this up for hours & couldn't find anything similar.

i was trying to fetch some data from the server to display in the react native app. it was worked before but i don't know what happened after, i added a console.log in the catch of fetch.. it showing me error like

JSON Parse error: Unexpected identifier "Tunnel" - node_modules/promise/setimmediate/core.js:37:14 in tryCallOne - node_modules/promise/setimmediate/core.js:123:25 in - ... 8 more stack frames from framework internals

fetch(`${this.props.baseUrl}/products?page=${this.state.page}&per_page=10`,{    method:"get",    headers:{        AUTH_TOKEN: this.props.AUTH_TOKEN    }}).then(res=>res.json()).then(data=>{    if(data.success==true){        this.page++;        this.props.toggleLoading();        this.props.loadProducts(data.products);    }}).catch(err=>console.log(err)); //error here ..i dont know why that's throwing this kinda error 

i try to include dynamic links in my react-native application

i installed @react-native-firebase/dynamic-links and listening in the app for open links

dynamicLinks().onLink(link => {  this.handleLink(link);});dynamicLinks()  .getInitialLink()  .then(link => {    this.handleLink(link);});

for android i included the scheme in the manifest as follwed and everything works fine

<data android:scheme="app" android:host="appname"/><data android:scheme="https" android:host="link.appname.de"/>

I added 2 dynamic links in firebase

• https://link.appname.de (i own the domain)
• https://appname.page.link

after that i did the following steps for iOS(from this page https://www.codingular.com/2020/01/deep-linking-in-react-native-using-firebase-dynamic-links/)

• uploaded the apple-app-site-association to my webspace appname.de
• added a URL Type in xcode with Identifier: appname and url schemes: "bundleID"
• added the associated domain applinks:link.appname.de & applinks:mymories.page.link

finally added the FirebaseDynamicLinksCustomDomains key with https://link.appname.de to my info.plist

but after all my app is still not opening if i click an a provided link. In android everything is working fine.It just shows me an error page in the browser

Requested URL must be parsable and complete DynamicLink

Would be nice if someone has a hint for me or explain me what i'm missing

Keep getting the Missing Realm Constructor error and have tried everything from the Realm documentation on this common issue to relinking with rnpm link realm which tells me they're already linked. I've also tried linking in Xcode by adding in the libRealmReact.a file manually, but all to no avail.

I am helping set up a gitlab ci pipeline for a react-native application that was developed with expo. Here is my gitlab-ci.yml:

image: node/aplinecache:  key: ${CI_COMMIT_REF_SLUG}  paths:    - ~/.npmstages:  - deploy  - tagbefore_script:  - echo $CI_BUILD_REF  - echo $CI_PROJECT_DIR  - apk add --no-cache bash build-base gcc git python3 curl  - PATCH=`git log --pretty=oneline | wc -l | sed -e 's/^[[:space:]]*//'`  - VERSION=`cat VERSION`  - VERSION=${VERSION%?}  - TAG="${VERSION}${PATCH}"  - echo "Build version = ${TAG}"expo-build:  stage: deploy  artifacts:    paths:    - ipas/  script:    - sed -i "s/0.0.0/${TAG}/g" app.json    - npm ci --production --cache .npm --prefer-offline    - npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD    - EXPO_DEBUG=true npx expo build:ios --non-interactive    - mkdir -p ipas    - curl "$(npx expo url:ipa --non-interactive)" -o ipas/my-app-$TAG.ipa  only:    - master

What I am trying to do is have the app build a new .ipa every time there is a push to master. That way I can upload the .ipa to my mdm to distribute the application.

The problem is that if I every build a different app (I have multiple applications I am trying to do this with), it appears the build step needs to be run locally before it can be run in ci again. What I mean is that the command npx expo build:ios --non-interactive needs intervention in selecting the proper certificates every time I make a separate build utilizing my apple credentials.

Here is the output from a failed build (that had succeed in the pipeline before without code changes):

- Making sure project is set up correctly...[17:26:33] Checking if there is a build in progress...[17:26:34] Fetching available credentials[17:26:38] Unable to validate distribution certificate due to insufficient Apple Credentials[17:26:38] Unable to determine validity of Push Keys due to insufficient Apple Credentials[17:26:38] CommandError: Input is required, but Expo CLI is in non-interactive mode.Required input:> Push Notifications Key (Key ID: XXX, Team ID: XXX)>     not used by any apps>     ✅ Currently valid on Apple's servers. >  Would you like to use this Push Key?   at prompt (/expo-cli@3.17.17/src/prompt.ts:22:11)   at CreateOrReusePushKey.open (/expo-cli@3.17.17/src/credentials/views/IosPushCredentials.ts:281:31)   at processTicksAndRejections (internal/process/task_queues.js:97:5)   at CredentialsManager.run (/expo-cli@3.17.17/src/credentials/route.ts:42:12)   at runCredentialsManager (/expo-cli@3.17.17/src/credentials/route.ts:13:10)   at IOSBuilder.produceCredentials (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:168:7)   at IOSBuilder.prepareCredentials (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:124:7)   at IOSBuilder.run (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:46:7)   at IOSBuilder.command (/expo-cli@3.17.17/src/commands/build/BaseBuilder.ts:29:7)   at Command.<anonymous> (/expo-cli@3.17.17/src/exp.ts:85:7) { code: 'NON_INTERACTIVE', isCommandError: true}[17:26:39] Failed to prepare all credentials. The next time you build, we will automatically use the following configuration:[17:26:39][17:26:39] Project Credential Configuration:[17:26:39]   Experience: @team/app, bundle identifier: com.app.profile[17:26:39]     Provisioning profile (ID: XXX)[17:26:39]     Apple Team ID: XXX,  Apple Team Name: ---------[17:26:39][17:26:39]   Distribution Certificate - Certificate ID: XXX[17:26:39]     Apple Team ID: XXX,  Apple Team Name: A Company, LLC (In-House)[17:26:39]     used by     @team/app, (com.app.profile)[17:26:39] [17:26:39] Error   at CredentialsManager.doQuit [as _quit] (/expo-cli@3.17.17/src/credentials/views/Select.ts:176:9)   at CredentialsManager.run (/expo-cli@3.17.17/src/credentials/route.ts:49:42)   at runCredentialsManager (/expo-cli@3.17.17/src/credentials/route.ts:13:10)   at IOSBuilder.produceCredentials (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:168:7)   at IOSBuilder.prepareCredentials (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:124:7)   at IOSBuilder.run (/expo-cli@3.17.17/src/commands/build/ios/IOSBuilder.ts:46:7)   at IOSBuilder.command (/expo-cli@3.17.17/src/commands/build/BaseBuilder.ts:29:7)   at Command.<anonymous> (/expo-cli@3.17.17/src/exp.ts:85:7)

my question is: is this workflow supported by expo/gitlab-ci, and if so what am I doing wrong? I would like this to build reliably so I can develpo a solid ci/cd pipeline for this react-native application. If there is a better process for me to follow for this use case (building and deploying a react-native ios app) I am all ears as well. Anything helps.

I have a React Native View containing a Text field, and I'm using the onLayout prop to do some positional calculations which rely on the data it provides.

<View onLayout={this.calculateDimensions}><Text>{this.props.content}</Text></View>

This works well, but there is a scenario where the content prop updates to a different string with the same character size. This results in the layout not changing and onLayout not triggering.

These positional calculations must occur each time the content prop updates.

Note: I am aware there are numerous ways to make the component update. Updating is not the same as laying out and sadly does not trigger onLayout.

There are native development languages and IDE's if android and Ios are available, where we can develop any kind of application but why are there other technologies like react native and flutter to developed them both and what are there pros and cons of native and the other one.

I am using react native(0.61) to build an app with scroll view on home screen. i have to implement header bar with auto hide and need to add refresh and infinite scroll (Like Facebook Timeline). so i implemented auto hide header with React native animation. now i cannot identify refresh and scroll to bottom gestures.

now i need to implement refresh,autohide header and infinite scroll in same screen. (i have added what i tried)

const HEADER_HEIGHT = 120;class HomeScreen extends Component {    constructor(props) {        super(props);        this.scrollY = new Animated.Value(0);        this.diffClamp = Animated.diffClamp(this.scrollY,0,HEADER_HEIGHT);        this.headerY = this.diffClamp.interpolate({            inputRange: [0, HEADER_HEIGHT],            outputRange: [0, -HEADER_HEIGHT],        });    }    onScroll(nativeEvent){        if (this.isCloseToBottom(nativeEvent)) {            this.loadMoreData();        }    }    isCloseToBottom({layoutMeasurement, contentOffset, contentSize}) {        const paddingToBottom = 100;        return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;    }    render(): * {        return (<View><Animated.View style={{                    position: 'absolute',                    width: '100%',                    top: 0,                    left: 0,                    backgroundColor: '#8c8c8c',                    height: HEADER_HEIGHT,                    transform:[                        {                            translateY:this.headerY                        }                    ]                }}><Text>Hiii ALL</Text></Animated.View><Animated.ScrollView                    scrollEventThrottle={16}                    //I have to use this due to Header disappear when user scroll down to refresh                    bounces={false}                    //i used this previously to mange refresh. its not working because bounces={false}                      refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => this.onRefresh()}/>}                    //in previous for infinte scroll                     onScroll={({nativeEvent}) => this.onScroll(nativeEvent)}                    //now need to add this way to manage Auto Hide navbar                     onScroll={Animated.event(                        [{                            nativeEvent: {                                contentOffset: {                                    y: this.scrollY,                                },                            },                        }],                    )}                    //I tried this but it does not working at all                    onScroll={(e)=>{                        Animated.event(                            [{                                nativeEvent: {                                    contentOffset: {                                        y: this.scrollY,                                    },                                },                            }],                        );                        this.onScroll(e)                    }}>                    //content</Animated.ScrollView></View>        );    }}

Hi there, I want to implement dark mode to my app. I have a file named ColorSchemes.js where is defined base theme and dark theme. So how could i implement theming baset on this file. I want to make save switching between themes at global level!

ColorSchemes.js

const darkTheme = {  main: palette.black,  background: palette.dark_grey,  alternative: palette.white_grey,  trackCardGradient: palette.black,  reviewCardGradient: palette.white_grey,  reviewCardTitle: palette.white_grey,  placeholderColor: palette.grey,  main_font: palette.light_grey,  second_font: palette.light_grey,  empty_star_color: palette.white_grey,  copy_right: palette.white,  search_bar: searchBarDarkTheme,  status_bar: statusBarDarkTheme,};const baseTheme = {  main: palette.blue,  background: palette.light_blue,  alternative: palette.white_blue,  trackCardGradient: palette.gradient_blue,  reviewCardGradient: palette.white_blue,  reviewCardTitle: palette.dark_blue,  placeholderColor: palette.midd_blue,  main_font: palette.light_blue,  second_font: palette.blue,  empty_star_color: palette.blue,  copy_right: palette.black,  search_bar: searchBarBaseTheme,  status_bar: statusBarBaseTheme,};// export const colors = darkTheme;export const colors = baseTheme;