I am looking to source some testing Android and iOS devices for React Native apps. I've looked at the official docs, but there isn't a specific section for it.

I have implemented all the steps depicted in firebase official document for Firebase Crashlytics. I have cross-checked few times to make sure I don't miss any step.I referred this doc for implementation [;lsteps for implementation Also I uploaded DSYM files in firebase console assuming if dSYM files are not generating automatically. Still no crash is appearing in firebase console. I forced a crash for testing as mentioned in this docenter link description herebut no luck. Can someone please help me get crash logs in my firebase console?

Note: It is working perfectly in Android and logging crashes in console for Android.

For some reason since recently, I cannot run my React Native app on a physical device from Xcode or even from the command line. I'm getting the following error:

duplicate symbol '_md5_block_data_order' in:
    /XXX/Library/Developer/Xcode/DerivedData/XXXX-bdrylwsxpcqgzvgkcljteyttcdmr/Build/Products/Debug-iphoneos/BoringSSL-GRPC/libBoringSSL-GRPC.a(md5.o)
    /XXX/project/ios/Pods/OpenSSL-Universal/ios/lib/libcrypto.a(md5_dgst.o)
ld: 1 duplicate symbol for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

However it works fine from a simulator. And I can upload the app to AppStoreConnect without any issue.

From what I understand it looks like the same symbol exists in 2 libraries. Not sure why, most likely one of the mobile app dependencies.

In the list of Pods installed I have both BoringSSL-GRPC (0.0.3) and OpenSSL-Universal (1.0.2.19)

BoringSSL is used by Firebase and OpenSSL is used by Flipper.

This is the list of third party dependencies I use:

  pod 'Firebase/Core', '~> 6.3.0'

  pod 'Firebase/Messaging', '~> 6.3.0'

  pod 'Firebase/Firestore', '~> 6.3.0'

  pod 'Firebase/Auth', '~> 6.3.0'

  pod 'TrustKit'

  pod 'Stripe', '16.0.0'

  pod 'Amplitude-iOS', '~> 4.5'

  pod 'Intercom', '~> 5.5.1'

  flipper_pods()

When I remove Firebase all together, it works fine and I can run my app on the device. But I need Firebase...

Any idea how to resolve this?

Thanks!

I am installing the application on my phone via Xcode in release mode. It works for a while without any problems. Then, for example, I try to open the application after a few hours, but it crashes immediately. What is the reason?

You can see here: https://imgur.com/a/ydvZEqW

I have faced a kind of problem with react-native-image-picker.

On iOS, when user opens Image picker (doesn't matter whether to pick image or press "Cancel"), after closing, bottoms tabs wix/react-native-navigation text color changes to blue.

Android works well.

I have tried to use mergeOptions() func to change it back directly, but it didn't work, maybe I have done something wrong, but nevertheless I'm in deadlock with this problem.

Here is how image-picker func looks:

    ImagePicker.showImagePicker({ title: 'Pick photo' }, res => {
      if (res.didCancel) {
        console.log('User cancelled');
      } else if (res.error) {
        console.log('Error', res.error);
      } else {
        this.setState({
          fileType: res.type,
          fileName: res.fileName,
          uri: res.uri,
        });
        this.postAvatarImage();
      }
    });
  };

Thanks in advance, hope you can help me.

I would like to highlight a multiline text in a React Native app by changing the text's background color. The problem is that the background color changes in the whole text area, not just under the words.

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

The code above results in something that looks like this:

But I would like it to look like this:

I can get that result by splitting the text and adding the background color to the individual words:

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split('').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

But splitting the text into individual words doesn't seem like the best solution, and has a huge performance cost. Is there any cleaner way to do it?

Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? RCTRootView.m ?

The react native StatusBar component only support backgroundColor for Android only.

The iOS operating system seems to allow setting status bar backgroundColor

My goal is to have a darker status bar color.

I am creating native module using create-react-native-module with swift. After that I have followed react native official documentation for iOS setup. doc link:: https://facebook.github.io/react-native/docs/native-modules-ios

I have created create-react-native-module with example. I am just adding simple function with returning string "Hello World" inside my native module.

My 'CustomModule-Bridging-Header.h'::

#import <React/RCTBridgeModule.h>

