Tag: ReactNative

ReactNative 0.59.8 project – unable to archive for for iOS while app store release & Validate Buttons is always grayed out

Recently we faced a very strange issue while releasing our ReactNative App to Apple App Store. We were unable to submit the app to iOS app store because we were failing to generate iOS Archive. XCode always generating Generic XCode Archive rather than iOS App Archive.

Since XCode was generating Generic XCode Archive, Validate button was always disabled ( grayed out). We were failing to proceed further to submit the app. After exploring the issue we came across an apple help page which was suggesting following fixes to be done for our app.

  1. Your archive contains header files.

If your app links against a static library, then your archive contains header files because the library probably uses a Headers build phase to export these files as shown in Figure 4. Headers build phases do not work correctly with static library targets when archiving in Xcode. Delete this phase, add a Copy Files build phase to your library, and use it to export your header files. See Copying Files While Building a Product for more information about adding a Copy File build phase to your project.

 2. Your archive contains static libraries or frameworks.

You must set “Skip Install” to YES to prevent your static libraries or framework from being added to your archive.

the second step was little easy , however the first step was a big headache, a react native app will be having lot of static libraries, in that changing all header build phase to copy files build phase is a big manual work and we will get lot of compilation errors like Redenition of MethodDescriptor in NativeModule.h kind of.

Errors we see after moving header files from headers build phase to copy files build phase

Redefinition of iOS errors
Redefinition of iOS errors
You can see a stackoverflow question on this : xcode is creating generic xcode archive instead of iOS App Archive -> SO-Question

Solution:

How to release iOS app to app store when archive is troubling in XCode v11.x.x

if you are using XCode v11.x then apple has removed Application Loader from XCode Developer tools. Now the alternative to that is Apple’s Transporter Application

Again the steps are same as given below to submit your app to app store,

Essentially, after you do the Clean Build Folder, and then Build, you find the .app file in: ~/Library/Developer/Xcode/DerivedData//Build/Products/Release-iphoneos/

Create a new folder on your desktop named Payload (this name is case-sensitive)

Copy your .app file and paste the copy in this Payload folder.

Right click the folder and choose “Compress Payload”

When you save this, do not save it with the .zip extension, but instead save it with a .ipa extension.

This is now your .ipa file for your app, and you can upload this through Xcode Transporter App

How to release iOS app to app store when archive is troubling in XCode v10.x.x

We have to follow different approach to release the app.

There is another way to upload your app build to the app store: by creating an .ipa file of your app, and uploading it through Application Loader in Xcode ( just click cmd + space in your mac machine and search Application Loader ).

I don’t remember all the resources I found that helped me figure this out, but this was one of them: How to build .ipa application for react-native-ios?

Essentially, after you do the Clean Build Folder, and then Build, you find the .app file in: ~/Library/Developer/Xcode/DerivedData//Build/Products/Release-iphoneos/

Create a new folder on your desktop named Payload (this name is case-sensitive)

Copy your .app file and paste the copy in this Payload folder.

Right click the folder and choose “Compress Payload”

When you save this, do not save it with the .zip extension, but instead save it with a .ipa extension.

This is now your .ipa file for your app, and you can upload this through Xcode Application Loader.

    NOTE: Application loader asks for app specific password , kindly refer to generate app specific password -> https://www.imore.com/how-generate-app-specific-passwords-iphone-ipad-mac

The upload process will tell you if there is anything wrong with your build, but if there is not, it will upload to the app store and you should be able to find it in App Store Connect in a few moments.

Hope this helps you and/or others!

Thanks to Matthew Hall for answering in Stackoverflow -> https://stackoverflow.com/a/57532876/526438

React Native Crash Undefined is not an object (Evaluating ‘Sn[e]’)

React Native Crash Undefined is not an object (Evaluating ‘Sn[e]’)

Any one facing react native build issue? I am trying to generate debug build but its crashing when the app is launched . The exception has no useful information. I was facing the same issue with

