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

How can I show the suggestion bar over the keyboard

$
0
0

I need to show the suggestion bar over the keyboard, while I am typing there must be some word suggestions & on tap of suggested words those must be updated in TextInput field.

In React-Native for iOS & android both.I have scene the InputAccessoryView but it is not working.

I have also used as well, but not showing any bar on keyboard.


React Native: How to pass a props variable from other js file to app.js file

$
0
0

I am a new to react native programming.

Following is the code I am following:

App.js Code:

export default function App() {  const [userNumber, setUserNumber] = useState();  const startGameHandler = (selectedNumber) => {    setUserNumber(selectedNumber);  };  let content =  <StartGameScreen onStartGame={userNumber} />;  if(userNumber){     content = <GameScreen userChoice = {startGameHandler}/>  }

other js file:

let confirmedOutput;    if (confirmed) {        confirmedOutput = (<Card style = {styles.summaryContainer}><Text>You Selected</Text><NumberContainer>{selectedNumber}</NumberContainer><Button title= "Start Game" color = {colors.primary} onPress = {() => props.onStartGame(selectedNumber)}/></Card>        );    };

I want to transfer selectedNumber from other js file to App.js file but I am getting error as props.onStartGame is not a fuction.

Help me solve the error.

React Native two drawers on one screen

$
0
0

I have an app that needs to be able to use two drawer navigators, one on the left and on on the right side of the header.

I am at the point where I can get both drawers to open with the slide gesture, however I need to be able to open it programmatically. I have found the navigation.openDrawer() function only works with one of the drawers and not the other because it is only able to use one of the navigation props (whichever comes first) from my drawer navigators.

Below are my rendering functions:

const LeftStack = createStackNavigator(  {    LeftDrawerStack  },  {    navigationOptions: ({navigation}) => ({      headerLeft: (<TouchableOpacity onPress={() => navigation.openDrawer()}><Icon style={{marginLeft: 10}} name='menu'/></TouchableOpacity>      )    })  });const RightStack = createStackNavigator(  {    RightDrawerStack  },  {    navigationOptions: ({navigation}) => ({      headerRight: (<TouchableOpacity onPress={() => navigation.openDrawer()}><Icon style={{marginRight: 10}} name='ios-bulb'/></TouchableOpacity>      )    })  });export const RouteStack = createStackNavigator(  {    screen: LoginScreen,    navigationOptions: ({navigation}) => ({      header: null    }),    LeftStack,    RightStack  });

and here are my drawer routes:

export const LeftDrawerStack = createDrawerNavigator(  {    Dashboard: {      screen: DashboardScreen    },    History: {      screen: HistoryScreen    },    Privacy: {      screen: PrivacyPolicyScreen    },    TermsAndConditions: {      screen: TermsAndConditionsScreen    }  }, {    initialRouteName: 'Dashboard',    contentComponent: LeftDrawerScreen  });export const RightDrawerStack = createDrawerNavigator(  {    LeftDrawerStack,    Settings: {      screen: SettingsScreen    }  }, {    drawerPosition: 'right',    contentComponent: RightDrawerScreen  });

Here is a picture of what I have the navigation looking like so far, however both of the hamburger menus are opening up the same menu on the right instead of one menu on their respective sides.

layout picture

I may be missing some parts but I will be sure to post more info if I forgot any!

'React/RCTImageSource.h' file not found React Native

$
0
0

i have upgraded to RN 0.61, i installed react-native-search-api and run react-native link , but when running my project i get this error :

React/RCTImageSource.h file not found

Carousel that work for iOS, Android and the web [closed]

$
0
0

I want to do a carousel in react-native and target ios/android/web

I have googled, and search on github for react-native carousel,

The top result of my search is https://github.com/archriss/react-native-snap-carousel

This one doesn't seems to be the top compatible for the web (See https://github.com/archriss/react-native-snap-carousel/issues/389)

I have also tested the one from this article: https://medium.com/the-react-native-log/custom-scrolling-carousel-in-react-native-15ee129e7e68

But the gesture for swipe/drag to change pictures doesn't work on the web.

I have tried many others, and can't find one that fit my requirement without a bunch of additional time. This is quite surprising, is there another option that I didn't see that can solve the following requirement?

What I want is fairly simple, the carousel must:

  • display a square with the width of the device
  • have dots for pagination
  • be draggeable/swipeable.

Does anybody have one library to recommend?

How to clip off the image if its outside bounds react native

$
0
0

I'm new to react native development. I want the image to be in aspect ratio and when I try to change its bounds the area outside the bounds should be clipped off. In Android, it is working correctly but not in iOS the image is not clipping to its bounds and showing the whole image.

<View      style={{        backgroundColor: "#04894a",        padding: 10,        height: 110,        alignItems: "center"      }}><View        style={{          alignItems: "center"        }}><Image          style={{ height: 150, width: 150 }}          source={require("../images/wow_logo.png")}        /></View>

The image is going outside the view but still, it is showing in full. I want it to be cropped if going outside the bounds. Can anyone help me with this? Any links or suggestions are also appreciated.TIA

React-native Axios status code response 0 (Skipped) when receive the response when the app at the background

$
0
0

I have to send an http request to the server, and the request takes up to 20 seconds, during this time I have to send my app to background and open another app to do something else and then get back to my App, and when I receive the response from the first app when it at the background, and return it to foreground, Axios returns response 0 (Skipped), while it passed from the server and it should be 200.

return Axios.post(url, payLoad)            .then(result => {                return handleSuccessResultCode(result);            }).catch(error => {                console.log("AxiosPost-error", error);                return handleResultCode(error, resolve, reject);            });

Payload Header:

content-type: application/jsonprovider: iosmacaddress: <Device MAC>deviceid: <Device ID>

Console.log prints:

AxiosPost-error Error: Network Error    at createError (createError.js:16)    at EventTarget.handleError (xhr.js:83)    at EventTarget.dispatchEvent (event-target-shim.js:818)    at EventTarget.setReadyState (XMLHttpRequest.js:574)    at EventTarget.__didCompleteResponse (XMLHttpRequest.js:388)    at XMLHttpRequest.js:501    at RCTDeviceEventEmitter.emit (EventEmitter.js:189)    at MessageQueue.__callFunction (MessageQueue.js:395)    at MessageQueue.js:106    at MessageQueue.__guard (MessageQueue.js:343)

Response:response 200 if I received the http response when the app is in foreground.response 0 if I received the http response when the app is in the background.

by the way, this issue happens only on regular devices, and it works correctly if I test it on simulator.

How to set point selection on the chart in react-native-charts-wrapper?

$
0
0

I have a LineChart on my app from react-native-charts-wrapper and usually after the user taps on the chart the dates's bar appears on the chart like this:

enter image description here

But i need to set like just point selection, like this:

enter image description here

But i could not find any ways how to make it. Can somebody recommend me please how can i do it?


React-Native: how to use "Remote JS Debugger" on real iOS-device?

$
0
0

I'm wondering if react-native's Remote Debugger mode would be possible also on real device. But it stops me with an error page stating

"Connecting to http://localhost:8081/debugger-proxy?role=client timed out"

The interesting fact here is that this URL won't also work on my developer machine.

Opening this URL (http://localhost:8081/debugger-proxy?role=client) in a browser on my developer machine with running packager.js will respond with:

Cannot GET /debugger-proxy?role=client

When I turn off Remote debugger, everything works as expected.

Steps to reproduce:

  1. react-native init testapp
  2. cd testapp/ios
  3. open the .xcodeproj-File with XCode
  4. Select my connected iPhone as target device
  5. Run the application

The application will fetch the source code from my local machine. In order to make this work, both, the iPhone-device and my iMac, are connected to the same WiFi.

enter image description here

The ReactNative-Application is executed on the iPhone as expected. With the shake-gesture I spawn the developer menu and select the option "Debug JS Remotely".

enter image description here

Now this error appears as mentioned above.

Following a side note in running-on-real device I changed the Host from localhost to the IP-Address of my Mac in RCTWebSocketExecutor.m, but this results in an endlos loop while fetching.

The Question is:

How can I use the Remote JS Debugging-Feature on real device?

enter image description here

Update

After further investigation I came to the conclusion that this might be a bug and opened the following issue on GitHub.

React-native: How to build for ios from windows

$
0
0

We are starting to work with react-native at my company. We have one mac and the rest of the team is running on windows.

Is there a way to write the app on windows with the ios device connected to the windows machine or local wifi. Then launch the build on the mac (from the windows pc) and get the app launched on the ios device ? So it would like using the mac only as a build/package server.

Hope i am clear enought.

Thanks.

Custom font not working in React Native

$
0
0

I want to use a font from google fonts in my app. Here is the font.

I have placed the .ttf file in app/fonts.

package.json:

{"name": "xxx","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"    },"rnpm": {"assets": ["./app/fonts"]    },"jest": {"preset": "react-native","moduleNameMapper": {"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js","\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"        }    },"dependencies": {"flow-typed": "^2.0.0","immutable": "^3.8.1","react": "~15.4.1","react-native": "0.42.0","react-native-vector-icons": "^4.0.0","react-redux": "^5.0.3","redux": "^3.6.0","redux-immutable": "^4.0.0","redux-observable": "^0.14.1","rxjs": "^5.2.0"    },"devDependencies": {"babel-eslint": "^7.1.1","babel-jest": "19.0.0","babel-preset-react-native": "1.9.1","eslint": "^3.17.0","eslint-plugin-flowtype": "^2.30.3","eslint-plugin-jsx": "^0.0.2","eslint-plugin-react": "^6.10.0","eslint-plugin-react-native": "^2.3.1","flow-bin": "^0.42.0","jest": "19.0.2","jest-cli": "^19.0.2","react-test-renderer": "~15.4.1","redux-devtools": "^3.3.2","remote-redux-devtools": "^0.5.7"    }}

then ran react-native link.

Then use the font in my app:

import { View, Text } from 'react-native'import React from 'react'import Width from '../width/Width'import Shape from '../shape/Shape'import Height from '../height/Height'import Thickness from '../thickness/Thickness'export const Volcalc = () => (<View style={styles.container}><Text style={styles.text}>SHAPE</Text><Shape /><Text style={styles.text}>HEIGHT</Text><Height /><Text style={styles.text}>WIDTH</Text><Width /><Text style={styles.text}>THICKNESS</Text><Thickness /></View>)const $mainColor = '#00d1b2'const styles = {  container: {    flex: 1,    padding: 20,    backgroundColor: $mainColor  },  text: {    textAlign: 'center',    color: 'rgba(255, 255, 255, 0.9)',    fontSize: 15,    fontFamily: 'Orbitron'  }}

In android it doesn't show the new font but has no error. In ios it has error:

Unrecognised font family "Orbitron"

What am I doing wrong?

How do I find out the EXACT value to place in fontFamily: 'xxx'?

React Native + Firebase - How to navigate to login screen after log-out?

$
0
0

I want to set up authentication in my app, so I'm using firebase (I'm new to Firebase and authentication in react native in general).

