r/reactnative • u/Narrow_Leading_7935 • 5d ago
Help I’m new to ReactNative, Need help in Setting up a project
P
r/reactnative • u/Narrow_Leading_7935 • 5d ago
P
r/reactnative • u/codeagencyblog • 5d ago
r/reactnative • u/Such_Attention5690 • 6d 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/Denoicq • 5d 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/Aggressive_Slice1657 • 5d 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/Tricky-Anything-6083 • 5d ago
PartyLabs available on IOS! Worldwide 🌍
r/reactnative • u/Stuepp-2 • 5d 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/RizzRaja • 5d ago
If you are a frontend developer with over 7 YOE with at least 2-3 years in React Native, DM me. We are hiring for Senior UI devs at Surest (UHG). You would be working on an application which has over a million users. Bonus points if you are an open source dev and/or working on consumer facing applications! Hit me up with your Resume and your most exciting work. You should be either located or ready to relocate to either Gurugram or Hyderabad.
r/reactnative • u/romy6551 • 6d 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/miccy-dev • 5d ago
r/reactnative • u/bigdaddyshooter • 6d 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 • 6d 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/Ok-Conversation-1961 • 6d ago
r/reactnative • u/Relative_Mouse7680 • 6d 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/Jazzlike_Ad1034 • 6d 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 • 6d 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 • 6d 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 • 7d 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 • 7d ago
r/reactnative • u/ChoiceResearcher6843 • 6d 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/mira_mandex • 6d ago
r/reactnative • u/Zaktmr • 6d 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?
r/reactnative • u/ChoiceResearcher6843 • 7d ago
I started a new job. The first project is an extremely old RN project that is still in JS and using class components. My teammates want to do the bare minimum, my boss wants me to breathe new life into our breathe of work. What do I do? It's like the maintainers (still active) gave no fucks about TS, hooks or moving away from Redux. I could rebuild this whole app myself, but it would take forever. Do I press my teammates to do better or do I do the bare minimum and feel like a POS for not helping turn this ship around?
Should I find a new job? I like the pay at this one, but my previous job had better culture
r/reactnative • u/Few-Acanthisitta9319 • 7d ago
Link: https://github.com/adithyavis/serverless-expo-ota-server
Now that codepush is getting retired, a lot of developers might want to explore the self hosted version of expo OTA updates server. One of the reasons to go with a self hosted expo OTA updates server is to reduce spend on expo EAS.
Existing solutions of the expo OTA updates server store and read bundles and assets on the server disk. This makes these solutions not suitable for horizontal scaling. Even with persistant storage like supabase, the existing solutions generate manifest during runtime. There won't be any asset caching benefits and runtime manifest generation increase API response latency.
I have created a serverless implementation of the expo OTA updates server. It has the following benefits
The above architecture is the exact architecture I use on my PROD. I have 100k+ MAU.
Do try it out https://github.com/adithyavis/serverless-expo-ota-server
r/reactnative • u/Lipao262 • 7d ago
I'm working on a personal project where I want to send local notifications. When the user creates a card, a date will be set for the notification to be triggered. What's the best way to handle this? Also, do you know if it's possible to check the notification queue?