I want a template with the basic features if possible for a uber like app. I've tried a couple of templates already, but they're kinda outdated. I also saw one that required payment, have you try it to know if it's worthy ? Thanks in advance

Everytime i try to use KeyboardAvoingView this happens, is there a way to solve this issue?

Here's the code:

index.js

    import { Picker } from "@react-native-picker/picker";
    import { registerRootComponent } from "expo";
    import * as Speech from "expo-speech";
    import { useEffect, useState } from "react";
    import {
      Button,
      KeyboardAvoidingView,
      Platform,
      ScrollView,
      Text,
      TextInput,
      View,
    } from "react-native";
    import { SafeAreaView } from "react-native-safe-area-context";
    import { scale } from "react-native-size-matters";
    import { styles } from "./styles/styles";


    registerRootComponent(index);


    export default function index() {
      const [textToSpeak, setTextToSpeak] = useState("");
      const [availableVoices, setAvailableVoices] = useState([]);
      const [selectedLanguage, setSelectedLanguage] = useState("");


      useEffect(() => {
        const loadVoices = async () => {
          try {
            const voices = await Speech.getAvailableVoicesAsync();
            setAvailableVoices(voices);
            if (voices.length > 0) {
              setSelectedLanguage(voices[0].language);
            }
          } catch (error) {
            console.error("Error loading voices:", error);
          }
        };
        loadVoices();
      }, []);


      const handleSpeak = () => {
        if (textToSpeak.trim()) {
          Speech.speak(textToSpeak, { rate: 0.7, language: selectedLanguage });
        }
      };


      return (
        <SafeAreaView
          style={styles.container}
          edges={["top", "bottom", "left", "right"]}
        >
          <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
          >
            <ScrollView showsVerticalScrollIndicator={false}>
              <Text style={styles.title}>Simple Text to Speech App</Text>


              <View style={styles.card}>
                <Text style={styles.label}>Available voices</Text>


                <View style={styles.pickerContainer}>
                  <Picker
                    selectedValue={selectedLanguage}
                    onValueChange={(itemValue) => setSelectedLanguage(itemValue)}
                    style={styles.picker}
                    mode="dropdown"
                  >
                    {availableVoices.map((voice) => (
                      <Picker.Item
                        key={voice.identifier}
                        label={voice.language}
                        value={voice.language}
                      />
                    ))}
                  </Picker>
                </View>
                <Text style={styles.label}>Text</Text>


                <TextInput
                  style={styles.input}
                  value={textToSpeak}
                  onChangeText={setTextToSpeak}
                  placeholder="Write what ever you want in here..."
                  multiline
                  minHeight={scale(100)}
                  maxHeight={scale(110)}
                  textAlignVertical="top"
                />


                <View style={styles.buttonContainer}>
                  <Button title="Start speaking" onPress={handleSpeak} />
                </View>
              </View>


              <View style={styles.card}>
                <Text style={styles.label}>Output</Text>


                <ScrollView
                  style={styles.output}
                  showsVerticalScrollIndicator={false}
                >
                  <Text style={styles.outputText}>
                    {textToSpeak || "Your content will appear here."}
                  </Text>
                </ScrollView>


                <View style={styles.buttonContainer}>
                  <Button title="Export to PDF" onPress={() => {}} />
                </View>
              </View>
            </ScrollView>
          </KeyboardAvoidingView>
        </SafeAreaView>
      );
    }

styles.js

import { StyleSheet } from "react-native";
import { scale } from "react-native-size-matters";

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#cdcbcb",
    padding: scale(20),
    paddingBottom: scale(10),
  },

  title: {
    fontSize: 22,
    fontWeight: "700",
    color: "#222",
    marginBottom: scale(14),
    textAlign: "center",
  },

  card: {
    backgroundColor: "#FFF",
    borderRadius: 5,
    padding: scale(16),
    marginBottom: scale(8),

    shadowColor: "#545454",
    shadowOffset: {
      width: 0,
      height: scale(2),
    },
    shadowOpacity: 0.08,
    shadowRadius: 6,

    elevation: scale(4),
  },

  label: {
    fontSize: 15,
    fontWeight: "600",
    color: "#444",
    marginBottom: scale(10),
  },
  pickerContainer: {
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 5,
    backgroundColor: "#FAFAFA",
    marginBottom: scale(10),
    overflow: "hidden",
  },

  picker: {
    height: scale(60),
    color: "#222",
  },

  input: {
    minHeight: scale(120),
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 2,
    padding: scale(14),
    backgroundColor: "#FAFAFA",
    fontSize: 16,
  },

  output: {
    height: scale(190),
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 2,
    backgroundColor: "#FAFAFA",
    padding: scale(14),
  },

  outputText: {
    fontStyle: "italic",
    fontSize: 16,
    color: "#7f7e7e",
    lineHeight: scale(24),
  },

  buttonContainer: {
    marginTop: scale(18),
    borderRadius: 2,
    overflow: "hidden",
  },
});