When I open the app, for some reason it is already logged in, and displays AppStack, instead of AuthStack which is supposed to be the LoginScreen. When I run this code inside my AppStack on a component:

onPress={() => {firebase.auth().signOut().then(function() {  console.log('Signed Out');}, function(error) {  console.error('Sign Out Error', error);});}}>

it successfully logs 'Signed Out', but it doesn't switch screens.

I know the problem lies in my state variable, isLoggedIn, but I don't know how to fix it.

So this is my app.js, would really appreciate any feedback on how to make this work.

import * as React from "react";...import * as firebase from 'firebase';var firebaseConfig = {    ...};// Initialize Firebasefirebase.initializeApp(firebaseConfig);const Stack = createStackNavigator();const Tab = createBottomTabNavigator();function AuthStack() {    return(<Stack.Navigator><Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} /></Stack.Navigator>)}function AppStack() {    return (<Tab.Navigator        screenOptions={({ route }) => ({            tabBarIcon: ({ focused, color, size }) => {                if (route.name === 'Order') {                    return (<IconWithBadge                            name={focused ? 'ios-book' : 'ios-book'}                            size={size}                            color={color}                        />                    );                } else if (route.name === 'Map') {                    return (<Ionicons                            name={focused ? 'md-globe' : 'md-globe'}                            size={size}                            color={color}                        />                    );                } else if (route.name === 'Profile') {                    return (<Ionicons                            name={focused ? 'md-contact' : 'md-contact'}                            size={size}                            color={color}                        />                    )                } else if (route.name === 'Notifications') {                    return (<Ionicons                            name={focused ? 'ios-notifications-outline' : 'ios-notifications-outline'}                            size={size}                            color={color}                        />                    )                }            },        })}        tabBarOptions={{            activeTintColor: 'orange',            inactiveTintColor: 'gray',        }}><Tab.Screen name="Order" component={OrderScreen} /><Tab.Screen name="Map" component={MapScreen} /><Tab.Screen name="Profile" component={ProfileScreen} /><Tab.Screen name="Notifications" component={Notifications} /></Tab.Navigator>)}export default class App extends React.Component {    state = {        isLoggedIn: firebase.auth().onAuthStateChanged(user => { return user}),    }    render() {    return(<NavigationContainer>            { this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />) }</NavigationContainer>    )}}function Notifications() {    return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Notifications</Text></View>    );}

