/r/reactnative
A community for learning and developing native mobile applications using React Native by Facebook.
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!
Getting Started w/React Native
irc.freenode.net #reactnative
Keywords: ios, android, mobile, apps, apple, iphone, ipad
/r/reactnative
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
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:
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.
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
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?
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.
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.
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.
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.
I'm constantly working on improving ShopEasy based on user feedback. Some features I'm considering for future updates include:
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.
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?
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?
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.
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
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?
"expo": "~51.0.28"
"react-native": "0.74.5",
I don't know why people use expo, One Framework is enough, don't use Framework to use Framework.
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?
base64
or Blob
?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.
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?
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.
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.
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> ); };
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 ?
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
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):
Open terminal at a folder (e.g. the folder MobileDev)
Terminal command: sudo npx create-expo-app@latest TestApp -t
Terminal command: cd
Terminal command: sudo chmod -R 777 MobileDev/ (I do this because otherwise it gives me all kinds of permission errors)
Open VSCode, Open project Folder, Open Terminal in VSCode
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)
Terminal command: npm i (log says "added 1 package, and audited 1600 packages in 1s")
npm start (everything works).
So why should I type "npm i" in VSCode so that everything works normally? Do you have any idea?
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!
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.
Does anyone know how? All the libraries I tried only allow creating internal files where is only accessible for the app.
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.
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?
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 :(