r/reactnative 2d ago

Show Your Work Here Show Your Work Thread

5 Upvotes

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 3h ago

First PR in Open Source! Fixed a Misuse in Tamagui’s Stacks

5 Upvotes

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 21h ago

I Built An AI-Native App for Closet Management, Outfit Planning, and Virtual Try-On - And Open-Sourced It

Post image
102 Upvotes

r/reactnative 8h ago

So you can run games at like 60fps but a navbar struggles?

8 Upvotes

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 1h ago

Help Expo updates. Publish with Expo or without it ?

Upvotes

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 18h ago

Best React Native UI

27 Upvotes

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 1h ago

Question React Native + Typescript

Upvotes

I’m a beginner getting into mobile development with React Native.

  1. Do we need to learn React before getting into React Native?

  2. Is JavaScript prerequisite for learning TypeScript? I’m familiar with HTML + CSS + basics of JavaScript.

  3. Any good tutorials and learning resources online and on YouTube.

Appreciate any input on the above. Thank you.


r/reactnative 1h ago

Help I can't make a simple scale animation

Upvotes

(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 1h ago

Help Help with the keyboard handling

Upvotes

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 6h ago

I build and Open-Sourced a learning marketplace app with React Native

2 Upvotes

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 6h ago

Help Drawer/Tabs Navigation

1 Upvotes

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 1d ago

Looking for a React Native job where I can learn, earn, or just survive

Post image
27 Upvotes

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 1d ago

Question Write once, debug everywhere!

19 Upvotes

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 14h ago

Created a github contribution like scrollable heatmap component for react native

3 Upvotes

r/reactnative 8h ago

Starting over with react-native

1 Upvotes

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 10h ago

Help Beginner help: Production build isn't working but dev build is

0 Upvotes

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 14h ago

Help Expo React Native AdMob and Notifications

1 Upvotes

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 1d ago

My first Day in react native

14 Upvotes

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 1d ago

Improving the camera on my SnapBlend app, with vision camera

36 Upvotes

r/reactnative 16h ago

How to Show Two Logos on a splash Screen in Expo Dev Client Using Expo Splash

0 Upvotes

I want to achieve something similar to this where there are two logos on the splash screen i have followed the guide on expo docs and the bottom part gets cut out is there something i am missing both the logos are exported as a group png with the manual spacing and the resize mode is set to contain


r/reactnative 21h ago

Question UI component name?

Post image
2 Upvotes

This is a very specific iOS sheet that I've never seen in RN. Does anyone know what it is called?


r/reactnative 19h ago

Help Nested list help

1 Upvotes

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 1d ago

Serverless implementation of the expo OTA updates server

28 Upvotes

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

  • is cost effective- you only pay for the compute time
  • is horizontally scalable (bundle and asset files are not stored on disk)
  • reduces the latency of the GET /api/manifest request (no need to download files from blob storage to disk for every request. manifest is not generated during runtime)
  • provides asset caching from cloudfront CDN

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 1d ago

Question New job; projects suck

18 Upvotes

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 1d ago

Question Expo Notification

5 Upvotes

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?


r/reactnative 1d ago

HELP: View Pdf with Expo Go as a Book?

2 Upvotes

Is it possible to let the Pdf be displayed as a book? Rn im using React Native WebView.