/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

133,548 Subscribers

1

setBackgroundMessageHandler in react native firebase messaging

I have one app for which I upgraded react-native from 0.67.x to 0.75.x and for some reason setBackgroundMessageHandler method from firebase. [https://rnfirebase.io/messaging/usage#message-handlers\](https://rnfirebase.io/messaging/usage#message-handlers) has stopped working. How can I fix this? It's working perfectly for Android but causing issues on iOS. I have all the parameters added in my notification sending service

0 Comments
2024/09/14
10:32 UTC

1

unable to select the content outside of a model in react native

I'm developing a React Native app where I use a search bar to perform queries and display the results in a modal that opens directly below the search bar. The workflow I'm aiming for is as follows:

  1. The user enters a query in the search bar.
  2. When the user submits the query, a modal opens below the search bar, showing the search results.
  3. The user should be able to interact with the search results in the modal or modify their search query in the search bar.

Problem:

Once the modal opens, I'm unable to click back into the search bar to edit or modify the search query. The modal appears to block interaction with the search bar, and touch events are not registered. Currently, the only way to edit the search query is to close the modal, make the changes in the search bar, and then re-open the modal by performing a new search.

Current Behavior:

  • After submitting a search, the modal opens correctly below the search bar, displaying the search results.
  • However, the modal seems to block interaction with the search bar.
  • To update the query, I have to close the modal, update the search query, and search again—reopening the modal each time.

Expected Behavior:

  • I want the search bar to remain fully interactive while the modal is open so that users can adjust the search query without closing the modal.
  • The modal should display the updated search results dynamically without requiring the user to close and reopen it.
0 Comments
2024/09/14
09:07 UTC

3

setting up a react native app FASTER

HI everyone!. Wondering if there's an easier and faster way to setup react native apps faster and easier. Just like vite for react js on web because this takes ages
npx create-expo-app@latest

Thanks in advance!! :D

6 Comments
2024/09/14
06:14 UTC

3

Does EAS Update stop people from reverting to the old version?

I have a subscription in my unreleased app. I want to run an initial testing phase for 100 people where the subscription is free/not enforced. After that i will enforce the subscription. If everything is done locally and i don't have a server, how can i prevent people from reverting the apk to get the free subscription features? Is EAS update enough?

6 Comments
2024/09/14
06:13 UTC

0

SUGGEST ME IDEA.

Hey guys currently I am free and want to build some app and I can't come up with app idea but I think I figured out app name. 'Dad's money'

Give me shitty idea for this title and I will work on the most shitty idea.( Or we can build together if you want ).

Also I am ok with any garbage idea.

3 Comments
2024/09/14
01:47 UTC

11

I built an AI-powered app to simplify grocery shopping with React Native

I'm excited to share my latest project with you all: ShopEasy: Grocery Lists. It's an app designed to make grocery shopping easier and more efficient.

https://preview.redd.it/wvfbv7bv4ood1.jpg?width=2018&format=pjpg&auto=webp&s=f5f2077e43f8fedbc611e01725b1b3825a8f852c

What is ShopEasy?

ShopEasy is a clean, minimalist app that helps you create and manage your grocery lists. But it's more than just a list app - it uses AI to suggest items based on your shopping habits, tracks prices, and even reminds you when it's time to shop.

Key Features:

  • AI-powered item suggestions
  • Reusable shopping lists for recurring purchases
  • Real-time price tracking and total calculation
  • Customizable shopping reminders
  • Offline functionality
  • Dark and light mode
  • Price history tracking (coming soon)

Why I Built It:

As someone who always struggled with grocery shopping (forgetting items, overspending, etc.), I wanted to create a tool that would solve these common problems. After weeks of development and testing, ShopEasy was born.

Tech Stack:

  • React Native
  • OpenAI API
  • AppWrite

What's Next:

I'm constantly working on improving ShopEasy based on user feedback. Some features I'm considering for future updates include:

  • Android App
  • Collaborative lists for households
  • Backup data

I'd Love Your Feedback:

If you're interested in trying out ShopEasy, you can download it https://apps.apple.com/app/shopeasy-grocery-lists/id6557038642. I'm especially interested in hearing your thoughts on the app and any features you think would make the app even more useful.

Thanks for checking out my project! Let me know if you have any questions - I'm happy to discuss the development process, challenges faced, or anything else about ShopEasy.

4 Comments
2024/09/14
00:22 UTC

1

Google Play 20 Tester

Can someone help me with this 20 testers on google play? Or how about we form a small community and test each other's apps?

1 Comment
2024/09/13
22:58 UTC

2

Working Rich Text Editor for RNW

Hi everyone! Does anybody have a working rich text editor for react native for windows? I tried several but the existing once are not compatible with windows projects. Any tipps where to look?

2 Comments
2024/09/13
20:04 UTC

61

My first react native app

I am 49 y/o and just finished my first react native project. I have never developed a mobile app before and rather enjoyed how fast and easily you can develop screens once you get into a groove. For my first app, I wanted to keep it simple and get some experience with mobile development and publishing to the app store.

The app is a matching application for home professionals and home owners. Think Hinge meets Angies List. I do not think it will get many downloads but learned lot from working on it and am ready to move onto something more sophisticated.

I am not great at UI and am trying to improve. So if anyone can check it out and give me some feedback, I would appreciate it. https://apps.apple.com/us/app/wepa/id6587574494

And yes I know my Icon is trash. I underestimated how difficult making an icon is.

14 Comments
2024/09/13
18:00 UTC

2

Good App Development Podcasts

I need a podcast to listen to (ideally on Spotify) relating to either app development or app marketing etc. Ideally, would be 15 mins+ as that is my cycle to work and otherwise I have to stop midway. Anything relating specifically to Expo/RN would be great

1 Comment
2024/09/13
17:33 UTC

0

Expo is standard going forward?

Newbie transitioning to app development. Setup node and other requirements just now and started watching few YouTube tutorials.

One thing instantly hit is that in latest version there is no cli setup as they show in tutorials. I went to recent queries like expo vs cli to get a gist and mostly its about what is preferred when (like beginners etc)

It looks like there is only expo going forward thats why we dont see any cli run instructions on 0.75 version? Its just literally stops at node, simulator and cocoapods installation thats it.

So if i am correct its just better to focus on expo documentation and build apps and actually publish them without any issues?

I just dont want to shuffle and straight away build my app idea and publish it to the store if possible as a part of my end to end learning experience. And this including not to shift between these in future as well if it means sticking to cli is better can u share the documentation for setting up cli if possible lastest one as 0.75 version doesnt have it?

25 Comments
2024/09/13
17:33 UTC

2

Why is the JS debugger automatically clearing all the logs (when I try it with iOS, the logs don’t even appear for a second)

"expo": "~51.0.28"

"react-native": "0.74.5",

4 Comments
2024/09/13
17:21 UTC

0

Don't be a Chain-Frameworker.

I don't know why people use expo, One Framework is enough, don't use Framework to use Framework.

19 Comments
2024/09/13
17:18 UTC

3

offline apps, how do you handle displaying images?

I have a searchable database with 500+ items that are available offline. However, that also means 500+ images.

These images are stored in buckets which need a network connection to download from.

What are best practices around handling this many assets so they're viewable offline?

  • Is there an image format that is preferred?
  • Should I add a backgroundFetch that loops through all the images and downloads them from bucket and then stores them as base64 or Blob?
  • Should I worry about device storage?
7 Comments
2024/09/13
16:13 UTC

3

React Native and iOS/android leaderboards

Hello!

Does anyone have experience enabling apple gamekit/gamecenter and google play services with a react native project? I'm trying to create a very simple leaderboard and maybe achievements for my app, but finding information or tutorials regarding this is unfortunately very limited or non existent.

All I would need for now is an online leaderboard with names and scores which could be easily reset. I'm interested in apple and google offerings because right now I can't really afford any server costs.

Our trivia game can be found on supersmart.fi if someone is interested.

0 Comments
2024/09/13
16:00 UTC

0

Putting boundaries on directional scrolls within a scroll view

Hi! Currently at my company we have a react native app. We recently added a custom pull down refresh animation into our app and I’ve hit a little snag. At the top of the page we have a horizontal card scroll. When scrolling diagonally the app seems to get tripped up on with scroll view to activate (the refresh vertical scroll or the horizontal card scroll)

I’m having trouble finding any solutions. What I’d like to do is put a boundary where if they’re between 90 and 135 degrees, it would scroll the card scroll. If they’re scrolling between 135 degrees and 180 degrees it would scroll the refresh banner.

I’ve attached a visual example of what I’m thinking as well. Scroll within green area = trigger vertical scroll, scroll within blue area = trigger horizontal scroll.

Any suggestions on how to accomplish this?

2 Comments
2024/09/13
14:26 UTC

2

Show Your Work Thread

Did you make something using React Native and do you want to show it off, gather opinions or start a discussion about your work? Please post a comment in this thread.

If you have specific questions about bugs or improvements in your work, you are allowed to create a separate post. If you are unsure, please contact u/xrpinsider.

New comments appear on top and this thread is refreshed on a weekly bases.

0 Comments
2024/09/13
13:50 UTC

1

General Help Thread

If you have a question about React Native, a small error in your application or if you want to gather opinions about a small topic, please use this thread.

If you have a bigger question, one that requires a lot of code for example, please feel free to create a separate post. If you are unsure, please contact u/xrpinsider.

New comments appear on top and this thread is refreshed on a weekly bases.

1 Comment
2024/09/13
13:45 UTC

2

Reanimate animation not working when navigating

Hey guys I have bar chart height animation which goes from 0 to some height. But that only works I change some value in the data but not when navigating. I am using router with stack screen.

import { Text, View } from 'react-native'; import Animated, { useAnimatedStyle, withTiming, } from 'react-native-reanimated';

export type Day = { day: string; value: number; // 0 - 1 };

type SingleBarChartProps = { maxHeight: number; width: number; day: Day; };

export const SingleBarChart = ({ maxHeight, width, day, }: SingleBarChartProps) => {

const rStyle = useAnimatedStyle(() => { return { height: withTiming(maxHeight * day.value), opacity: withTiming(day.value), }; }, [day.value, maxHeight]);

return ( <View> <Animated.View style={[ { width: width, backgroundColor: 'white', borderRadius: 15, borderCurve: 'continuous', }, rStyle, ]} /> <Text style={{ width: width, textAlign: 'center', fontSize: 12, marginTop: 5, color: 'white', fontFamily: 'FiraCode-Regular', textTransform: 'lowercase', }} > JAN </Text> </View> ); };

3 Comments
2024/09/13
10:11 UTC

12

Isn't asking to start with Expo instead of native cli like saking to start with Next.js before learning React ?

So, I'm very new to react native but have quite some experience with React and Next.js. Every where I see, it is recommneded to use some sort of framework. Even on the react native documentation. What I wanted to ask was isn't starting React Native with Expo like starting React with Next.js ? And my approach is, I'd never recommend someone start out with Next. Because I think learning the core is very important. For example, simply setting up a router you'll learn a lot which you don't have to do in Next.js. You can avoid manually caching data because fetch does it for you on next.js automatically. That way you never learn to manually cache data.

With that being my belief on the web side of things, what do you guys recommend ? start out with expo or native cli ?

34 Comments
2024/09/13
09:51 UTC

1

Is there a way to web scrape in a React Native App without a server?

Note that I want to wait for the page to load (i do it with puppeteer) and then get the html. All in client side.

Please help

18 Comments
2024/09/13
09:41 UTC

1

I have to use "npm i" before "npm start" on a ReactNative project with Expo & VSCode

Hello folks,

I have a newbie question about setting up the dev environment on a MBP M1, using VSCode, Expo and React Native. Any help is appreciated!

MBP M1

Using homebrew (4.3.21)

npm 10.8.2

node 20.17.0 (LTS)

For the initial setup of a project, the server does not run unless I run "npm i" in the VSCode terminal before npm start.

Do you now why this might be?

The steps I am following to setup a project (Macbook Pro M1):

  1. Open terminal at a folder (e.g. the folder MobileDev)

  2. Terminal command: sudo npx create-expo-app@latest TestApp -t

  3. Terminal command: cd

  4. Terminal command: sudo chmod -R 777 MobileDev/ (I do this because otherwise it gives me all kinds of permission errors)

  5. Open VSCode, Open project Folder, Open Terminal in VSCode

  6. Terminal command: npm start (does not give errors, shows the QR code and says web is waiting on http://localhost:8081, but the website & Expo Go app says no connection)

  7. Terminal command: npm i (log says "added 1 package, and audited 1600 packages in 1s")

  8. npm start (everything works).

So why should I type "npm i" in VSCode so that everything works normally? Do you have any idea?

13 Comments
2024/09/13
08:24 UTC

2

Seeking API Recommendations for Legal and Content Moderation of Text and Images for my App

Hey guys,

I'm building an app where users can post content with both text and images. I need an API that can check for inappropriate or illegal content like offensive language, hate speech, violence, pornography, etc., before a post goes live.

I’ve looked at Google Cloud Vision, Azure Content Moderator, and Amazon Rekognition, but I’m not sure which one is best for both text and images. Also, do I really need this level of moderation for an early-stage app, or should I wait until it grows? Do I really need to pay for these services upfront, or are there good free options I can use for now?

Any recommendations or experiences with these or other services?

Thanks!

5 Comments
2024/09/13
08:16 UTC

1

Prevent re-renders on text inputs when used inside a JS based modal.

Hi there, I was wondering as to how to prevent unwarranted re-renders when I use text inputs inside a JS based modal. So my modal is based on https://github.com/AlenToma/react-native-js-only-modal The way this modal works is by updating props whenever there is change in the children component. Now the issue is that when I have input inside this component, its causing lots of re-render to the children as value props changes. How can I prevent re-render in this scenario. I already tried memoizing the component but it did not work. Any help would be awesome. The reason I am using this JS based modal is because I want to show a toolbar above keyboard that allows form navigation, when I display the toolbar using the native modal, the toolbar buttons can't be clicked. Thus, motivating me to go through the route of JS modals. Let me know if any specific piece of code would be of any interest.

4 Comments
2024/09/13
07:03 UTC

1

How to sync data with iCloud externally so that users can see their data in Files folder?

Does anyone know how? All the libraries I tried only allow creating internal files where is only accessible for the app.

3 Comments
2024/09/13
04:08 UTC

6

I'm making an ai stock trading app where the user can only buy and sell. Any Critiques?

6 Comments
2024/09/13
03:26 UTC

1

Asset app not able to access location data

Hi All, Apologies if this the wrong place to ask this question.

At my company we have an react native app which is used for asset auditing. Users select sites / equipment n a map and then take photos or select images from the photo gallery of equipment before and after doing work. We use the location in the photos to correctly associate images to the asset / job. Sometime recently the uploaded images do not contain the latitude and longitude. The app requests access to locations services, and the camera and photos. We have checked the app has permissions

Location Services is enabled

Camera -> while using the apps

Photo Library -> Allow Full Access

Privacy setting appear correct for Camera and Photo Library

Removed app, reinstalled etc

The issue inconsistent. On some phones images selected from the Photo Library are uploaded with location data and other phones not. Although settings appear same. Photos taken with the app don't upload with location data.

I presume this a permission thing, but running out of settings to check.

0 Comments
2024/09/13
00:01 UTC

8

How much does unnecessary array wrapping your styles slow down your app?

eg. If I have a TON of:
<View style={[styles.viewStyle]} />

as opposed to:

<View style={styles.viewStyle} />

Is there much benefit to getting rid of the unnecessary arrays? Like say I have hundreds of these elements on a page? Thousands?

6 Comments
2024/09/12
20:44 UTC

71

The app store waited 5 reviews to tell me I need to redesign my whole RN app

I've been working on the app for almost a year. If the app store thought it was unoriginal it would have been nice if they told me that when they saw it a few months ago :(

https://preview.redd.it/24eplig8wfod1.png?width=1784&format=png&auto=webp&s=1bb453b65c69e255831d3fa64efebee33496d885

59 Comments
2024/09/12
20:39 UTC

Back To Top