To send data from native iOS Swift to React Native, you can use event emitters. Here’s how to set it up: This setup allows you to push data from native Swift code to your React Native application whenever needed, which is useful for handling native events, callbacks from APIs, or any asynchronous operations.
In React Native, you can load data into a list using components like FlatList or SectionList. Here’s a simple approach using FlatList. The sample implementation is as given below. Let me break down how this React Native code works for loading data into a list: 2. useEffect Hook: 3. fetchData Function: 4. renderItem Function: 5.… Read More »
Passing Data from Swift to React Native Using Event Emitters To share data between your Swift native code and React Native JavaScript, you’ll need to use the React Native event emitter system. This creates a communication bridge between the native and JavaScript layers. Let me walk you through the process step by step. Setting Up… Read More »
There will be situations where you have to expose your Swift class to React Native. To do this, you need to use some Obj-C Macros available in React Native. To use these Obj-C Macros, you need a new Obj-C file: You have to import RCTBridgeModule, so that you can use the Macros to bridge the native… Read More »
In Today’s article, we are going to see how to work with FlatLists in React Native and We will add a search bar as a header to the FlatList and filter the list, Also we will see what are spread operators and how to work with them. Note: Make sure that you install react-native-elements package.… Read More »
This issue happens in react-native-firebase for a various reasons. First thing you have to do is check Firebase/Core is in your pods. Try Cleaning and rebuilding your project. Click on the target you are running in xcode and check the frameworks section in ‘General’ Tab -> Check you have linked libFirebase.a there. If not click… Read More »
Hi friends, This is essentially a continuation of this post http://www.coderzheaven.com/2018/08/10/how-to-create-a-custom-native-imageview-in-android-for-reactnative/ Now we will listen to a click event from the image we just created. For that we have to add the ClickListener to the image in Android. Add below methods to the java class On the React Native Side The whole java class will… Read More »
We will create different styles to style different components, correct? And most of them will have duplicate elements, correct? What are the disadvantages of this problem? You will clutter your file with duplicate lines of code. It will increase the file size and increase the application size. Not very efficient way of coding. Limited reusability.… Read More »
Many times we need custom components from native. Here is a simple example on how to create a custom imageview in Android for react native. First we will start with the Android Version Android Create a class that extends SimpleViewManager. Write a setSrc method which accepts the source url from React Native. Implement ‘createViewInstance’ method… Read More »
So how do we normally monitor all the operations in a react native applications. All the networks, redux state etc. So you will need a plugin/package for this. Its called Reactotron. Here is the github page for Reactotron. What is Reactotron? A macOS, Windows, and Linux app for inspecting your React JS and React Native… Read More »
Image Loading and caching had been a little bit pain in react native. In-fact react native didn’t had native support for caching. But after the recent release, there is now support for caching in iOS only. Still not for Android. You can read more about this from here https://facebook.github.io/react-native/docs/images.html#cache-control-ios-only Now these are the variety of… Read More »
Animations are achieved in React Native using the Animation API. Below are the methods Animated.timing() — Maps time range to easing value. Animated.decay() — starts with an initial velocity and gradually slows to a stop. Animated.spring() — Simple single-spring physics model (Based on Rebound and Origami). Tracks velocity state to create fluid motions as the toValue updates, and can be chained… Read More »