My 'CustomModule.m'::

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(CustomModule, NSObject)

RCT_EXTERN_METHOD(sampleMethod)

+ (BOOL) requiresMainQueueSetup {
  return YES;
}

@end

My 'CustomModule.swift':

import Foundation

@objc(CustomModule)
class CustomModule: NSObject {
  @objc(sampleMethod)
  func sampleMethod() -> String {
      return "Hello World"
  }
}

After making these changes to native module I have installed dependencies again inside example. Now my App.js is look like::

import React, { Component } from 'react';
import { Platform, Text, View } from 'react-native';
import CustomModule from 'react-native-custom-module';

export default class App extends Component {
    state = {
        message: '--'
    };

    async componentDidMount() {
        const msg = await CustomModule.sampleMethod();
        console.log('javascript calling msg::', msg);
        this.setState({
            message: msg
        });
    }
    render() {
        return (
            <View>
                <Text>CustomModule example☆</Text>
                <Text>{this.state.message}</Text>
            </View>
        );
    }
}

Here I am getting "msg" value as undefined. Please help!

Please provide the following: 1. SDK Version: 36.0.0 2. Platforms(Android/iOS/web/all): iOS

I am first time building iOS app using following expo command:

expo build:ios

After that, it ask for Apple Id and Password which I have provided correct. After few seconds, it throws following error:

<!--language:lang-none-->
Reason: Unknown reason, raw: "<html>\r\n<head><title>502 Bad Gateway</title></head>\r\n<body>\r\n<center><h1>502 Bad Gateway</h1></center>\r\n<hr><center>Apple</center>\r\n</body>\r\n</html>\r\n\n"
Error: Reason: Unknown reason, raw: "<html>\r\n<head><title>502 Bad Gateway</title></head>\r\n<body>\r\n<center><h1>502 Bad Gateway</h1></center>\r\n<hr><center>Apple</center>\r\n</body>\r\n</html>\r\n\n"
    at runAction (/expo-cli@3.11.9/src/appleApi/fastlane.ts:28:17)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at Object.authenticate (/expo-cli@3.11.9/src/appleApi/authenticate.ts:46:40)
    at IOSBuilder.getAppleCtx (/expo-cli@3.11.9/src/commands/build/ios/IOSBuilder.js:47:23)
    at IOSBuilder.produceMissingCredentials (/expo-cli@3.11.9/src/commands/build/ios/IOSBuilder.js:123:22)
    at IOSBuilder.prepareCredentials (/expo-cli@3.11.9/src/commands/build/ios/IOSBuilder.js:65:7)
    at IOSBuilder.run (/expo-cli@3.11.9/src/commands/build/ios/IOSBuilder.js:19:7)
    at IOSBuilder.command (/expo-cli@3.11.9/src/commands/build/BaseBuilder.js:55:7)
    at Command.<anonymous> (/expo-cli@3.11.9/src/exp.ts:81:7)

I'm building a React Native app and am using Fastlane to manage my signing, building and deployment. I'm trying to build an ad-hoc package but each time I run the build using Fastlane gym, I get an error message about a missing header file. The build runs fine in XCode from Product -> Build and I can run the app fine in my local simulators.

The error message I'm seeing is from gymAppDelegate.m:13:9: 'ReactNativeNavigation/ReactNativeNavigation.h' file not found, which I'm aware is associated with the React Native Navigation setup, and have followed the steps to fix it.

Has anyone seen this error before, or have any suggestions on how to get more information about why the XCode build is working? I've tried scrubbing my build, pods and node_modules directories with no luck. I'm using React Native 0.59.9 and XCode 11.3.1.

This is what I have in my Fastfile:

match(
  type: "adhoc",
  git_branch: "master",
  git_url: "<my cert repo>",
  app_identifier: ["<main app ID>", "<app extension ID"],
  team_id: "<my team ID>",
  readonly: true,
)
sh('yarn', 'build:ios')
gym(
  workspace: "myApp.xcworkspace",
  scheme: "myApp",
  configuration: "Beta",
  export_method: 'ad-hoc',
  output_directory: "builds",
  output_name: ipaName,
)

FYI, in this case yarn build:ios is an alias for react-native bundle --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios --platform ios

It seems that createDrawerNavigator now only supports the following:

<Drawer.Navigator initialRouteName="More" drawerContent={props => <MenuScreen />}>
   {/* <Drawer.Screen name="Tabbar" component={MainTabNavigator}/> */}
   <Drawer.Screen name="Projects" component={ProjectsScreen} />
   <Drawer.Screen name="More" component={MoreScreen} />
</Drawer.Navigator>

the commented line is throwing:

You can only include screens inside, what I'm trying to do is put a tabbar navigator using "createBottomTabNavigator". On previous versions of react-navigation it was possible, but I can't find a solution on the new version (I'm using "@react-navigation/drawer": "^5.0.0")

Any clues? thanks in advance

I have an app that requires camera access. On android side I am asking for permission but on iOS side you don't have to request permission because Apple do it for you (from plist). But in that case I don't know if iOS user accepted or rejected the permission request. How can I know user is accepted request or not on iOS device.

If user will decline the permission I will navigate to other screen and if accepted camera will open.

I didn't find any answer on stackoverflow or react-native documentation.

Thanks in advance.

We currently have the situation that we need to create an Android library (aar) and an iOS Framework. You know about the benefits, so we would like to have this done in a cross-platform manner. There is a strong React Native background in our company, but since there is no official solution to achieve this, we would be open for other suggestions as well. I read here that this can be done. However the mentioned solution has major drawbacks, such as the .framework size in iOS. Does anyone have a better approach for this?

My code works perfectly on Android but it shows an error in iOS.

Error in iOS:

I couldn’t understand this error; is it related to AsyncStorage?

Why this happening on iOS devices?

First File

My imports

import React, {Component} from 'react';

import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';

import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';

import { SimpleLineIcons, Ionicons } from '@expo/vector-icons';

import { NavigationActions } from 'react-navigation';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { LinearGradient } from 'expo';

import { StatusBar } from "react-native";

import { Grid, Row, Col } from 'react-native-easy-grid';

import Toast, {DURATION} from 'react-native-easy-toast';

import Strings from '../utils/Strings';

var width = Dimensions.get('window').width;

export default class Login extends Component {
    static navigationOptions = {
        header: null
    };

    constructor() {
        super();
        this.state = {
            MobileNo: '',
        };
    }

    login = () => {
        AsyncStorage.setItem('mobileno', MobileNo);

        const { MobileNo } = this.state;
        console.log("Expected login number " + MobileNo);

        fetch('http://demo.weybee.in/Backend/controller/User_Login.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                mobileno: MobileNo
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            // If server response message same as Data Matched
            if(responseJson != 'Enter valid phone number') {   
                const { navigation } = this.props;
                // Then open Profile activity and send user email to profile activity.
                this.props.navigation.navigate('ForgetPass');
            } else {
                this.refs.toast.show('Invalid Number', DURATION.LENGTH_LONG);
            }
        }).catch((error) => {
            console.error(error);
        });
    }
}

Second File

My imports

import React, {Component} from 'react';

import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';

import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';

import { SimpleLineIcons, Ionicons } from '@expo/vector-icons';

import { NavigationActions } from 'react-navigation';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { LinearGradient } from 'expo';

import { StatusBar } from "react-native";

import { Grid, Row, Col } from 'react-native-easy-grid';

import Toast, {DURATION} from 'react-native-easy-toast'

import Strings from '../utils/Strings';

import OtpInputs from 'react-native-otp-inputs';

var width = Dimensions.get('window').width; 

export default class Login extends Component {
    static navigationOptions = {
        header: null
    };

    constructor() {
        super();
        this.state = {
            MobileNo: '',
            mobileNumber: '',
            code: '',
        }
    }

    componentDidMount() {
        AsyncStorage.getItem('mobileno').then((mobileNo) => {
            if(mobileNo){
                this.setState({ mobileNumber: mobileNo });
            }
        });
    }

    PTP = () => {
        let mobileNumber = JSON.parse(this.state.mobileNumber);
        console.log("login number " + mobileNumber);

        let {code} = this.state;
        console.log(code);

        fetch('http://demo.weybee.in/Backend/controller/Get_PTP.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                mobileno: mobileNumber,
                code: code,
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            // If server response message same as Data Matched
            if(responseJson != 'Enter valid phone number') {     
                const { navigation } = this.props;
                // Then open Profile activity and send user email to profile activity.
                this.props.navigation.navigate('Home');
            } else {
                this.refs.toast.show('Invalid PTP', DURATION.LENGTH_LONG);
            }
        }).catch((error) => {
            console.error(error);
        });
    }
}

