Dear Redditors and coders! I am here working for our possible start-up. I am using Expo, React Native + Clerk.

Furthermore, I just want to add a phone number, that has been verified in the previous screen.

For some reason I'm not entering the IF() because I think that there is no user.id. Also, I couldn't find the way to add a breakpoint for debugging purposes...

Is there an easier way to just add the phone number of a user in Clerk? Thank you for your time.

console.log("SOON ENTERING SIGN_UP");
if (signUp && user?.id) {
  console.log("There is a new sign-up and also ID!!!!!!!!!!!!!!!!!!!!!!!")
  await user.createPhoneNumber({phoneNumber: "+40770130136"});
}

Hi everyone! 👋

I’m working on a feature in my React Native app where I want to create an instant response for a button press. When a user presses the button, I want the action to appear completed immediately on the client side, without waiting for a response from the backend.

For example, if the button toggles a "like" or "bookmark" state, I’d like the UI to update instantly so users don’t experience any delay, even if the backend call takes a few seconds or fails temporarily. I plan to handle the actual backend update in the background, so it’s not visible to the user.

I’m considering options like optimistic UI updates and queueing failed requests to retry them later. Has anyone implemented a similar feature or has recommendations for the best approach? Also, any advice on managing potential conflicts if the backend eventually returns an error would be super helpful!

Thanks in advance for any insights or examples! 😊

Does it require paid developer account for push notifications in ios or we can do it for free? In expo

Hi! I have been looking for a way to do auth for my react native app. I am considering using omniauth ( fb, google, apple ) for account creation and use devise_api for jwt management. Has anyone done this before and is there resources to guide me? I’m not looking for supabase or firestore because I don’t like the process of writing queries on the front end.

https://preview.redd.it/1zufosjfhzzd1.png?width=284&format=png&auto=webp&s=81c4033239f20a18d1fd2b1c8844c082d0191cc9

This is my app.I want to remove this white part at the top and bottom of the screen. How do I do this?
link repository: https://github.com/MarcosOki/RanckerApp

Hi, i'm facing a wall with image picker expo, whenever I let user pick an image for the first time android native permission is poping up normaly.

But when using camera, it pops a permission like this:

My app needs your permissions for accessing camera.
You've already granted permission to an other Experience. allow my app to also use it?

I try to edit the message in app.json in vain.

        "expo-image-picker",
        {
          "photosPermission": "Edited text",
          "cameraPermission": "Edited text"
        }

Hi. i hope you doing well

so my question is
my react native version is 0.70.6. I need this package but on their website the requirement is
Version compatibility:
react-native@>=0.71 and react@>=18 are required.
In addition you should make sure you're on at least iOS 13 and Android API level 16 or above.
To use React Native Skia with the new architecture, react-native@>=0.72 is required.
To use React Native Skia with video support, Android API level 26 or above is required.

is there any way to install this package for my app? thanks in advance

this my Web View in React Native:

<WebView
injectedJavaScriptBeforeContentLoaded={injectedJs}
startInLoadingState={true}
ref={webViewRef}
onTouchStart={() => setScrollEnabled(false)}
onTouchEnd={() => setScrollEnabled(true)}
className="w-96 h-96 my-2.5"
scalesPageToFit={true}
originWhitelist={['https://google.com']}
onMessage={handleOnMessage}
source={{uri: 'https://google.com'}}
/>

When I open the screen where this Web View is, it automatically redirects my to my default mobile browser and opens google.com. Even when I make scalesPageToFit to false.

But I want to stay in the app and only render the Web View with specific size in my screen.

When I use local site (like localhost:5173), it works fine but when I define source={{ uri: ...}} to be an actual website, it always redirects me.

Why is this happening?

I have React Native Web View version 13.8.6, React Native version 0.74.5 and Expo version 51.0.38.

Thank you for your help.

Hey everyone,