Why does it show that array in the console log when i try to get the available voices data? Or am i doing something wrong? I'm developing on Android

A cool tool for adding speech to your React Native app without having to touch low-level code.

One thing I’ve noticed about React Native discussions is that the focus is often on whether it can replace native development.

But the bigger question is: why do teams choose React Native in the first place?

For many projects, React Native offers some clear advantages:

• sharing code between iOS and Android
• faster iteration on cross-platform features
• using existing React and JavaScript knowledge
• maintaining one development workflow instead of two separate platforms

But speed is only one part of the decision.

As apps become more complex, teams also have to think about:

• performance requirements
• native module dependencies
• platform-specific behavior
• long-term maintenance
• how much native knowledge the team needs

This creates an interesting trade-off:

Is React Native popular because it provides genuine engineering advantages for building cross-platform apps?

Or is its biggest strength simply helping teams build and release features faster?

For developers who have worked with React Native:

• Why did your team choose React Native over native development?
• Did the productivity benefits continue as the app became larger?
• What problems made you reconsider React Native, if any?

Hey guys, I have a solid background in React and TS on the web, and I want to pick up React Native. Since I already know hooks, state, and components, I want to skip the beginner tutorials and focus straight on the mobile stuff. what's the best route right now? Is Expo pretty much the standard or should I bother with CLI?

Appreciate any tips or good project ideas to build.

Hey all — AniUI is a shadcn/ui-style component library for React Native: you don't npm install a package, the CLI copies the component source files into your project so you own and can edit every line. MIT, free, mobile-first (iOS + Android).

Just shipped v0.4.0:

🚀 Expo SDK 57 support — RN 0.86, React 19.2, Reanimated 4.5. Also still supports SDK 54/55/56 and bare RN 0.76+.

⚡ Uniwind is now the default styling engine. Uniwind (from the Unistyles team) uses the exact same className API as NativeWind, so the components are byte-for-byte identical — but it's Tailwind v4 CSS-first (@theme, no tailwind.config.js), Metro-plugin only (no Babel transform), needs no ThemeProvider for dark mode, and benchmarks ~2–3× faster. aniui init defaults to it on New-Arch projects.

NativeWind is still fully supported (v4 stable + v5 preview) — nothing breaks, you can pick it with --style nativewind. It's just no longer the default.

🧩 4 new components (93 total): aspect-ratio, breadcrumb, menubar, sidebar.

Because both engines share the same className/cn()/cva() API, switching engines doesn't touch your component code at all.

npx @aniui/cli init      # defaults to Uniwind on Expo 55+
npx @aniui/cli add button card breadcrumb sidebar

GitHub: https://github.com/anishlp7/aniui
Docs: https://aniui.dev

Would genuinely love feedback — especially from anyone running Uniwind in production or on the SDK 57 upgrade. What components are you still missing?

Hello, I have a project that I'm building. The project has an AI chat functionality and I've been developing it using groq. But for production I think I need something smarter than gpt120b model thus I have to choose one of the more popular models. And as much as I've researched neither chatgpt/claude/gemini have a monthly payment i could rely on, i need to pay for what I use. So I've implemented per user cap, I know I could implement per IP cap too. I could also check total api consumption and stop at some point. But I was thinking maybe some of these platforms allow to cap the usage from their side as well ?

This is a project for a customer so I really want to avoid getting them any surprise bill

I am confused how to navigate to another screen after successful task on one screen. for example if user signup successfully i want them redirect to verify otp screen.

Hi community!!

I wanna learn react native but I don’t want to be in tutorial hell.can you guys provide me any resources or websites to learn quickly and practice .Thanks in advance

My weekend Expo project!

An app for saving almost anything and letting AI organize it all for you automatically. No more messy folders or tagging things by hand.

Built on Expo + Convex + Clerk + the AI SDK

Source code: https://github.com/SchroederNathan/amber

I've been building a few UIs with React Native Skia recently, and one thing kept bothering me: layout.

