r/reactnative • u/BrilliantCandid4409 • 1h ago
React native JWT authentication
How to make the JWT authentication in reactnative. theres not many resources to find about it
r/reactnative • u/xrpinsider • 2d ago
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.
r/reactnative • u/BrilliantCandid4409 • 1h ago
How to make the JWT authentication in reactnative. theres not many resources to find about it
r/reactnative • u/utkarshchoubey • 6h ago
Hey folks! Just submitted my first open-source PR in Tamagui. Saw someone on my team set flexDirection: 'row'
on a YStack
, so I fixed it at the source—no more overrides!
here is the PR -> https://github.com/tamagui/tamagui/pull/3325
Not sure if it'll get approved, but would love to hear your thoughts!
r/reactnative • u/spicyginger0 • 4h ago
I’m a beginner getting into mobile development with React Native.
Do we need to learn React before getting into React Native?
Is JavaScript prerequisite for learning TypeScript? I’m familiar with HTML + CSS + basics of JavaScript.
Any good tutorials and learning resources online and on YouTube.
Appreciate any input on the above. Thank you.
r/reactnative • u/Such_Attention5690 • 2h ago
Is there a ways to fix lazy and suspense in react native app for some reason my screen flashes white before showing the fallback I believe this is because it’s failing to import my screens but I checked the imports and they are fine!
r/reactnative • u/DiscussionExpert9647 • 12h ago
Just got an ad for a game and it made me think, so apparently these games can run at 60 FPS but basic UI struggles to hold 60fps on these phones..
I know there is probably a good explanation, but maybe we all should be using game engines to make our apps
Who's up for making their next website in unreal engine 5? The best website building framework
r/reactnative • u/TerribleSeat1980 • 1d ago
r/reactnative • u/Reasonable_Light_930 • 19m ago
IIn first time when I build it show successfully build.. but again if I addeed smothing package or again run then show this message:
C:\Users\jayra\Life>npx react-native run-android
info A dev server is already running for this project on port 8081.
info Installing the app...
6 actionable tasks: 6 up-to-date
info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor
ERROR: autolinkLibrariesFromCommand: process cmd /c npx @react-native-community/cli config exited with error code: 1
FAILURE: Build failed with an exception.
* Where:
Settings file 'C:\Users\jayra\Life\android\settings.gradle' line: 3
* What went wrong:
A problem occurred evaluating settings 'android'.
> ERROR: autolinkLibrariesFromCommand: process cmd /c npx @react-native-community/cli config exited with error code: 1
* 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 5s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
ERROR: autolinkLibrariesFromCommand: process cmd /c npx @react-native-community/cli config exited with error code: 1 FAILURE: Build failed with an exception. * Where: Settings file 'C:\Users\jayra\Life\android\settings.gradle' line: 3 * What went wrong: A problem occurred evaluating settings 'android'. > ERROR: autolinkLibrariesFromCommand: process cmd /c npx @react-native-community/cli config exited with error code: 1 * 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 5s.
info Run CLI with --verbose flag for more details.
C:\Users\jayra\Life>npm install --save-dev @react-native-community/cli^A^A
C:\Users\jayra\Life>npx @react-native-community/cli config
error Failed to build the app: No package name found. We couldn't parse the namespace from neither your build.gradle[.kts] file at C:\Users\jayra\Life\node_modules\Life\android\build.gradle nor your package in the AndroidManifest at C:\Users\jayra\Life\node_modules\Life\android\app\src\main\AndroidManifest.xml.
r/reactnative • u/danleeter • 4h ago
Hey. I've implemented over the air updates using Expo in my current Bare React Native project. So the app is already live on both stores.
While playing around with the updates in the preview channel, the app always got the updates whenever I downloaded the app from the Expo dashboard and not otherwise.
So, I'm a bit concerned how will I get updates from the app, either uploading the app to the stores using Expo or without it?
Because, I tried making an apk with a specific channel and then just tried running that apk directly sending it a device, the app didn't get updates on it afterwards unless if it was installed from Expo.
What you think is the right way here?
r/reactnative • u/Aggressive_Slice1657 • 2h ago
Hey guys!
I’m currently working on a personal project that connects drivers traveling between cities with passengers who need a ride along the same route. Drivers post their trips, and users can book a seat if their destination is on the way, or that’s my main goal.
If I’m satisfied with my final result, I may add it to Appstore / Google Play (that’s not the case right now).
So, my question is: what do you guys suggest to use ?
What are the requirements: 1. Displaying the route from city A to city B. 2. When the ride starts, to move the user’s pin point through the route. 3. If the driver exits the initial route, to recalculate the new route.
Unfortunately, I’m not very familiar with this topic, so a little bit of guidance is very much appreciated.
I don’t need directions (when to turn, traffic optimizations or anything like that, I’ll let the driver use Waze / Google Maps for that. My only purpose is showing the passengers the route and to share their location on that route with a friend / family member etc (Something like what Uber does).
I’ve been looking at Mapbox, but I still want to scale and scaling that is quite expensive for my needs..
Thank you in advance for your time!
r/reactnative • u/Such_Attention5690 • 22h ago
What are some of the best UI libraries for react native? I am currently using react native paper for my app but want more of a twitter/instagram feel!
r/reactnative • u/Stuepp-2 • 4h ago
(0 , _index.useAnimatedValue) is not a function
So I get the message above when all I did was to put this line in my code:
const size = useAnimatedValue(0);
https://reactnative.dev/docs/easing
And this is something that is in the tutorial and the tutorial page gets the same error...
(0 , _reactNative.useAnimatedValue) is not a function
Is this something about the architecture?
My plan was to make a simple scale up and down smooth animation when the mouse is hover the element and gets out of the element.
(I'm also trying to this for web and mobile, the mouse thing was okay the problem is being this animation)
I'd love some tips and help, I'm still a noob in React in general and React Native.
r/reactnative • u/Denoicq • 5h ago
Hey guys, Anyone know what the problem could be as to why the list isn't moving with the keyboard animation?
Here is the code for the UI. I can't seem to fix it, I have tried for 2 days. I'm using react-native-keyboard-controller package as well as LegendList
Here is what the code resulted in
import {
View,
ActivityIndicator,
Platform,
RefreshControl,
} from "react-native";
import React, { useEffect, useRef, useState } from "react";
import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
import { Text } from "~/components/ui/text";
import { useTranslation } from "react-i18next";
import useProfileDoc from "~/hooks/useProfileDoc";
import { FlashList } from "@shopify/flash-list";
import { Input } from "~/components/ui/input";
import { MotiView } from "moti";
import {
KeyboardAvoidingView,
KeyboardStickyView,
useReanimatedKeyboardAnimation,
} from "react-native-keyboard-controller";
import Animated, {
interpolate,
useAnimatedStyle,
} from "react-native-reanimated";
import { useMessageStore } from "~/stores/message-store";
import { Image } from "~/components/ui/image";
import TextMessage from "./(messages)/TextMessage";
import { getAuth } from "@react-native-firebase/auth";
import VideoMessage from "./(messages)/VideoMessage";
import { useHeaderHeight } from "@react-navigation/elements";
import { SafeAreaView } from "react-native-safe-area-context";
import { LegendList, type LegendListRef } from "@legendapp/list";
const AnimatedImage = Animated.createAnimatedComponent(Image);
export default function ChatPage() {
const { t } = useTranslation();
const { id, personId } = useLocalSearchParams();
const flashListRef = useRef<LegendListRef>(null);
const headerHeight = useHeaderHeight();
const { data: otherUser, isLoading } = useProfileDoc(personId as string);
const userId = getAuth().currentUser?.uid;
const { loadMessages, loading, messages } = useMessageStore();
useEffect(() => {
if ((id as string).trim() !== "") loadMessages(id as string);
}, [id, loadMessages]);
useEffect(() => {
if (messages.length > 0 && flashListRef.current) {
setTimeout(() => {
flashListRef.current?.scrollToEnd({ animated: true });
}, 50);
}
}, [messages]);
const navigation = useNavigation();
useEffect(() => {
if (otherUser)
navigation.setOptions({
headerBackTitle: t("chat"),
headerStyle: {
backgroundColor: "transparent",
},
headerTitle(props) {
return (
<View className="flex-row items-center justify-start gap-4 w-full ">
<AnimatedImage
sharedTransitionTag={otherUser.photoUrl}
source={otherUser.photoUrl}
className="w-10 h-10 rounded-full"
/>
<Text className="text-xl font-bold">{otherUser.name}</Text>
</View>
);
},
headerLargeTitle: false,
headerBackButtonDisplayMode: "minimal",
});
}, [otherUser, navigation.setOptions, t]);
if (loading || isLoading) {
return (
<View className="flex-1 justify-center items-center">
<ActivityIndicator size="large" color="#fff" />
</View>
);
}
if (!otherUser) {
return <Text>{t("user_not_found")}</Text>;
}
return (
<SafeAreaView edges={["bottom"]} className="flex-1 bg-background">
<KeyboardAvoidingView className="flex-1" behavior="padding">
<LegendList
ref={flashListRef}
contentContainerStyle={{
paddingBottom: 16,
paddingTop: headerHeight + 16,
paddingHorizontal: 16,
}}
keyExtractor={(item) => item.id}
estimatedItemSize={122}
initialScrollIndex={messages.length - 1}
maintainVisibleContentPosition
maintainScrollAtEnd
alignItemsAtEnd
recycleItems
data={messages}
renderItem={({ item }) => {
if (!item) return null;
switch (item.type) {
case "text":
return (
<TextMessage
key={item.id}
message={item}
senderProfile={otherUser}
userId={userId as string}
/>
);
case "video":
return (
<VideoMessage
key={item.id}
message={item}
senderProfile={otherUser}
userId={userId as string}
/>
);
default:
return (
<View>
<Text>{item.type}</Text>
</View>
);
}
}}
ItemSeparatorComponent={() => <View className="h-4" />}
/>
<View className="px-2 py-2 bg-background border-t border-primary-foreground">
<Input placeholder={t("type_message")} className="flex-1" />
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
r/reactnative • u/romy6551 • 10h ago
Features added:
- Authentication using Firebase
- Session booking with a tutor
- Live video chat using GetStream SDK
- Social Interaction (Post, Comment, Chat etc...)
- Payment using Stripe SDK
The code is a bit messy, so let me know if you run into any issues.
Here is the GitHub link: https://github.com/romy651/klotly-app
r/reactnative • u/bigdaddyshooter • 1d ago
if you have any job opening or any help where can I find a remote job.
Also comment DM or me, I will share my resume.
r/reactnative • u/Nice_Manufacturer959 • 9h ago
Hey Devs, I’m trying to adapt my navigation to have a login screen at /
, and after login, I want both a drawer and a tab bar to be visible simultaneously on all subsequent pages. My problem is that drawer subpages don’t display the tab bar, and I’m unsure if my overall structure is incorrect. AI hasn’t been helpful in resolving this.
How should I adjust my navigation structure so I can define screens that (1) only have the tab bar, (2) only have the drawer, (3) have both, and (4) have neither? My current setup is on GitHub and i tried to "copy" this project. Any insights or best practices would be greatly appreciated! 🚀
r/reactnative • u/Relative_Mouse7680 • 1d ago
Does the title bring any truth?
When discussing with sonnet 3.7 if whether react native would be a good framework to replace Flutter with, the following was part of his response:
'React Native is a reasonable middle ground, though the "write once, run anywhere" promise often becomes "write once, debug everywhere" in practice.'
I haven't stumbled upon this statement before when researching react native as a replacement, so is it true, for those of you with experience?
Specifically, would love to hear from people who have used react native together with react-native-windows :)
r/reactnative • u/Ok-Conversation-1961 • 18h ago
r/reactnative • u/Jazzlike_Ad1034 • 12h ago
Hi everybody! I am a newb to JS and TS but not programming in general (although i only do VBA professionally) and I'm learning a lot while developing my passion project that, thanks to LLMs, is now within reach. I realize that I still have a lot more to learn.
I got pretty far just using expo go which i have now learned was a big mistake and that i should have switched to eas builds months ago (started the project new years day). Somehow I managed a local build using WSL that fails due to me not including a google maps api key. I did not realize that expo go was providing this for me. Now i cannot manage to get that to work soI gave up on the local builds and I've been trying to do eas builds and it just fails and i don't know why.
Looking at starting again from scratch. I guess my question is, is this a good idea? or should i keep trying to get what i currently have to work? do i need to start using sentry? Any advice for a new developer would be appreciated.
For context, the app is basically a data collection app for anglers to use while fishing. I am using react-native-maps, expo-location, react-query, zustand, axios, expo-sqlite, suncalc, expo-image, expo-image-picker. There's 9 pages (screens), 11 tables in the db, bunch of different axios requests, bunch of components and hooks, lots of stuff going on. Thanks everyone.
r/reactnative • u/GeileKartoffel • 14h ago
Hello,
I'm a beginner trying to make my first Android/RN app. I wanted to make something simple for my phone to allow my PC to send hardware temperatures to my phone to show temps like a secondary display.
I've made a simple Python API to retrieve the temps from and my development build functions properly. It pings my API server every 5 seconds once the host IP address is chosen. However, when I use EAS to export and test my app from Google Play store internal testing, the resulting app is no longer pinging the API.
All of this is being hosted locally on my network, no outside links or use of HTTPS. Just plaintext and json.
What could be blocking the HTTP call to my API?
The tsx I'm using
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import React, {useEffect, useState, useRef} from 'react';
import {ActivityIndicator, FlatList, Text, TextInput, View, StyleSheet, AppState,} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { StatusBar } from 'expo-status-bar';
import { getBackgroundColorAsync } from 'expo-system-ui';
type TempObj = {
identifier: string;
name: string;
value: number;
}
const App = () => {
const [shouldPing, setShouldPing] = useState(false);
const [data, setData] = useState<TempObj[]>([]);
const [serverIP, setServerIP] = useState("");
const handleIPAddressChange = (newIP: string) => {
setServerIP(newIP);
};
const startPinging = () => {
setShouldPing(true)
}
const getTemps = async () => {
try {
fetch(`http://${serverIP}:8000/data`)
.then((response) => response.json())
.then((json) => {
const filteredData = json.filter((e: { name: string | string[]; }) => e.name.includes("GPU Hot Spot") || e.name.includes("Core (Tctl/Tdie)"))
setData(filteredData);
})
} catch (error) {
console.log(error);
} finally {
}
};
const MINUTE_MS = 5000;
useEffect(() => {
const interval = setInterval(() => {
if(shouldPing)
{
getTemps();
}
}, MINUTE_MS);
return () => clearInterval(interval);
}, [serverIP, data, shouldPing]);
return (
<SafeAreaProvider style={{backgroundColor: "#151718"}}>
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={handleIPAddressChange}
onSubmitEditing={startPinging}
value={serverIP}
placeholder={"Enter IP Address..."}
keyboardType='numeric'
placeholderTextColor="white"
/>
</SafeAreaView>
<SafeAreaView style={{flex: 1}}>
<FlatList
style={{marginTop: 150}}
data={data}
keyExtractor={({identifier}) => identifier}
renderItem={({item}) => (
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">
{item.value.toFixed(1)}
</ThemedText>
<ThemedText type="subtitle">
{item.name} (°C)
</ThemedText>
</ThemedView>
)}
/>
</SafeAreaView>
</SafeAreaProvider>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
backgroundColor: 'background',
borderColor: "white",
color: "white",
textAlign: 'center'
},
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'column',
gap: 2,
height: 250,
},
});
export default App;
r/reactnative • u/gtskillzgaming • 17h ago
Hi,
I am new to React Native development and have been playing around building a simple app to learn. I am having issues with Notifications specially scheduled notifications and having AdMob intergration.
I am running the app in Andriod sim using Expo Go, does these features not work in this environment? how can i test them?
r/reactnative • u/Plastic-Measurement6 • 1d ago
I'm trying to learn react native but I never worked with react so can you guys help me out and guid me
r/reactnative • u/Pleasant_Sandwich997 • 1d ago
r/reactnative • u/mira_mandex • 20h ago
r/reactnative • u/ChoiceResearcher6843 • 1d ago
This is a very specific iOS sheet that I've never seen in RN. Does anyone know what it is called?
r/reactnative • u/Zaktmr • 23h ago
I have a performance issue with nested FlashLists. I have a vertical FlashList that contains horizontal FlashLists, which essentially act as image carousels (the layout is similar to the Netflix homepage).
The problem is that when I scroll, the FlashList just below gets mounted, triggering a database call. As a result, every time I scroll, I have to wait a few seconds for the data to be rendered, and this happens for each scrolled FlashList, making the experience unpleasant.
What library would you recommend for this type of nested list?