/r/reactnative

Photograph via snooOG

A community for learning and developing native mobile applications using React Native by Facebook.

About:

A community for learning and developing native mobile applications using React Native by Facebook.

Interested in building web apps using React.js? Check out /r/reactjs!


React Native Links:

Getting Started w/React Native

IRC Chatroom:

irc.freenode.net #reactnative

Related Subreddits


Keywords: ios, android, mobile, apps, apple, iphone, ipad

/r/reactnative

146,259 Subscribers

2

Image flickering on swiping

I've built a card stack ui which shows multiple images as a stack and we can remove them by swiping. But when i swipe left to remove image it flickers once at its original place. i haven't been able to fix it. can some one please let me know what i am doing wrong
Code: https://gist.github.com/muazazhar/a970ef6cf1217bf7bde8d8c768f8db2c
screen recording: https://drive.google.com/file/d/1f0_LmeCMUInGGokXnfmSdb6rySJQiGMV/view?usp=sharing

0 Comments
2025/02/02
09:55 UTC

0

React native project doesnt work

When I start the application, I'm getting this error. The same error exists in old git branches as well. The project can compile. I've tried many methods but none worked. I need your help.

4 Comments
2025/02/02
08:16 UTC

1

How do I acknowledge consumable in-app purchase?

This is my first time implementing in-app purchases in my react-native app. I am not fully familiar with the lifecycle of an IAP but I read that acknowledgement is required at the end even after the payment is successful.

My products are consumable i.e. user buys virtual coins as many time as they want. When the buy button is pressed by the user on one of my in-app product I run this code:

 const handleProductPurchase = async (sku: Sku) => {
    try {
      let purchaseParams: RequestPurchase = {
        sku,
        andDangerouslyFinishTransactionAutomaticallyIOS: false,
      };

      if (Platform.OS === 'android') {
        purchaseParams = { skus: [sku] };
      }

      await requestPurchase(purchaseParams);
    } catch (error) {
      console.log('err: ', error);
      setIsLoading(false);
    }
  };

On my initial screen i.e. Home.tsx I have added the listener:

 const {
    currentPurchase,
    finishTransaction,
    getProducts,
  } = useIAP();

  useEffect(() => {
    const subscriptionListener = purchaseUpdatedListener(
      async (_purchase: Purchase) => {

        if (currentPurchase) {
          //TODO: Send the receipt to the server
          await finishTransaction({
            purchase: currentPurchase,
            isConsumable: true,
          });
          console.log(
            'currentPurchase @ subscriptionListener: ',
            currentPurchase.transactionReceipt,
          );
        }
      },
    );

    return () => {
      subscriptionListener.remove();
    };
  }, []);