sudo react-native run-android

 

But that got resolved after upgrading RN from 0.48 to 0.55(latest Stable Version). But the crash remain same for the apk generated using

sudo gradlew assembleDebug

The crash is similar to https://github.com/facebook/react-native/issues/16745

please see screenshot

ReactNative Undefined Not an object evaluating
ReactNative Undefined Not an object evaluating

Solution: Generating React Native Android Release and Debug Builds

1. If any one facing issue with generating ReactNative android build then do not forget to follow below steps

2. Update your key store details as given here

3. Then explicitly bundle the assets using below command

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

4. Generate the build using gradle

cd android && ./gradlew assembleRelease

Note: for release build I am facing another issue as follows

Error in Release build :

FAILURE: Build failed with an exception.

* What went wrong:
Failed to capture snapshot of input files for task ‘bundleReleaseJsAndAssets’ property ‘$1’ during up-to-date check.
> Failed to create MD5 hash for file ‘/Development/SourceCode/MobApp/testApp/root-state/sock’.

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 2s

To generate debug build

cd android && ./gradlew assembleDebug

 

Credits : SO Post

React Native: Ejecting Expo To Regular React Native Project.

React Native: Ejecting Expo To Regular React Native Project.

Before explaining the steps for eject from expo, I would like to thank the expo community who has done really a great job, it was nightmare for us to start with ReactNative initially without expo. Expo has done remarkable job and simplified the whole process to us. So we should thank expo community for that. But Expo has come up with its own limitations, it is really difficult to go forward with those limitations, hence ejecting from expo is must.

Follow below steps and find the issues listed in each step and the solutions for the issues faced during eject process. Follow all the below steps

1. npm run eject

? How would you like to eject from create-react-native-app? (Use arrow keys)
❯ React Native: I'd like a regular React Native project. 
  ExpoKit: I'll create or log in with an Expo account to use React Native and the Expo SDK. 
  Cancel: I'll continue with my current project structure. 
Choose 1st option

2. then run the command

react-native run-android
Building and installing the app on the device (cd android && ./gradlew installDebug)…

Problem:
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ‘:app’.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

BUILD FAILED

Total time: 45.174 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Solution:
Create local.properties in the andoid project folder and save the below content in that
sdk.dir = /Users/USERNAME/Library/Android/sdk
USERNAME: USERNAME should be your maachine user name

3. run the command

$ sudo react-native run-android

Problem:

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ‘:app:installDebug’.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

BUILD FAILED

Total time: 6.945 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

   Solution : Use proper cable and connect your device, enable debug mode in your android device. this is problem with some devices, do not spend time on this, because you will face bigger problems later 🙂 so either change the device or try with different cable.

