I am using react-native-video (v 5.0.2) and try to play file from local.

It's working in Android but not working in iOS.

I created the file that I want to play with react-native-fs. This is my code:

Write file:

const localFilePath = `file://${RNFS.DocumentDirectoryPath}/test.mp4`;
RNFS.writeFile(localFilePath, base64.encode(content), 'base64')
.then(success => {
console.log('FILE WRITTEN');
})
.catch(err => {
console.log('File Write Error: ', err.message);
});

Video source:

source={{ uri: this.state.fileUrl }}

I try to change the source with "file://" and without it, with "file:///" and also I tried to use encodeURI.

How can I let it work on iOS?

The app was built using react-native and published in App Store and was visible in settings after the first install from App store. Decided to uninstall and reinstall and now the app doesn't show up in settings anymore.

Use Case: need to change location permissions

Things tried:

1. reinstall app again
2. reboot device
3. close settings and reopen
4. check other apps if the issue appears with them too(doesn't)
5. leave the app running for a while

None of the things above worked

Platform: iOS 13.3

React Native Version: 0.59.9

I created a Linked-List data structure in my react-native app that I want to move between screens and then pick a node based on a checkerbox selection menu.

I understand that I can move the list using react-native-navigation, so now I would like to display the list with a checkerbox list to select multiple nodes and perform actions on them. The problem I see is that checkerbox lists use defined const arrays of items that are then listed.

The whole reason I went with linked-lists is that I need the list to dynamically update. (It may be more beneficial to use an array of large size instead, but each element within the node is somewhat large and I am unsure what effect a large array would have.)

Is there a way to input a linked list into a checkerbox list or would I have to create an array?

How would I go about either option if they need to dynamically update?

On every build in Xcode i get this error. How can i fix it?

I found this commit https://github.com/facebook/react-native/pull/25146/commits/61b8b9e69d8609fecaaaa7d2c9e32808bc5e98cb which should fix it but nothing happened.

static BOOL RCTParseUnused(const char **input)
{
 return RCTReadString(input, "__unused") ||
     RCTReadString(input, "__attribute__((__unused__))") ||
     RCTReadString(input, "__attribute__((unused))");
}

I have still this error

Can you help me fix it please?

I looked in node_modules and i already have this line

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||
         RCTReadString(input, "__attribute__((__unused__))") ||
         RCTReadString(input, "__attribute__((unused))");
}

Do you have another advice please?

So this should be an easy fix, but I can't find anything online. Using React Native for IOS dev.

I have 9 dragging images on my app, like so:

These images can be dragged and dropped around the screen.

The issue is, very often when I try to grab one of these images, I grab the screen instead, and it tries to take ALL my content upward. I don't have a scrollview or anything, this just seems to happen for whatever reason on IOS.

For example, it does this: enter image description here]2 I am using a navigator, so I guess this might help:

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

      <Stack.Screen
        name="AddPhotos"
        component={AddPhotos}
        options={{
          gestureEnabled: false,

          headerTransparent: true,
          headerTitle: '',
          headerBackTitle: 'Job',
        }}></Stack.Screen>
    </Stack.Navigator>
  );
}