What I see in console.log('currentPurchase @ subscriptionListener:... is something like this:

{\"orderId\":\"GPA.3393-1987-1655-68323\",\"packageName\":\"com.iapdemo\",\"productId\":\"com.simformllc.iapdemo.years\",\"purchaseTime\":1706781727369,\"purchaseState\":0,\"purchaseToken\":\"gdpkmemapmpmmbgjakpccknl...\",\"quantity\":1,\"autoRenewing\":true,\"acknowledged\":false}

No matter what I am doing the acknowledged:false is consistent. I found that doing finishTransaction should solve this but it is not.

I'm stuck at this currently, and haven't found the right solution yet.

0 Comments
2025/02/02
07:27 UTC

15

Is one codebase for web and mobile a good approach

I know it’s possible. Just wondering the pros and cons of only one react native codebase shared between mobile and web and if anyone has had good or bad experiences or if it would be better to do the web version in regular react

8 Comments
2025/02/02
00:57 UTC

4

React native maps EXPO SDK 52.0.26 map is blank with just the google logo

I'm trying to create 1 map using expo sdk 52 with react-native-maps

but the map is blank showing only the Google logo when I access my component

I have already made all the settings that the expo requests

1st I created 1 project in Google Cloud Console and enabled the necessary APIs, restricted the keys

2nd I generated the SHA1 keystore and linked it to my project in Google Cloud Console next to the package name of my project

3rd I added the API keys in app.json and androidmanifest.xml

Finally I created the component and put PROVIDE_GOOGLE

And at the end the map turns white with just the Google logo

4th Generate the build using the command: eas build --profile development --platform android

I'm using development build to perform map tests

Can anyone help me?

my app.json

https://preview.redd.it/mxuaht0gdlge1.png?width=482&format=png&auto=webp&s=4edd235957778eadffa68935f5fff7d47313515a

my androidmanifest.xml

https://preview.redd.it/fyd6apjcdlge1.png?width=810&format=png&auto=webp&s=f94ce35839715f7f1995c745733c79a82843ba55

code

https://preview.redd.it/sz2mhd1tclge1.png?width=554&format=png&auto=webp&s=e357cd271304bdd2cf519f97ff6bfab41b6c5862

Config google cloud console

https://preview.redd.it/ohp3cxc2dlge1.png?width=554&format=png&auto=webp&s=2719529f6d6348425eaeeafaa00c32cb32b0764f

https://preview.redd.it/4b9414w8dlge1.png?width=1364&format=png&auto=webp&s=49df1ad1d1dcd5a0233cb937a2d83615b0f2b41e

6 Comments
2025/02/01
21:03 UTC

0

IAP Subscriptions on iOS

Hello, I’m implementing a IAP subscription in my Expo app using Revenue Cat, the problem is when I create a new subscription on my app account…

Once I pay the subscription in my account, that subscription applies on all of my app accounts in the same iCloud.

How I fix that and start to validate a subscription only to user I have pay, not for all users on my cellphone using the same iCloud?

1 Comment
2025/02/01
20:16 UTC

0

IAP Subscriptions on iOS

Hello, I’m implementing a IAP subscription in my Expo app using Revenue Cat, the problem is when I create a new subscription on my app account…

Once I pay the subscription in my account, that subscription applies on all of my app accounts in the same iCloud.

How I fix that and start to validate a subscription only to user I have pay, not for all app users on my cellphone using the same iCloud?

0 Comments
2025/02/01
20:14 UTC

1

Responsive layouts

What’s the best tactic to use to make sure your app is displayed correctly on different devices. When I use a galaxy s6, and iPhone 12 and a pixel 9 pro, the design comes out way different, what’s the best way to resolve this?

0 Comments
2025/02/01
20:10 UTC

1

How do you build dynamic Banners?

Hi, I am building a e-commerce app for my friend's relative using React Native + Expo. The problem is that how do I update the sales banner on home screen dynamically for different sales season and also the content inside that banner page when the user clicks on it.

Edit: I am talking about the case when I need to introduce custom designs on the screen according to sales season without prompting users for an update.

31 Comments
2025/02/01
19:09 UTC

0

Need to Help to import react-native-notifications to AppDelegate.swift

How to import this Package in Swift File Unable to get any as of now

0 Comments
2025/02/01
19:03 UTC

9

Remote Hiring for Senior React Native Engineer

As the title says, my company is hiring for a remote senior react native engineer. They already have their own pipeline but I was wondering if there's someone here also interested. We work UK time and the pay range is ~100K pounds.
DM me with your LinkedIn or whatever you think shows your best work or leave a comment.

9 Comments
2025/02/01
18:36 UTC

0

Server host suggestion

I am currently building an app from scratch using React Native and Node.js. I want to test the app in the real world, so I plan to host the backend on DigitalOcean's basic plan. I am particularly interested in setting up Continuous Integration and Continuous Deployment (CI/CD) for the Node.js server. Could anyone suggest effective methods for configuring the server on DigitalOcean? Since I enjoy exploring new ideas, I would appreciate any innovative and interesting approaches you have in mind. (I am focusing on Android for now.)

  • React Native
  • Node.js
  • MongoDB
  • Socket.IO
2 Comments
2025/02/01
18:13 UTC

0

What are some good career options?

Hello everyone,

To introduce myself briefly, I’m a 24-year-old software developer from India, currently employed at an MNC startup. Previously, I spent two years at a software consulting firm where I sharpened my skills in React Native and mobile development.

With three years of total experience, I am eager to enhance my abilities. While browsing the internet, I consulted a friend for basic suggestions, including roles like Mobile Architect, Software Architect, and Project Management. After considering some of the advice, I found myself overthinking my options.

I’m reaching out to the community to learn about your journeys with React Native: how you started, your current experiences, and the challenges you encountered.

0 Comments
2025/02/01
17:49 UTC

1

Hello community! I made a Medium Article on how to run DeepSeek R1 Distilled (1.5B) locally on mobile device.

0 Comments
2025/02/01
16:57 UTC

14

What are some technical expectations for a 4 year experienced react native developer?

Hello everyone, I wanted to know what can you expect from a ~4 year experienced react native developer. Kind of curious to know where I stand, what can I improve or learn.. and mainly what am I missing. Please share your thoughts on the concepts which I should be knowing in this field. TIA🥺.

6 Comments
2025/02/01
16:28 UTC

16

Why do people post clickbait’s?

This post is misleading as it doesn’t cover some key information around the practice of development. It is purely anecdotal at this point. One thing the community can do is help with migration from version to version.

16 Comments
2025/02/01
14:37 UTC

1

Unable to use react-native-camera-roll

I was trying to use React-Native-Camera-Roll recently to save my pictures taken using react-native-vision-camera

Here are its docs:- https://www.npmjs.com/package/@react-native-camera-roll/camera-roll

Here are the steps which I followed as mentioned:-

  1. Installed the required packages:-
npm install @react-native-camera-roll/camera-roll --save

//Here testing6 is my appName 2. Opened android/app/src/main/java/com/testing6/MainApplication.java and added import statement to top of file

import com.reactnativecommunity.cameraroll.CameraRollPackage;
  1. Also added new CameraRollPackage() to the list returned by the getPackages() inside same android/app/src/main/java/com/testing6/MainApplication.java
override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here
              add(CameraRollPackage())
            }
  1. Appended the following lines is android/settings.gradle
include ':@react-native-camera-roll_camera-roll'
project(':@react-native-camera-roll_camera-roll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-camera-roll/camera-roll/android')
  1. Also in android/app/build.gradle added this dependecy block
  implementation project(':@react-native-camera-roll_camera-roll')
  1. Added Necessary permissions as mentioned in docs in android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Error got while compiling

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\WindowsDevlopment\Testing6\android\app\build.gradle' line: 5

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not find method include() for arguments [:@react-native-camera-roll_camera-roll] on project ':app' of type org.gradle.api.Project.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

BUILD FAILED in 2s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * Where: Build file 'C:\WindowsDevlopment\Testing6\android\app\build.gradle' line: 5 * What went wrong: A problem occurred evaluating project ':app'. > Could not find method include() for arguments [:@react-native-camera-roll_camera-roll] on project ':app' of type org.gradle.api.Project. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 2s.
info Run CLI with --verbose flag for more details.

Can anyone tell me what I am doing wrong

1 Comment
2025/02/01
13:49 UTC

0

Anyone experienced this on expo before for on Android.

On expo for android map works however on development build map does not display and there seem to be logs as to why. The key in app.config seems to be there but I’m not sure what’s happening any help is appreciated.

14 Comments
2025/02/01
13:41 UTC

29

I just published a tutorial on how to create the pixelate effect on React Native using @shopify/react-native-skia and a GLSL fragment shader

1 Comment
2025/02/01
13:20 UTC

1

Expo 52 3D

Hi, has anyone successfully loaded a 3d model in an Expo 52 app? How was the process? I cannot for the love of God import a 3d model via three fiber and drei.

If you have an example repository, I will love to hear about it

0 Comments
2025/02/01
12:55 UTC

1

Realtime data in a flatlist

I've been working on a screen in a currency trading app for a side project that presents a list of up to 100 different trading assets.

These assets are initially fetched with a standard REST API call and set in a state variable, the API can be paginated by page, and limited by number of results per page. The response contains an asset id, name, current value.

Currently I return 10 results per request, fetching 10 more each time the user scrolls further down the screen.

The tricky part I'm stuck on now is that the prices change frequently, and there's a websocket available for assets values.

I'm struggling on how to approach this from a web socket connection and data/state update perspective in a performant way so that I could enhance each asset list item shown with the real time price data while displayed in the list. I feel like updating the state variable containing the list items each time a price update is received with new values isn't great, but I'm stuck on how else to go about it.

I would really appreciate some help or pointers to examples on how this can be achieved!

3 Comments
2025/02/01
12:50 UTC

1

Bluetooth connection in React Native

Hey there! I'm stuck with an Bluetooth related problem! I want to connect two devices via a Bluetooth to send and receive data! What I'm trying to do is I've created a Tic Tac Toe game where 2 players can play with each other via a Bluetooth connection! Screen 1: option to play multiplayer Screen 2: when user select multiple Player it start scanning the near by device (but problem is that its scanning but not showing the near by device) I allowed all the permission added in manifest well as well

Screen 3: where Main game dashboard where player play with each other and update board state at real-time

(If one player plays his turn it won't allow his to select anything on board until other player moves )

0 Comments
2025/02/01
08:06 UTC

45

I built a photo editor for brand cameos

14 Comments
2025/02/01
08:06 UTC

6

New to react native, and lm wondering do you design separate screens for the web and iOS/android?

Or do you just display the components of the screen differently depending on if it’s on web or iOS for example?

1 Comment
2025/02/01
07:38 UTC

1

In App purchase for app store

I dont know the steps to implement the in app purchase in our react native project because our app gets rejected due to 3.1.1 guidelines. I am new to this so can anyone explain how to do it. Now i used the react native iap to fetch the subscription in the app store connect but then error cant find the skus like that but all setup is beig configured in the app store and the vs code is correct. I just need to test the products in the simulator whether it is fetching or not because i dont have physical phone apple. One more doubt is what we should configure the In app purchase or the subscription in the monetization section of the app store connect. I am very confused help me out.

1 Comment
2025/02/01
07:17 UTC

0

I'm thinking to build a credit card app which helps you to keep track of all the cards at one place - suggestions please

Hello everyone I'm thinking to build a credit card app which helps me to keep the track of all the cards and understand my spends and hidden charges. Can you please provide me suggestion will that be useful or no need of such app right now in the market what you do think ?

Thank you.

38 Comments
2025/02/01
06:59 UTC

47

TabBar UI Design in React Native

I designed a TabBar component that adapts dynamically based on the number of tabs. It highlights the active tab and updates content accordingly, making navigation seamless.

Check out the full code here: https://www.patreon.com/posts/121174480?utm_campaign=postshare_creator

4 Comments
2025/02/01
05:41 UTC

16

How did you get 12 testers??

Hi everyone! I've built an app and I'm planning to publish it to the Play Store - to do so, I'm required to have 12 testers. Just wondering how you guys got your testers, for those who've published to the Play Store previously?

22 Comments
2025/02/01
03:36 UTC

Back To Top