4. Problem
com.android.ddmlib.InstallException: Failed to install all
at com.android.ddmlib.SplitApkInstaller.install(SplitApkInstaller.java:89)
at com.android.ddmlib.Device.installPackages(Device.java:904)
at com.android.builder.testing.ConnectedDevice.installPackages(ConnectedDevice.java:137)
at com.android.build.gradle.internal.tasks.InstallVariantTask.install(InstallVariantTask.java:134)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:75)
at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.doExecute(AnnotationProcessingTaskFactory.java:228)
at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:221)
at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:210)
at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:621)
at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:604)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:80)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:61)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:46)
at org.gradle.api.internal.tasks.execution.PostExecutionAnalysisTaskExecuter.execute(PostExecutionAnalysisTaskExecuter.java:35)
at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:66)
at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58)
at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:52)
at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52)
at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:53)
at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:203)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:185)
at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.processTask(AbstractTaskPlanExecutor.java:66)
at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.run(AbstractTaskPlanExecutor.java:50)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor.process(DefaultTaskPlanExecutor.java:25)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter.execute(DefaultTaskGraphExecuter.java:110)
at org.gradle.execution.SelectedTaskExecutionAction.execute(SelectedTaskExecutionAction.java:37)
at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:37)
at org.gradle.execution.DefaultBuildExecuter.access$000(DefaultBuildExecuter.java:23)
at org.gradle.execution.DefaultBuildExecuter$1.proceed(DefaultBuildExecuter.java:43)
at org.gradle.execution.DryRunBuildExecutionAction.execute(DryRunBuildExecutionAction.java:32)
at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:37)
at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:30)
at org.gradle.initialization.DefaultGradleLauncher$4.run(DefaultGradleLauncher.java:153)
at org.gradle.internal.Factories$1.create(Factories.java:22)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:91)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:53)
at org.gradle.initialization.DefaultGradleLauncher.doBuildStages(DefaultGradleLauncher.java:150)
at org.gradle.initialization.DefaultGradleLauncher.access$200(DefaultGradleLauncher.java:32)
at org.gradle.initialization.DefaultGradleLauncher$1.create(DefaultGradleLauncher.java:98)
at org.gradle.initialization.DefaultGradleLauncher$1.create(DefaultGradleLauncher.java:92)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:91)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:63)
at org.gradle.initialization.DefaultGradleLauncher.doBuild(DefaultGradleLauncher.java:92)
at org.gradle.initialization.DefaultGradleLauncher.run(DefaultGradleLauncher.java:83)
at org.gradle.launcher.exec.InProcessBuildActionExecuter$DefaultBuildController.run(InProcessBuildActionExecuter.java:99)
at org.gradle.tooling.internal.provider.ExecuteBuildActionRunner.run(ExecuteBuildActionRunner.java:28)
at org.gradle.launcher.exec.ChainingBuildActionRunner.run(ChainingBuildActionRunner.java:35)
at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:48)
at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:30)
at org.gradle.launcher.exec.ContinuousBuildActionExecuter.execute(ContinuousBuildActionExecuter.java:81)
at org.gradle.launcher.exec.ContinuousBuildActionExecuter.execute(ContinuousBuildActionExecuter.java:46)
at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:51)
at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:28)
at org.gradle.launcher.cli.RunBuildAction.run(RunBuildAction.java:43)
at org.gradle.internal.Actions$RunnableActionAdapter.execute(Actions.java:173)
at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:239)
at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:212)
at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:35)
at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:24)
at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:33)
at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:22)
at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:205)
at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:169)
at org.gradle.launcher.Main.doAction(Main.java:33)
at org.gradle.launcher.bootstrap.EntryPoint.run(EntryPoint.java:45)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.gradle.launcher.bootstrap.ProcessBootstrap.runNoExit(ProcessBootstrap.java:55)
at org.gradle.launcher.bootstrap.ProcessBootstrap.run(ProcessBootstrap.java:36)
at org.gradle.launcher.GradleMain.main(GradleMain.java:23)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.gradle.wrapper.BootstrapMainStarter.start(BootstrapMainStarter.java:30)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:127)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
:app:installDebug FAILED

Solution:
update gradle version in build.gradle file of your android project
classpath ‘com.android.tools.build:gradle:3.0.1’

5.

Problem
Building and installing the app on the device (cd android && ./gradlew installDebug)…

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project ‘testApp’.
> Could not resolve all dependencies for configuration ‘:classpath’.
> Could not find com.android.tools.build:gradle:3.0.1.
Searched in the following locations:
https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.1/gradle-3.0.1.pom
https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.1/gradle-3.0.1.jar
Required by:
:testApp:unspecified

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

BUILD FAILED

Total time: 10.721 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Solution:
add google() to your build script, as follows

buildscript {
    repositories {
        google()
        jcenter()
    }

 

6. Problem

FAILURE: Build failed with an exception.

* Where:
Build file ‘/testapp/android/build.gradle’ line: 5

* What went wrong:
A problem occurred evaluating root project ‘testApp’.
> Could not find method google() for arguments [] on repository container.

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

BUILD FAILED

Total time: 1.973 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Solution:
in your android/gradle/wrapper/gradle-wrapper.properties file check whether you have gradle distribution version 4,
it should be as follow.

distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

7. After this build success
8. Now facing Run-time exception of something like this

react android run Couldn’t find preset\ babel-preset-react native stage 0

error: bundling failed: “TransformError: D:\\path\\path\\project\\index.android.js: Unex
pected token ) (While processing preset: \”D:\\\\path\\\\path\\\\project\\\\node_modules
\\\\babel-preset-react-native\\\\index.js\”)”