Building a ci/cd pipeline for react-native ios app: How to run expo build in gitlab-ci?

$
0
0

I am helping set up a gitlab ci pipeline for a react-native application that was developed with expo. Here is mygitlab-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.

react native gifted chat- Can't see messages I send can only see messages received from user

$
0
0

I'm new to react native gifted chat and whenever I send message and log in as the other user they can see my message, when I however log back in as myself I can't see the message I sent only the ones received how do i display both?

How can I make it so that I can see both messages I sent and messages I receive, also do i create a listener for firebase firestore to check if a new message has been received?

class MatchesChat extends Component {    state = {        messages: [],      }      componentDidMount(){        this.getMessages()      }      getMessages = async () => {        let items1 = []        let items=[]        try{        const query = await db.collection('dogs').where('dogId', '==', this.props.dog.dogId).get()        query.forEach(function(response) {          items.push(response.data())          })         for(let i=0;i<items[0].messages.length;i++){           if(items[0].messages[i].user._id===this.props.navigation.state.params.user.id){             items1.push(items[0].messages[i])           }         }          for(let i=0;i<items1.length;i++){            items1[i].createdAt=items1[i].createdAt.toDate()          }          this.setState({            messages: items1           })  }  catch{    alert(e)  }  }    onSend(messages = []){        //this.props.dispatch(sendNotification(this.props.navigation.state.params.user.id, messages[0].user.name, messages[0].text))        this.setState(previousState => ({          messages: GiftedChat.append(previousState.messages, messages),        }))        let res = JSON.stringify(this.state.messages)       console.log("gifted: "+res)            try {        console.log("inside try")        db.collection('dogs').doc(this.props.dog.dogId).update({          messages: firebase.firestore.FieldValue.arrayUnion(messages[0])      })      db.collection('dogs').doc(this.props.navigation.state.params.user.id).update({        messages: firebase.firestore.FieldValue.arrayUnion(messages[0])    })    }             catch(e) {              console.log("block dog error")            alert(e)            }  }    render(){       let res = JSON.stringify(this.state.messages)       //console.log("messy: "+res)        return(<GiftedChat            messages={this.state.messages}            onSend={messages => this.onSend(messages)}            user={{              _id: this.props.dog.dogId,              name: this.props.dog.dogname,              avatar: this.props.dog.photo            }}          />        )        }  }const mapDispatchToProps = (dispatch) => {    return bindActionCreators({getDog,getDogs}, dispatch)  }  const mapStateToProps = (state) => {    return {      dog: state.dog,      cards: state.cards    }  }  export default connect(mapStateToProps, mapDispatchToProps)(MatchesChat)

Integrate native iOS SDK into existing React Native project

$
0
0

First of all let me point out I am not a native iOS developer so I am sorry if I confuse some terms regarding native iOS development. I have built an APP using React Native framework. Now I need to integrate a native SDK(SightCall SDK). I've got a sample APP from them and successfully integrated into the project.

I made a function in react native that calls a native module I implemented in AppDelegate.m

_callSightcall = () => {    CustomModule.namee('Success');};

This function is called on button press

<TouchableHighlight style={styles.buttonHomePage}  onPress={this._callSightcall}>

In AppDelegate.m I created a module CustomScreen:

AppDelegate.m native module

On button Click this method is successfully called and I get a response in the console.

Now the problem is I need to make that on button click I call this method and open the SightCall interface.If I replace the AppDelegate existing code from AppDelegate.m and place the AppDelegate code from the SIghtCall code sample and build the APP It will be successful and the SightCall interface will build (not the interface I built with react native). But it actually needs to open SightCall interface when I click on a button from the existing react native app.

If I place this:AppDelegate Sightcall Codeinto the existing AppDelegate and build the APP It will be built with the SIghtcall Interface.

How can I make that on button click from the actual React Native APP call the CustomScreen module I made and then show the SIghtCall interface.Custom module called on button click in React NAtive APP

This is the code for calling the SightCall interface (placing this AppDelegate code into AppDelegate of existing APP build the SIghtCall interface) But placing this code into the Custom Module I made doesn't work

@interface AppDelegate ()  @property (nonatomic) LSApplicationModel *model;@end@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {if ([[NSProcessInfo processInfo] arguments].count == 2) {    NSLog(@"App launched with parameters: %@", [[NSProcessInfo processInfo] arguments]);    dispatch_async(dispatch_get_main_queue(), ^{        [self application:application openURL:[NSURL URLWithString:[[NSProcessInfo processInfo] arguments][1]] sourceApplication:nil annotation:@(0)];    });}return YES;}- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey,id> *)launchOptions {// init SDK Modelself.model = [[LSApplicationModel alloc] init];if (@available(iOS 13.0, *)) {    self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;}return YES;}- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0L), ^{    [self.model openURL:[url absoluteString]];});return YES;}- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {if ([userActivity.activityType isEqualToString: NSUserActivityTypeBrowsingWeb]) {    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0L), ^{        [self.model openURL:[[userActivity webpageURL] absoluteString]];    });    return YES;}return NO;}- (void)applicationDidEnterBackground:(UIApplication *)application {[self.model resetUI];[self.model cancelACDRequest];}@end

React Native : BLE, Discover & Broadcast (advertise data)

$
0
0

I'm very new to BLE APIs and capabilities. I want to achieve a "simple" thing. Let's say I'm developing the APP-X. I want to be able to scan other phone around me, with APP-X installed (exactly like this app here https://www.tracetogether.gov.sg/ ). I want to scan and filter the wanted devices via a "simple" metadata (advertising data ? specific for my app) within the signal emitted by the concerned phones. I'm stuck because Idk how to "emit" (broadcast) that custom signal.

Can you please help me find a way to do this in RN ?

I have already check those libs:

Many thanks

React-native-firebase: Push notifications not always working on iOS

$
0
0

I implemented an app in react-native that send push notifications via Firebase. Most of the time, it is working well, but sometimes, the push notifications are not received by the device (mostly iOS 13 devices).

For the devices receiving my push notifications correctly, onNotification is triggered everytime (foreground and background).

For the devices not receiving my push notifications, onMessage is triggered (only on foreground).

package.json

"react-native-firebase": "^5.6.0"

Podfile

pod 'Firebase/Core', '~> 6.19.0'pod 'Firebase/Functions', '~> 6.19.0'pod 'Firebase/Messaging', '~> 6.19.0'pod 'Firebase/Auth', '~> 6.19.0'

To test out my push notifications, I am sending it via POSTMAN, using the firebase API, with the current Payload:

{"to" : "my_FCM_token","priority" : "high","notification" : {"body" : "Body TEST","title": "TEST Notification","vibrate": 1,"sound": 1},"data" : {"key" : "value"}}

Note that it always returns me a success

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    // FIREBASE CONFIG    [FIRApp configure];    // SETTING ROOT VIEW CONTROLLER    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge                                               moduleName:@"MyModule"                                        initialProperties:nil];    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];    UIViewController *rootViewController = [UIViewController new];    rootViewController.view = rootView;    self.window.rootViewController = rootViewController;    [self.window makeKeyAndVisible];    [RNSplashScreen show];    return YES; }   

App.js

async componentDidMount() {  firebase.messaging().hasPermission().then(enabled => {    if (enabled) {      firebase.messaging().getToken().then(token => {        global.token = token;      })    } else {      firebase.messaging().requestPermission()        .then(() => {          alert("Permission Accepted", error)        })        .catch(error => {          alert("Permission Denied", error)        });     }  });  this.initialNotificationListener = firebase.notifications().getInitialNotification().then((notificationOpen: NotificationOpen) => {    alert("Getting initial Notification")  });  this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {    alert("onNotificationOpened triggered")  });  this.notificationListener = firebase.notifications().onNotification((notification: Notification) => {    alert("onNotification triggered")  });  this.onMessageListener = firebase.messaging().onMessage(async (remoteMessage) => {    alert("onMessage triggered")  });}componentWillUnmount() {  this.notificationOpenedListener();  this.notificationDisplayedListener();  this.notificationListener();  this.initialNotificationListener();  this.onMessageListener();}

Any help would be appreciated, thank you :)