Me and /u/AffectMany64 are super excited to announce that Oppfy is now ready for preorder on the App Store! Over the past three months, my co-founder and I (both 20, studying at Queen's University in Canada) have been working on this project while managing our studies, and we’re finally getting ready to launch it!

Oppfy is a fresh take on social media where others post for you. It’s a fun way to share your experiences without the pressure of posting yourself. With Oppfy, you can let others post on your behalf and still grow your community in an authentic way.

What you can expect:

📸 Others can post for you
💬 Share moments without managing your own feed
✨ A simple, fun way to engage with your community

Technical stack:

• React Native Expo
• Next.js
• tRPC
• Tamagui
• Firebase
• AWS
• MUX
• Sentry
• Turborepo

We’re so excited to see what’s ahead! Oppfy is currently available for preorder on the App Store, and we’ll be launching the Android version soon after.

If you’d like to be part of the beta testing, we’d love to have you! Join our Discord server and be among the first to try out the app and share your feedback.

Thanks for all the support! 🙌

https://preview.redd.it/lv8aegsmpyzd1.png?width=1886&format=png&auto=webp&s=9dbe9abee80a2e90aad14bba2e5c08df08b45b56

Hi everyone,

I’m currently working on a React Native project and encountering an issue related to the react-native-gesture-handler. Here are the specifics:

Project Details:

• React Native version: [ 0.76.1]

• Key package involved: react-native-gesture-handler

Issue:

When running my app, I’m getting a red screen error indicating problems with react-native-gesture-handler. I have done the following steps:

1. Installed react-native-gesture-handler via npm install.

2. I Imported it correctly at the top of my entry file index.js.

3. Confirmed that the module exists in node_modules.

Despite this, the app still shows errors related to missing or improperly configured gesture handlers.

What I’ve Tried:

• Rebuilt the app and cleared caches.

• Verified the import of react-native-gesture-handler before any other code in my app.

• Ran npm ls react-native-gesture-handler to check the version and installation.

Error Details:

https://preview.redd.it/z70klg984yzd1.png?width=407&format=png&auto=webp&s=65cbbcef7183d5036f4bf35effe1510dc276745f

If anyone has experience resolving issues with react-native-gesture-handler or knows any configuration steps I might be missing, your help would be greatly appreciated. Thank you!

I currently do both React and React Native for the company I work for, full stack(ish).

If I were to find a new job, would I generally be paid more if I specialized in React or React Native?

Hi everyone, i recently came across the need of having the same header on multiple screens of my stack navigator, but using the header prop of the Stack.Navigator it actually gets replicated for every other screen (meaning that the whole screen I'm navigating to replaces the previous one as you would expect whit a stack). How can I make the header fixed? I already tried putting it outside of the stack, but then I have to use the navigation ref in order to access navigation state, and that's not reactive hence I can't have, for example, route name related logic. One workaround I've found is to put a listener on the state event of the navigator, and every time it triggers a route name change I save it to my local state, which gets passed via prop to the header, but it feels hacky. Since it looks like a pretty standard feature, is there a cleaner way of doing this? Thanks in advance!

I'm encountering an issue with a React Native project after upgrading to versions 0.76.0 and 0.76.1. Following the official documentation to create a Turbo Module, the app builds successfully but crashes on launch with the following error:

EarlyJsError: TurboModuleRegistry.getEnforcing(...) [module name] could not be found. Verify that a module by this name is registered in the native binary.

Details:

https://preview.redd.it/dwc0e759cxzd1.png?width=716&format=png&auto=webp&s=2da159bda88216b3c64e53e40e4fd3ca465b0a12

• Platform: Windows 11
• Device: Realme 11 Pro 5G running Android 14
• Development Mode: Enabled

Steps Taken:

1. Cloned the repository: git clone https://github.com/CodeWithBlaze/TurboModuleExampleWithError
2. Installed dependencies: npm install
3. Built the project: npm run android

Despite these steps, the app crashes with the aforementioned error. I did same with yarn, it didn't worked too.

Troubleshooting Attempts:

• Ensured the project directory is excluded from Windows Defender.
• Verified that the Turbo Module is correctly registered in the native binary.

Request for Assistance:

Has anyone encountered a similar issue with Turbo Modules in React Native 0.76.x? Any insights or solutions would be greatly appreciated.

What is your go to…

I built an app called Akas, a micro-podcasting app. Thanks to React Native, I was able to build it within a few weeks. With Akas, you can record and share short voice clips (up to 10 minutes) with friends or the public. Others can reply with their own voice messages. Since it’s currently invite-only, I’d love for you to test it out.

App store: https://apps.apple.com/us/app/akas-a-micropodcasting-app/id6736629682Play store: https://play.google.com/store/apps/details?id=com.bigyankarki.akas&pcampaignid=web_share
Site link: https://akashq.com
Invitation code: BVN55L

I'm working on a React Native C++ Turbo Module, and I'm trying to use std::cout to print logs for debugging purposes. However, the logs from std::cout are not showing I'm unable to find any of my output in the console when I run my React Native app on an Android device.

#include "NativeSampleModule.h"
#include

namespace facebook::react {

NativeSampleModule::NativeSampleModule(std::shared_ptr jsInvoker)
: NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}

std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
std::cout << "Input string: " << input << std::endl;

return input;

}

void NativeSampleModule::getRms(jsi::Runtime& rt) {
std::cout << "getRms method called!" << std::endl;
}

} // namespace facebook::react