Solution : Remove “babel-preset-react-native-stage-0/decorator-support” from your .bablerc file, Your bablerc file should look as follows

{
  "presets": [
    "react-native"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  }
}

React Native List View : Pagination With FlatList – Building A Great Scrollable List In React Native

React Native List View : Pagination With FlatList  – Building A Great Scrollable List In React Native

FlatList is is an interface used to render flat list, the component is provided by Facebook’s React Native Library

Handy features of FlatList are as follows

  1. It renders list of items if you just provide rendering View
  2. You can mention whether your list is horizontal or vertical, by default its vertical list view
  3. Configurable Callbacks provided 
  4. Header / Footer / Separator are supported by FlatList
  5. Pull To Refresh is made simple with React Native Flat List View
  6. Pagination is made easy using React Native Flat List view

How To Use React Native Flat List Component: With Loading symbol in Footer

<FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) => {
            //Call API to fetch next page of data
            console.log('on end reached ', distanceFromEnd);
          }}
          ListFooterComponent={(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Spinner color='#6d4c41' />
              <Text>Loading please wait...</Text>
            </View>
          )}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) => item._id}
        />

React Native Pull To Refresh Using Flat List

Pull to refresh is made easy by just mentioning onRefresh = true and we should also mention refreshing = true while fetching new data 

Pagination Using Flat List In React Native

To achieve pagination mention onEndReachedThreshold some value between 0 – 1 and  a callback for onEndReached should be provided where we have a logic to call API to fetch next page of data

Official documentation of React Native FlatList has many more functionalities listed.

Issues with React Native FlatList or onEndReached doesn’t get fired

Some times pagination for FlatList doesn’t work as expected, onEndReached Will never get fired, or some times it will be called only first time when list is loaded. Possible reason for this behaviour would be keeping FlatList inside native base Container or Content, Keep FlatList inside View to fix the issue. 

Another possible solution to the issue of FlatList is changing onEndReachedThreshold value to a small number like 0.001.

Another Interesting solution which worked for me is giving height explicitly to the FlatList , this will call onEndReached callback

style={{ height: ( Dimensions.get(‘window’).height – 100 ) }}

Addressing The issue : React Native FlatList onEndReached called again and again

This can be addressed by ignoring the callback calls, this is can be done by using distanceFromEnd, if the value is +ve then do your pagination stuffs, if the value is    -ve then ignore the callback call. ReactNative FlatList returns +ve value when scroll reaches the end of the list. So the update code looks like below

<FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) => {
            if (distanceFromEnd >= 0) {
              //call API to get next page values
            }
            console.log('on end reached ', distanceFromEnd);
          }}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) => item._id}
        />


Also Explore React Native Exceptions

ReactNative Exception: TabNavigator expected a component class, got [object, object]

ReactNative Exception: TabNavigator expected a component class, got [object, object]

Possible cases to get ReactNative Error: ReactNative Exception: TabNavigator expected a component class, got [object, object] .

  1. When you are using a component with all small letters or a component that begin with small letter, Example

 

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) => <homePage navigation={navigation} />
    },
 });

 

Solution : Use Capitalised class names, like HomePage navigation={navigation}

2. Another case is if by any chance you are using <div> component in ReactNative this exception might occur.
Example

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) => <homePage navigation={navigation} />
    },
    TestScreen: {
      screen: ({ screenProps, navigation }) => <div />
    }
});

 

Solution : Do not use div tag in ReactNative instead use View

Explore More About React Native : React Native FlatList And Pagination