How to toggle developer modal on an iOS simulatorin mac-in-cloud?

$
0
0

I'm using an iOS simulator in mac-in-cloud (a mac in browser service).

I'd like to toggle the developer modal (like it's doing with ctrl+m on my Android emulator).

How can I achieve this?

React Native iOS Build - Directory not found for option

$
0
0

Description

I'm doing the build process of my IOS app with the App Center. But it runs pod install and in the next step it uses .xcodeproj instead of .xcworkspace folder. It gives an error of directory not found.

I would like to know why the error is happening with the .xcodeproj file and not with the .xcworkspace folder and what is that error, that will help me to prevent that happens again with other projects.

React Native version:

0.61.2

Steps

1) The installation of pod dependencies works fine

==============================================================================Task         : CocoaPodsDescription  : Install CocoaPods dependencies for Swift and Objective-C Cocoa projectsVersion      : 0.151.1Author       : Microsoft CorporationHelp         : https://docs.microsoft.com/azure/devops/pipelines/tasks/package/cocoapods==============================================================================[command]/usr/local/lib/ruby/gems/2.6.0/bin/pod --version1.7.5[command]/usr/local/lib/ruby/gems/2.6.0/bin/pod install --repo-updateUpdating local specs repositories....[!] Please close any current Xcode sessions and use `FastFeet.xcworkspace` for this project from now on.Sending statsPod installation complete! There are 24 dependencies from the Podfile and 25 total pods installed.The STDIO streams did not close within 10 seconds of the exit event from process '/usr/local/lib/ruby/gems/2.6.0/bin/pod'. This may indicate a child process inherited the STDIO streams and has not yet exited.##[section]Finishing: Pod install