Hey, I am new here. Anyone in need of react native dev?

Currently I have a scrollview and a list of componentRefs which store the value of placement on the screen of each component.

And on onScroll, i do componentRefs.map((component) => { Extract x and y from event and do calculation that whether the component is in the viewport })

Now, i have a throttle of 16, so 60 events per sec, which means 60 times the computation is gonna happen, this is nuts.

This method was great before, but now the lag is visible.

I was doing this for impression tracking, so is there any other idea?

How much time will it take to get hands on react native. What to learn after this to launch full app

Hi guys, I'm new here and I've been seeing nice posts lately.

I'm a backend engineer, I've decided to go into mobile development and I've choose to use react native but I'm having issues with what kinda styling to use.

I did a research on nativebase and liked it but now they've moved to gluestack, it's more like the default styling is the best but I would have to create all components from the ground up.

Just a newbie here that needs guidance. What do you use best? Thanks.

The fade animation that happens within tabs.

Please note that the tabs are actually just a custom Layout for various reasons (a horizontal scrollview with Text below an Icon).

https://i.redd.it/y5isq3mzluzd1.gif

Hi everyone!

Looking for advice on the best paid AI tool to complete Full stack projects.

Need recommendations on which tool offers the best balance of coding support and learning opportunities like GitHub Copilot, Cloud 3.5 SONNET, BoltAI, or ChatGPT’s pro version?

Has anyone here used any similar tools for similar projects? Any recommendations on which would be worth a subscription for a short-term project or longterm ?

Hey everyone! I'm trying to implement HomeScreen widgets in my Expo React Native app and looking for the best current solution. I've been researching different approaches but finding mixed information about what works reliably with Expo.

What I'm trying to achieve:

• Create basic HomeScreen widgets for iOS and Android
• Preferably maintain Expo managed workflow if possible
• Need to update widget data periodically
• Keep widget configuration in sync with the main app

1. What's the current best practice for implementing widgets while using Expo?
2. Are there any working examples/repos showing widget implementation with Expo?

Would really appreciate any guidance, especially if anyone has a working example repo they could share. Trying to avoid common pitfalls and follow best practices.

Can iOS keyboard stickers (NOT Emojis) be used via TextInput? Is there a custom component that allows it?

I've just launched my new Expense Tracker App for Android. Keep track of your finances easily and efficiently. Download: https://play.google.com/store/apps/details?id=com.erwinagpasa.expensetracker

https://preview.redd.it/1l9t42djtszd1.jpg?width=2083&format=pjpg&auto=webp&s=15b561966174a6412e6af9b7c24c4ca5af7e4c73

Hey y’all, think I’m losing my mind here lol.

I have a website I’ve made in NextJS/Prisma/PgSQL. Slowly migrating the backend to NestJS to handle the app version but I’m struggling to understand how auth should work here. I am using Keycloak as my identity provider and I am generating a custom JWT token from the keycloak access token and passing both the refresh token and custom access token to the user. Now where I’m struggling to understand is how the refresh token works.

From my understanding and what I’ve seen in countless threads is that you’re supposed to send the access token to your backend and your server will verify if it’s invalid or not. If it’s not valid the user gets a 401 and uses the refresh token to get a new access token. Great, but is that really the solution? And does that mean for EVERY API request you have to send the token else refresh the token?

Because then that’s two transactions happening per API which I feel like would add up quickly if your access token is short lived. Is there a better way to handle sessions, similar to how NextAuth uses sessions?

Any insight or resources would be greatly appreciated

I am trying to make a simple app, but I cannot test it on my REAL phone in the Expo app, anytime I go to check it out the app freezes after about 3-4 seconds. I've made a completely new project once and followed a tutorial that is just a couple months old, hoping it's not outdated yet, but still the same problem.