Do I add something to the navigation, or do something with the window in the code? Thank you.[!

i have problem with notification sound onesignal with react-native in IOS platform. I already read documentation onesignal https://documentation.onesignal.com/docs/customize-notification-sounds but i not found the doc using react-native in ios. My sound file is .wav and i already added setting sound in onesignal account but still worked in ios.

Any solutions?

The app was built using react-native and published in App Store and was visible in settings after the first install from App store. Decided to uninstall and reinstall and now the app doesn't show up in settings anymore.

Use Case: need to change location permissions

Things tried:

1. reinstall app again
2. reboot device
3. close settings and reopen
4. check other apps if the issue appears with them too(doesn't)
5. leave the app running for a while

None of the things above worked

Platform: iOS 13.3

React Native Version: 0.59.9

I have data in firebase data that looks like the following:

The code for getting customers data:

getCustomersOnQeueu = async () => {
        let customers = this.customersRef.orderByChild("ticket").once('value')
        return customers
      }

Code for rendering data:

renderCustomers = () => {
        let customersViews = []
         this.getCustomersOnQeueu().then((customers) => {
           let customersTickets = customers.val()
           console.log(customersTickets)
           let sortedKeys = Object.keys(customersTickets).sort(function(a, b){
             return customersTickets[b].ticket - customersTickets[a].ticket
           })
           console.log(sortedKeys)
           for(i=0; i<sortedKeys.length; i++) {
             let key = sortedKeys[i]
             console.log(customersTickets[key]["customer"])
             customersViews.push(<View>
               <Text>{customersTickets[key["customer"]}</Text>
             </View>)
           }
         })
       return (<View>
         <Text>Available Customers: </Text>
         {customersViews}
         </View>)
      }

  render() {
   return (
    <View>
       {this.renderCustomers()}
    </View>
)
}

Now after data being fetched and sorted I can see the following in console:

I have a problem that this line of code is never executed:

customersViews.push(<View>
               <Text>{customersTickets[key["customer"]}</Text>
             </View>)

I am guessing that it might be because customersViews array is initialized after rendering is done and not before, how can I wait for data fetching and sorting to finish then render the data?

I am using react-native-map and it works well on ios and android.

my react native version is 0.61.2. But in ios, when I click map, then shows warning "-[RCTRootView cancelTouches]` is deprecated and will be deleted soon.".

What is this and how to remove this warning?

I want to change default simulator when building my app,

I'm trying to run this command react-native run-ios --simulator='iPhone XR'

but it's ignoring me :D and just launch iPhone X I don't know why?

when I open Xcode and choose what simulator i want then press Run icon it's work fine, but i don't need open Xcode every time i want to build my app, it's hart my Pc lo

I am searching about how to implement the Push-to-talk function for React native app using Firebase.

However, after a few hours of researching, I didn't find any tutorial how to do it. There are a lot of posts and blogs show me how to implement the Push Notification using Firebase but not Push-to-talk.

If you know any useful links, blogs, and so on, please let me know.

Thank you in advance!

Here is the code example: Expected behavior is that it should show a view with a green background. When alignItems: 'center' is set on the container, the view with a green background is not shown. Removing alignItems: 'center' from the container style shows green view. Can someone explain why it's working like that, and is that not a bug in layout system? Thanks in advance.

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <View style={{flex: 1, backgroundColor:'green'}}>
       </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

I try to build a "fresh" react-native project in Xcode and run it on the phone but it says library not found for -lDoubleConversion.

When I build it with npx react-native run-ios it runs fine in the simulator.

What am I missing? I found on the net that I am not the only one with this issue but I can't find the solution.

I spent already two days trying to find some solution and I have to say that I slowly stop believing that people are using react to build ios applications :-(

Edit: After several days of investigation, I still cant build it. I have found similar issues on the web and many hints were about the installation of third-party libraries. I tried to run this script:

cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../. But with an error:

./ios-install-third-party.sh Unpacking /Users/mastalir/Library/Caches/com.facebook.ReactNativeBuild/glog-0.3.5.tar.gz... ./ios-install-third-party.sh: line 66: ./ios-configure-glog.sh: No such file or directory

Thanks for any hint Jan

I use video component from expo. I can play video, but it doesn't sound in iOS. In Android it's okay. How can I fix it.

<Video style={{ width: 340, 
                                height: 220,
                                borderRadius: 10, 
                                overflow: 'hidden' }}
                                posterSource={require('../../assets/loading2.gif')}
                                usePoster={true}
                                rate={1.0}
                                isMuted={false}
                                useNativeControls = {true}
                                volume={1.0}
                                playsInSilentLockedModeIOS ={ true }
                                resizeMode='cover' 
                                shouldPlay={true} 
                                source={{uri : url}} />

I am in quite a situation right now. I'm working on a mobile application for my Uni's dissertation, and so far I have been developing my React Native project and testing it on the Expo client application on my iOS device. The development has been done on my only Windows laptop. Although, I had Mac OSX virtual machine setup a while ago with xcode installed.

I've only recently found out that Expo has some limitations, which for my case, I needed to implement a Bluetooth API library to work with some BLE beacons. I'm Hoping to use the third-party library called 'react-native-ble-plx' by Polidea, and read that I need to eject my project.

I'm guessing I need to move my project folder inside the Mac OSX virtual machine and continue my coding from there? If so, is it correct that I continue the development using just the Xcode application? Or are there any extra requirements and setup that needs to be done?

Final question, will I still be able to see my application preview on my iOS device? if not, how do I do it, while continuing my code development?

I am fairly new to coding mobile applications in general and it all seems very complex for me. But, I don't have a choice as I am very close to the Product submission date. So any help would be greatly, greatly appreciated.

I am trying to show web page with react-native-webview with local html file. But it doesn't execute javascript tags in html file at the iOS platform, but works on Android.

How I can fix it?

This is a codechip which I am using the WebView.
...
const html = require('./ep-home2')();
...

Here is ep-home2.js file.

module.exports = function() {
      return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <title>SADAD</title>
        <!-- loader icon -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video-js.min.css" integrity="sha256-kflKPH4F0cGv0BJg6I6+pb5nIO01FMeoK7qWoz1NayE=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/easy-autocomplete.min.css">

        <style>

          body {
              opacity: 0;
          }

          body.all-loaded {
              opacity: 1;
          }
            html {
                touch-action: manipulation;
            }

            /*body {background: #FFFFFF;}*/
            .con {
                display: block;
            }
            .preloader p {
              color: #fff;
              padding-top: 20px;
            }

            .fade-in {
              animation: fadeIn ease 250ms;
            }
            @keyframes fadeIn {
              0% {
                opacity:0;
              }
              100% {
                opacity:1;
              }
            }
        </style>

        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/circle.css">
        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/animation.css">
    </head>
    <body>

        <span id="status" class="status" style="display: none"></span>

    <div class="main-containers" style="top: 0; position: relative;overflow-x: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);">
    </div>

        <script type="application/javascript">

            // Create Base64 Object
            var Base64 = {

                _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",


                encode: function(input) {
                    var output = "";
                    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                    var i = 0;

                    input = Base64._utf8_encode(input);

                    while (i < input.length) {

                        chr1 = input.charCodeAt(i++);
                        chr2 = input.charCodeAt(i++);
                        chr3 = input.charCodeAt(i++);

                        enc1 = chr1 >> 2;
                        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                        enc4 = chr3 & 63;

                        if (isNaN(chr2)) {
                            enc3 = enc4 = 64;
                        } else if (isNaN(chr3)) {
                            enc4 = 64;
                        }

                        output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

                    }

                    return output;
                },


                decode: function(input) {
                    var output = "";
                    var chr1, chr2, chr3;
                    var enc1, enc2, enc3, enc4;
                    var i = 0;

                    input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, "");

                    while (i < input.length) {

                        enc1 = this._keyStr.indexOf(input.charAt(i++));
                        enc2 = this._keyStr.indexOf(input.charAt(i++));
                        enc3 = this._keyStr.indexOf(input.charAt(i++));
                        enc4 = this._keyStr.indexOf(input.charAt(i++));

                        chr1 = (enc1 << 2) | (enc2 >> 4);
                        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                        chr3 = ((enc3 & 3) << 6) | enc4;

                        output = output + String.fromCharCode(chr1);

                        if (enc3 != 64) {
                            output = output + String.fromCharCode(chr2);
                        }
                        if (enc4 != 64) {
                            output = output + String.fromCharCode(chr3);
                        }

                    }

                    output = Base64._utf8_decode(output);

                    return output;

                },

                _utf8_encode: function(string) {
                    string = string.replace(/\\r\\n/g, "\\n");
                    var utftext = "";

                    for (var n = 0; n < string.length; n++) {

                        var c = string.charCodeAt(n);

                        if (c < 128) {
                            utftext += String.fromCharCode(c);
                        }
                        else if ((c > 127) && (c < 2048)) {
                            utftext += String.fromCharCode((c >> 6) | 192);
                            utftext += String.fromCharCode((c & 63) | 128);
                        }
                        else {
                            utftext += String.fromCharCode((c >> 12) | 224);
                            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                            utftext += String.fromCharCode((c & 63) | 128);
                        }

                    }

                    return utftext;
                },

                _utf8_decode: function(utftext) {
                    var string = "";
                    var i = 0;
                    var c = 0;
                    var c1 = 0;
                    var c2 = 0;
                    var c3 = 0;

                    while (i < utftext.length) {

                        c = utftext.charCodeAt(i);

                        if (c < 128) {
                            string += String.fromCharCode(c);
                            i++;
                        }
                        else if ((c > 191) && (c < 224)) {
                            c2 = utftext.charCodeAt(i + 1);
                            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                            i += 2;
                        }
                        else {
                            c2 = utftext.charCodeAt(i + 1);
                            c3 = utftext.charCodeAt(i + 2);
                            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                            i += 3;
                        }

                    }

                    return string;
                }

            }

        </script>

        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.7.0/pubsub.min.js" integrity="sha256-QF0bsKIv/J8eC1vj+f/xSmLSME+ztgCsUVYSR6hdHjE=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js" integrity="sha256-DDYBI87lVdSZOudgc6hh30NBPNzbLZqxBOwwmicNeB0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"></script>
        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/jsonform.js"></script>
        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/js/jsonform/2.1.5/jsv.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" integrity="sha256-gAx3c/BXS1tVc72JrzzIsPxrs2jW+96PfM+Xwwvb9pk=" crossorigin="anonymous"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.3/async.min.js"></script>

        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/bcc-main-multi-layout-post-message-bypass.js"></script>


        <script>
            function keyboardShown() {
                jQuery('.activecampaign .hidable').addClass('hidden');
                //Move it 6p
                let tl1 = gsap.to(".logo", {duration: .25, marginTop: "1vh", scale: .55});
                let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 0, display: "none"});   
            }

            function keyboardHidden() {
                jQuery('.activecampaign .hidable').removeClass('hidden');
                let tl2 = gsap.to(".logo", {duration: .25, marginTop: "7vh", scale:.95});
                let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 1, display: "block"})

            }

        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js" integrity="sha256-cWzRia+bxBCmFQv+ZjhTVz95Q5VcDIQAWiiZvaRBDeQ=" crossorigin="anonymous"></script>-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.11/jspdf.plugin.autotable.min.js" integrity="sha256-k9mQGbAO6sNi3ZtGGmZBOK8/00BJZQ5H2FyWfI3/3SA=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha256-aS5HnZXPFUnMTBhNEiZ+fKMsekyUqwm30faj/Qh/gIA=" crossorigin="anonymous"></script>        

         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
         <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/grnAnimation2.js"></script>

       <script>

         $(document).ready(function() {
            $("body").addClass('all-loaded');
        });
        </script>



    </body>
    </html>
    `;
    };

Above is what I am trying to display on iOS.

I am building an SDK using react native to be used by native android and IOS apps. I was trying to make the SDK easy to be set up, so the SDK user does not have to use yarn or npm. Based on some blogs, android seems to be doable. However, with IOS i am having some troubles adding the react native dependencies.

React native docs suggests adding pods using downloaded node modules. Is there any way for the SDK user to only add the SDK pod to his/her app without adding any react native pods? I am new to cocoapods and as far as i understand IOS searches for pods on the cocoapods repo only.

I tried uploading all the react native dependencies to a public repository so the SDK user can add all the pods to his/her Podfile. If someone wants to use the SDK the Podfile would look like this:

  pod 'MySdk', :path => '../my-sdk'

  repository = 'git@github.com:AbdullahAsendar/react-native-ios-pod.git'
  tag = '0.61.5'

  pod 'FBLazyVector', :git => repository, :tag => tag
  pod 'FBReactNativeSpec', :git => repository, :tag => tag
  pod 'RCTRequired', :git => repository, :tag => tag
  pod 'RCTTypeSafety', :git => repository, :tag => tag
  pod 'React', :git => repository, :tag => tag
  .... THE REST OF THE PODS

This may be acceptable but not having to add all these pods would be better,

Also, can i create a pod for each one of the dependencies and upload these pods to CocoaPods? This way i would reference these pods in my SDK and the SDK user will only have to add the SDK pod.

I'm attempting to build my react native app via fastlane on CircleCI. I'm using match for managing certificates/profiles and using these guides:

• Fastlane: CircleCI Integration

• CircleCI: Example configuration for using Fastlane on CircleCI

• CircleCI: Preparing your Xcode project for use with Fastlane Match

fastlane ios beta works locally.

On CI however, I found the setup failed to build, with the following error:

error: No profile for team '...' matching 'match Development app.my' found: Xcode couldn't find any provisioning profiles matching '.../match Development app.my'. Install the profile (by dragging and dropping it onto Xcode's dock item) or select a different one in the Signing & Capabilities tab of the target editor. (in target 'MyApp' from project 'MyApp')`

I thought this was strange, because I'm not using the development profile for my build, but instead the distribution profile. This is confirmed in the build output when match/gym are invoked, where there is no mention of the development profile.

In Xcode, under "Signing & Capabilities", I had "automatically manage signing"unticked as per the above guides, with "debug" set to use the development provisioning profile, with "release" set to use the distribution profile.

Changing the provisioning profile to "release" under the "debug" section was what fixed my CI builds, but why is this? Surely my debug builds should always use a development certificate?

I've been building react-native for android at beginning and never been into IOS as I don't have project that use IOS at that moment and I don't own IOS or MacOS. And I'm clueless of what is difference between IOS and Android in general. I'm currently need to develop my app to be able to use by both Android and IOS.

What are the common things that need to be handle? To be exact, check for Platform. From maestral-solutions, it shows on stylesheet that the header height and margin top:-

const styles = StyleSheet.create({
  header: {
    height: Platform.OS === 'android' ? 76 : 100,
    marginTop: Platform.OS === 'ios' ? 0 : 24,
    ...Platform.select({
      ios: { backgroundColor: '#f00', paddingTop: 24},
      android: { backgroundColor: '#00f'}
    }),
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 24
  }
});

Is there any other common things to handle for IOS platform? Like status bar or tab navigation or icon?

I am researching about the PayPal in React Native.

I am using the v2 apis because PayPal v1 is deprecated.

When I move to the document of PayPal payment v2, I see the document is a lot different from the v1.

Below is steps by steps my checkout:
1/ Use https://api.sandbox.paypal.com/v1/oauth2/token to get token.
2/ Use https://api.sandbox.paypal.com/v2/checkout/orders to create an order
3/ Use approve link for clients to accept payment
4/ I set the return_url to be https://www.google.com/. After clients accept the payment, I receive the return_urlhttps://www.google.com/?token=<order_id>&PayerID=<payer_id>

I get stuck in this step, how can I use the information order_id and payer_id?

If you know how to move on, please let me know too.

Thank you in advanced!