2) Xcode build step uses sgeo.xcodeproj instead sgeo.xcworkspace and uses. That's why it fails and would to know why.

##[section]Starting: Xcode build (not signed)==============================================================================Task         : XcodeDescription  : Build, test, or archive an Xcode workspace on macOS. Optionally package an app.Version      : 4.130.0Author       : Microsoft CorporationHelp         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613730)==============================================================================[command]/usr/bin/xcodebuild -versionXcode 10.3Build version 10G8##[warning]Output directory for build output (binaries) ignored. Specifying an output directory is incompatible with the 'archive' action.[command]/usr/bin/xcodebuild -project /Users/vsts/agent/2.155.1/work/1/s/ios/sgeo.xcodeproj -scheme sgeo clean archive -archivePath /Users/vsts/agent/2.155.1/work/1/output/build/archive/sgeo.xcarchive CODE_SIGNING_ALLOWED=NO...ld: warning: directory not found for option '-L/Users/vsts/Library/Developer/Xcode/DerivedData/sgeo-byybcvsvzaukpqcrnnthwhpvohyi/Build/Intermediates.noindex/ArchiveIntermediates/sgeo/BuildProductsPath/Release-iphoneos/React-Core'ld: warning: directory not found for option '-L/Users/vsts/Library/Developer/Xcode/DerivedData/sgeo-byybcvsvzaukpqcrnnthwhpvohyi/Build/Intermediates.noindex/ArchiveIntermediates/sgeo/BuildProductsPath/Release-iphoneos/React-DevSupport'ld: warning: directory not found for option '-L/Users/vsts/Library/Developer/Xcode/DerivedData/sgeo-byybcvsvzaukpqcrnnthwhpvohyi/Build/Intermediates.noindex/ArchiveIntermediates/sgeo/BuildProductsPath/Release-iphoneos/React-RCTActionSheet'ld: warning: directory not found for option '-L/Users/vsts/Library/Developer/Xcode/DerivedData/sgeo-byybcvsvzaukpqcrnnthwhpvohyi/Build/Intermediates.noindex/ArchiveIntermediates/sgeo/BuildProductsPath/Release-iphoneos/React-RCTAnimation'** ARCHIVE FAILED **The following build commands failed:    Ld /Users/vsts/Library/Developer/Xcode/DerivedData/sgeo-byybcvsvzaukpqcrnnthwhpvohyi/Build/Intermediates.noindex/ArchiveIntermediates/sgeo/IntermediateBuildFilesPath/sgeo.build/Release-iphoneos/sgeo.build/Objects-normal/arm64/sgeo normal arm64(1 failure)##[error]Error: /usr/bin/xcodebuild failed with return code: 65##[section]Finishing: Xcode build (not signed)