Does anyone know what my problem could be? My phone I am trying to do this on is a Samsung Z Fold 3.

I have tried finding solutions online, but AFAIK I cannot find anyone with the same problem.

Hey everyone,

I'm building a app that could growth in time and I'm wondering which architecture I could use, I'm hesitating in clean archi (hexagonal/onion) and vertical slice archi

My main question is about my backend, I would like to use supabase, and I'm wondering how I could structures my folders :

For example, imagine a task app :

I've my application folder with my use cases domain with my repo and validator and for my infrastructure, is that a good idea to implement here my supabase request that communicate with my domain repo (taskRepositorySupabase)

/src
├── /modules
│ └── /tasks
│     ├── /application
│     │ ├── createTaskUseCase.ts
│     | └── updateTaskUseCase.ts
│     ├── /domain
│     │ ├── taskTypes.ts
│     | ├── taskRepository.ts
│     | └── taskValidator.ts
│     ├── /infrastructure
│     │ ├── taskRepositorySupabase.ts
│     │ └── supabaseClient.ts
|     | └── taskMappers.ts

imo that not a good practice to repeat "Repository", should I use my taskRepository as a service ?
something like :

/src
├── /modules
│ └── /tasks
│     ├── /application
│     │ ├── taskService.ts
│     │ ├── createTaskUseCase.ts
│     | └── updateTaskUseCase.ts
│     ├── /domain
│     │ ├── task.ts
│     | ├── taskRepository.ts
│     | └── taskValidator.ts
│     ├── /infrastructure
│     │ ├── taskRepositorySupabase.ts
│     │ └── supabaseClient.ts

where taskRepository.ts could be like :

// /modules/tasks/domain/taskRepository.ts

export interface TaskRepository {

  createTask(task: Task): Promise<Task>;

  getTaskById(taskId: string): Promise<Task | null>;

  getAllTasks(): Promise<Task\[\]>;

  updateTask(task: Task): Promise<Task>;

  deleteTask(taskId: string): Promise<void>;

}  

taskRepositorySupabase like :

// /modules/tasks/infrastructure/taskRepositorySupabase.ts

import { TaskRepository } from "../domain/taskRepository";
import { Task } from "../domain/task";

export class TaskRepositorySupabase implements TaskRepository {
  private supabaseClient: any;

  constructor(supabaseClient: any) {
    this.supabaseClient = supabaseClient;
  }

  async createTask(task: Task): Promise<Task> {
    const { data, error } = await this.supabaseClient
      .from('tasks')
      .insert([task])
      .single();
    if (error) throw new Error(error.message);
    return data as Task;
  }

  async getTaskById(taskId: string): Promise<Task | null> {
    const { data, error } = await this.supabaseClient
      .from('tasks')
      .select('*')
      .eq('id', taskId)
      .single();
    if (error) throw new Error(error.message);
    return data ? (data as Task) : null;
  }

  async getAllTasks(): Promise<Task[]> {
    const { data, error } = await this.supabaseClient
      .from('tasks')
      .select('*');
    if (error) throw new Error(error.message);
    return data as Task[];
  }

  async updateTask(task: Task): Promise<Task> {
    const { data, error } = await this.supabaseClient
      .from('tasks')
      .update(task)
      .eq('id', task.id)
      .single();
    if (error) throw new Error(error.message);
    return data as Task;
  }

  async deleteTask(taskId: string): Promise<void> {
    const { error } = await this.supabaseClient
      .from('tasks')
      .delete()
      .eq('id', taskId);
    if (error) throw new Error(error.message);
  }
}

and my service like :

// /modules/tasks/application/taskService.ts

import { TaskRepository } from "../domain/taskRepository";
import { Task } from "../domain/task";

export class TaskService {
  private taskRepo: TaskRepository;

  constructor(taskRepo: TaskRepository) {
    this.taskRepo = taskRepo;
  }

  async createTask(task: Task): Promise<Task> {
    return this.taskRepo.createTask(task);
  }

  async getAllTasks(): Promise<Task[]> {
    return this.taskRepo.getAllTasks();
  }

  async updateTask(task: Task): Promise<Task> {
    return this.taskRepo.updateTask(task);
  }

  async deleteTask(taskId: string): Promise<void> {
    return this.taskRepo.deleteTask(taskId);
  }
}

Thank for your help !