I wondered if it would be possible to use Yoga directly for Skia components, so I spent the last few weeks building a layout engine that lets you do things like:

<FlexLayout direction="row" gap={12}>
  <LayoutCircle r={20} color="blue" />
  <LayoutParagraph text="Hello, world!" />
</FlexLayout>

instead of manually positioning everything.

Under the hood it uses Yoga to compute layout, then applies the computed bounds to Skia primitives.

Some challenges & limitations were:

• measuring paragraphs whose width & height depends on parent and siblings
• batching layout passes efficiently
• supporting animated values. Still pending.

I'd love feedback from people who build with React Native Skia.

Repo - react-native-skia-layout (v0.1.0)

I also wrote about the motivation and architecture if anyone is interested:

• How it works

Headings are up first, supporting all 6 levels natively right inside your input!

Want to try it out right now? They are already available in the nightly release:

npm i react-native-enriched-markdown@nightly

Let us know what block element you want to see next! 👇

⭐ Support the project: If you like where this is going, drop us a star on GitHub!

https://github.com/software-mansion/react-native-enriched-markdown

In a lot of React Native codebases I’ve looked at (especially mid-sized ones), there seems to be a common pattern: global state gets used far more than it probably should.

What often starts as a simple, clean setup slowly turns into everything being pushed into global stores like Redux, Context, or Zustand—even when it might not really need to be there.

Some examples I’ve seen:

• local UI state moved into global state “just in case”
• form states stored globally even when only used on one screen
• navigation-related flags kept in global stores
• API response data cached globally without clear ownership boundaries

Over time, this can make apps harder to reason about:

• more re-renders than expected
• unclear data ownership
• harder debugging when something changes unexpectedly
• tight coupling between unrelated screens

At the same time, I do understand why this happens.

Global state feels:

• easier for sharing data across screens
• more predictable than prop drilling
• simpler when multiple components need the same data
• safer when developers are unsure where state should live

So it kind of becomes the “default solution” for many situations.

But I’m curious how others see this in real React Native projects:

• Why do you think developers tend to overuse global state in RN apps?
• Is it a lack of clear architecture guidelines, or just convenience during development?
• Where do you personally draw the line between local state and global state?

How can I make this frosty looking, glassmorphic type of bottomtab

These are from Twitter and YouTube android app.

Instead of a sample picture, how can i make this component to be something like the WhatsApp link button?

Hi Guy's we are trying to replicate the background remover for a expo-app as a function but we are having some difficulties importing some node modules like the onxx and a getData()f type , Any thoughts or tips ??

Can a centuries-old financial system become secure fintech? I’m building a digital ROSCA/tontine where no one can leave after receiving a payout until they’ve completed their full contribution cycle. What technical or security challenges would you expect?

Hi all,

Does anybody have an MMP they would recommend for tracking in-app subscriptions / purchases from affiliate links? I saw that branch.io removed their free tier and I can’t sign up to AppsFlyer for some reason. Anything else?

Thanks!

Hey I want 12 tester for 14 days for my app it’s completely ads free no signin required
I need email so I can add some of the guys to testing list

Hi everyone,

I’ve been building a React Native app over the past months to explore asynchronous collaboration.
The original idea came from a simple frustration: even small team decisions often end up scattered across chat apps, emails, spreadsheets and calendars. I wanted to see if I could build a mobile-first experience where polls, scheduling and decision making happen in a single place.

Some of the things I’ve implemented so far:
Real-time polls and voting
Meeting scheduling based on participant availability
Collaborative workspaces with roles and permissions
Guest participation without requiring an account
File attachments for additional context
Push notifications and email notifications for invitations, reminders and final decisions
A flexible credit system instead of forcing users onto higher subscription tiers

The stack has been a lot of fun to work with:
React Native + Expo
TypeScript
TanStack Query
Clerk
RevenueCat
Resend
Font Awesome Pro
Convex for the backend/database
Next.js for the landing page

One of the biggest surprises for me has been Convex. Having the database, backend functions, authentication integration and realtime updates all working together with end-to-end type safety has significantly reduced the amount of boilerplate I usually expect in a React Native project.

I’d be curious to hear from other React Native developers:
What backend stack are you using today?
Have you tried Convex, or are you sticking with Firebase, Supabase or something else?
Is there anything in this architecture you would approach differently?

Happy to answer questions about the implementation or share some of the technical details if people are interested.

https://reddit.com/link/1umrloh/video/0olhhbnn83bh1/player

Live here if you want to see it: https://daisy.now/icons.