Expected Results

App Center Build step needs to detect the .xcworkspace folder instead of .xcodeproj, and uses it to the pod install step.

Snack, code example, screenshot, or link to a repository:

https://ibb.co/jWWVjb2

React Native Lottie - Progress animation using state

$
0
0

I am using react-native to build the mobile Application. Moreover, I am using lottie to show an animation (filling water glass). (Image is attached).

enter image description here

In the application there is a button and when that is clicked a glass will be filled 1/4 (this can vary) of the glass and next time it will fill the other 1/4 of the glass and so on. I was able to do that using following code snippet. But what I want do is after 1/4 of water filling the water level should be a straight line. (last stage of the animation) But in following code it's 1/4 of the animation. I am using adobe after effect to create the animation. So can any one suggest me a solution for this.

class Screen extends React.Component {  constructor(props) {    super(props);    this.state = {      value: 0,      progress: new Animated.Value(0),    };  }  handlePress = () => {    this.setState({value: this.state.value + 0.2}, () =>      Animated.timing(this.state.progress, {        toValue: this.state.value,        duration: 1500,        easing: Easing.linear,      }).start(),    );  };  render() {    return (<View style={{flex: 1}}><Text>History</Text><Button          title="Press"          onPress={() => {            this.handlePress();          }}></Button><LottieView          source={require('../../assets/7731-water-loading.json')}          progress={this.state.progress}          loop={false}          autoPlay          autoSize          style={{width: 400}}        /></View>    );  }}
Viewing all 16907 articles
Browse latest View live


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