/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'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
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.
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.
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
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
my androidmanifest.xml
code
Config google cloud console
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?
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?
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?
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.
How to import this Package in Swift File Unable to get any as of now
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.
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.)
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.
Here is a link: https://gitstashapply.medium.com/running-deepseek-r1-distilled-model-locally-on-the-mobile-device-using-react-native-and-llama-rn-3848e56c6c0b
Very interested on your feedback :)
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🥺.
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.
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
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;
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())
}
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')
implementation project(':@react-native-camera-roll_camera-roll')
<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" />
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
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.
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
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!
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 )
Or do you just display the components of the screen differently depending on if it’s on web or iOS for example?
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.
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.
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
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?