Showing posts with label React Native. Show all posts
Showing posts with label React Native. Show all posts

9/24/2020

Solved | React Native Images and assets won't load after updating XCode to version 12.0

This morning I was shocked while I was working on my react native project, my Xcode crashed and suddenly asked me to install some component updates.

After the installation, the Xcode version became 12.0, and all the simulators are now running on iOS 14 while my react native project is running on version 0.61.5.

All the images and icons no longer work after I run the app on the iOS 14 simulator. It turns out the issue happens mostly on react native projects running below version 0.63 so the solution was to patch my RN0.61.5 to RN0.63.0 without doing an upgrade.

Patch code:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 
 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Here are the steps:

1. run "npm i -g patch-package"
2. Make a new folder called patches in the root directory of your project.
3. Make a new file called react-native+0.63.0.patch inside that folder
4. Copy and Paste the source code above inside the react-native+0.63.0.patch file.
5. run "patch-package" on the root of the project

You'll see some warnings about the possible issues you might encounter but so far after I run the "patch-package" everything works again. Hope this helps.

Reference:


Note:

If you re-install the node modules, this will delete the RN0.63.0 patch you generated, so you have to run the "patch-package" again.

6/27/2020

[SOLVED] Jest: NavigationContainer error | An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act

[SOLVED] Jest: NavigationContainer error | An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act


ORIGINAL CODE:

describe('Entry Point Android', () => {
let getByTestId;
let androidWrapperInstance;

beforeAll(async () => {
setPlatform('android');
const utils = render(<App />);
getByTestId = utils.getByTestId;
androidWrapperInstance = getByTestId('android_wrapper');
});

afterAll(() => {
jest.clearAllMocks();
});

it('should render android wrapper', async () => {
expect(androidWrapperInstance).toBeTruthy();
})
})


SOLUTION

describe('Entry Point Android', () => {
let getByTestId;
let androidWrapperInstance;

beforeAll(async () => {
setPlatform('android');
const utils = render(<App />);
await act(async () => {}) <<--- ADDING THIS AFTER THE RENDER SORTED OUT THE ISSUE
getByTestId = utils.getByTestId;
androidWrapperInstance = getByTestId('android_wrapper');
});

afterAll(() => {
jest.clearAllMocks();
});

it('should render android wrapper', async () => {
expect(androidWrapperInstance).toBeTruthy();
})
})




It appears that the error has something to do with the setTimeout inside React.useEffect in my component. My component looks like this:

import React from 'react';
import SplashScreen from 'react-native-splash-screen';
import WrapWithProvider from './WrapWithProvider';
import AppNavigator from './AppNavigator';
import {
NavigationContainer,
} from '@react-navigation/native';
export default function App() {
React.useEffect(() => {
setTimeout(() => {
SplashScreen.hide();
}, 3000)
}, []);

return (
<WrapWithProvider>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</WrapWithProvider>
);
}


I hope this helps.

6/12/2020

[SOLVED] Task 'installDebug' not found in project error in Mac after using zsh terminal

This error is caused by the terminal no longer identify your environment variables which you set up in "~/.bash_profile" in the previous Mac OS version.

The ZSH terminal is now using "~/.zprofile" for the environment variables so to solve this issue, all you need to do is copy everything inside your "~/.bash_profile" to your "~/.zprofile" and everything should work normally.

9/17/2018

SOLVED React Native android build error GC overhead limit exceeded

Problem

Today I recently encountered an error while building four react native android applications, the error was:

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> GC overhead limit exceeded
and
* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForRelease'.
> GC overhead limit exceeded

Solution

It appears it has something to do with the memory of the machine or pc, all I did was restart my pc to clear all the previous processes and clean up the memory usage and then build the app again.

I also noticed that while I was developing for 5 hours, my machine was slowly slowing  down which gave me the hint to restart my pc. Anyways, restarting your machine or pc should fix this issue 95% of the time. Hope this helps.

9/13/2018

SOLVED ReactNative WebRTC update issue | Android O (--min-api 26)

Problem

I recently upgraded my ReactNative WebRTC version from "1.58.3" to "1.67.1" which causes my app to fail when building or even running it. The exact error I encountered is:

D8: Invoke-customs are only supported starting with Android O (--min-api 26)
D8: Static interface methods are only supported starting with Android N (--min-api 24): org.webrtc.EglBase org.webrtc.EglBase.create()

Solution

1. In your project root directory go to "android/app/" and open the file build.gradle

2. Copy and paste the code below within the android config.

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
}

Example:

Build you react native app again and it should work.

9/06/2018

Get string values from Android strings.xml in React Native

Problem

I am working on a mobile app project that contains multiple app builds in React Native. Whenever I build a specific app, the string called "app_name" inside my

/android/app/src/main/res/values/strings.xml 

keeps on changing. I intended to do this so that the native part of my code knows what app I was building.

My goal here is to get the value of the string "app_name" so that can be able to render a specific asset(s) or use a specific java function intended for that app.

Solution

I have my strings.xml looks like this:


All I did was create a String function and inside that function I use getResources() and getString() to get the string value of app_name inside strings.xml;

Here is the code:


Using this approach, I am now able to pass the values inside strings.xml to my react native app. I was able to compare the value of the function appName() using appName().equals("appone") that return either true if match or false if not match.

Hope it helps.