<View style={{flex:1}} >
      <ImageBackground
          source={require('../images/back02.png')}
          style={styles.bgscreen}
          onPress={Keyboard.dismiss}
          >
          <KeyboardAvoidingView behavior='position'>
          <Image
          style={styles.headImage}
          source={require('../images/login_img.png')} />
        <ImgBack navigation={this.props.navigation} />
        </KeyboardAvoidingView>
        </ImageBackground>
        </View>
        </TouchableWithoutFeedback>

If i remove <TouchableWithoutFeedback> then everything is fine. Help me. Don't ask for Child Component code. No need to know about that. Everthing is fine there.

I am just having problem with the <TouchableWithoutFeedback>

I have imported import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

I'm working on a drag and drop app builder. The concept is simple: users can build their apps visually, then the app's settings get turned into a configuration file which will be used by the app to decide how to construct itself (which views should be shown, how should the navigation look like, etc.)

My main concern is once the users download the apk (or ipa) file, they can decompile it, change things in the configuration file and re-compile/re-sign it to be published as a brand new app.

I was thinking about putting part of the logic on server side but that would introduce me the following problems:

• If 1000 people built and published an app with my software, and each app sends only 10,000 daily requests to my server, that's already 10,000,000 requests per day, which would be pretty expensive.

• If my server is down for any reason, I will have a lot of angry users coming at me.

Got any ideas?

Short description: I get push notification from twilio chat. But in my app I use 4 different chats (channels). So when I get field "bage" from notification it just show count of chats with new messages, but not amount of messages.

How can I get the sum of unread messages from all chats?

More info:

• I use react-native 0.61.2 but I write native code too;
• During the work I have used this tutorial TwilioChatReactNative;
• For indicate unreaded messages I use Message Consumption Horizon;
• The way of connection to chat (only react part) the close to this Connect to chat;
• In theory I can get set bage himself, but for me this function don't work in background;

  PushNotificationIOS.setApplicationIconBadgeNumber

• Also I have tried to use this library react-native-notification but it didn't help too.
• I subscribe to pushNotification with this method

  client.setPushRegistrationId('apn', token);

• When I use twilio notify and set "bage" by hand all work good, but notification from chat twilio do by himself.

Summary: I need one decision from this list (or something else, I open for offers):

• Say twilio send me sum of unread messages from all chats;
• Way how update "bage" from background;
• New way of subscribing to channels to get the sum of messages in "bage".

Thanks to everyone who will respond

So I have a navigation stack that constantly adds pages to it. The user can go to the previous page, or the next page. Like a sign up page.

So for example, here is a page with 3 screens (previous page, current page, next page)

function MyStack() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Current"
        component={ContentFunction}
        options={{headerTransparent: true, headerTitle: ''}}
      />
      <Stack.Screen name="Back" component={BackFunction} />
      <Stack.Screen
        name="Next"
        component={FirstNamePage}
        options={{
          headerTransparent: true,
          headerTitle: '',
          headerBackTitle: 'Gender',
        }}
      />
    </Stack.Navigator>
  );
}

The problem is, the buttons are piling on top of each other. See below.

What I need is to delete the old button, but I don't know how to do that. Of course I could do it with setting:

<Stack.Screen
        name="Next"
        component={FirstNamePage}
        options={{
          headerLeft: null
        }}
      />

But I cannot do this unless I am on that specific function. How do I go about doing this?

I am developing a React-Native application, which has both an Android and iOS version.

When working in Xcode, I have had several errors, which included duplicated files and Mach-O Linker errors.

Right now I'm struggling with the following error.

This is the complete log with the error.

I also append some screenshots of my configuration.

I am trying to build Android/IOS application application with React Native and trying to gather knowledge about its ability in manipulating incoming calls, so for example user is getting incoming call from somebody, is it possible for React Native to just hide this screen?

i've tried to gather all the modules and librarys for React Native which could perform such task but I could not find anything. so is this even possible, even in Flutter?