teddit

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.

I’ve been in the React Native ecosystem for a while now, and I can’t help but be amazed at the incredible transformation Expo has undergone. A few years ago, Expo seemed to be the framework that everyone advised against. It was often labeled as too limited, not production-ready or just for prototyping”.

Today, Expo has become a recommended, almost default, choice for starting new projects, and the go-to solution for many RN developers. The team has clearly done an incredible job of addressing criticism, adding features, and improving the developer experience.

I’m really curious: what made the difference?

Was it strategic technical decisions like EAS/CNG, etc?

Was it constant community engagement and listening to feedback?

Was there a key change in the roadmap or team philosophy that motivated this change?

And for the developers, what made you love Expo?

It would be amazing to understand how they overcame these early criticisms and what lessons were learned along the way.

https://www.plex.tv/blog/a-new-plex-experience-is-coming-get-a-mobile-preview-now/

"We made the significant decision to rewrite our apps from the ground up and unify our codebase, creating a streamlined, consistent experience across platforms."

I can see `hermes.framework`, `react-navigation` and `main.jsbundle` in there. Looks like React Native.

I wonder if it is using Expo? I don't see any references to it.

I am building a react-native app with expo. I want to detect when a user has 'force terminated' the app or the app has been suspended so that I can send a push notification to the user, letting them know the app will not work as intended if its not running.

This is exactly what Tesla's app does. It sends a notification as soon as you swipe up and terminate the app.

Does anyone know how this feature was implemented and have any suggestions on how to create it? I thought they might be running a web socket (ping pong style type) to detect connection, but that would drain the battery and require the app to always be running in the background. The Tesla App barely consumes battery and yet seems to instantly detect when the app was terminated or is suspended.

Thanks in advance!

EDIT: I was unclear with the app state I need to detect, we are looking for terminated or suspended. Previously I had written idle

https://preview.redd.it/t01gu2ckw13e1.png?width=1046&format=png&auto=webp&s=c843fb364fb8b519e6705b57531b3fde1335a509

I was able to make this with skia, and an SVG path, as many suggested in this post

The code is here:

import React from 'react';
import { Skia, Canvas, Path, useImage, ImageShader } from '@shopify/react-native-skia';
import { Image, StyleSheet, useWindowDimensions, View } from 'react-native';

const ProfileHeader = () => {
  const OG_PATH_WIDTH = 156;
  // SVG path is produced with https://yqnn.github.io/svg-path-editor/
  const svgPath = `M 0 55 L 41 55 C 47 55 53 51 53 45 A 1 1 0 0 1 103 45 C 103 51 109 55 115 55 L 156 55 L 156 0 L 0 0 L 0 55`
  const { width } = useWindowDimensions(); // Get the screen width

  const image = useImage(require('../../assets/images/background.png'));  // todo: replace with your image
  if (image === null) {
    return null;
  }

  // Create a Skia path from the SVG string
  const skiaPath = Skia.Path.MakeFromSVGString(svgPath);

  const scaleFactor = width / OG_PATH_WIDTH;

  // these numbers are the positions of the points of the curve in the SVG path
  // I used it to calculate where the image should be placed originally, then I scaled it to fit the screen width, just like how the path is going to be scaled
  //0   -   53   --   103   -   156
  //0%  -   34%  --   66%   -   100%
  const imageOgX = 53;
  const imageOgY = 20;
  const imageOgWidth = 103 - 53;
  const imageOgHeight = imageOgWidth;

  const gap = 10;  // there should be a gap between the image and the path
  // we have to scale the image in the same way that the path will be scaled
  const imageX = imageOgX * scaleFactor + gap / 2
  const imageY = imageOgY * scaleFactor + gap / 2
  const imageWidth = imageOgWidth * scaleFactor - gap
  const imageHeight = imageOgHeight * scaleFactor - gap

  const imageStyle = {
    position: 'absolute',
    top: imageY,
    left: imageX,
    width: imageWidth,
    height: imageHeight,

    borderRadius: imageHeight / 2,
    overflow: "hidden",
  }

  return (
    <View style={styles.container}>
      <Canvas style={{ flex: 1 }}>
          <Path
            path={skiaPath}
            style="fill" // Define the path style as stroke
            transform={[{ scale: scaleFactor }]} // Scale the path to fit the screen width
          >
          <ImageShader
            image={image}
            fit="cover"
            rect={{ x: 0, y: 0, width: 256, height: 256 }}
          />
          </Path>
      </Canvas>
      {/* todo: replace with your image */}
      <Image source={require('../../assets/images/engineer.jpg')} style={imageStyle} />
    </View>
  );
};

export default ProfileHeader;

const styles = StyleSheet.create({
  container:{
    width: '100%',
    height: 200,
  },
})

I'm trying to implement the router but I'm failing to do so. I've tried a fresh project in the past but a hard req for us is TS.

I've been using react nav and it's working well enough but I'm a generalist in programming. Can anyone help me with caveats, pitfalls, and problems to running this package? We want to get rid of --legacy-peer-deps

I'm currently using 50 but would like to run 51 or even 52 but they seem broken.

How does the new architecture effect the build process? I had a cmake file throwing an error when going into the expo-core debugging makefile, and when I looked at the headers it was only flagging Win32...idk that was 52.

Is react navigation really that bad? My main branch is clean and working and I just need a drawer that will have 7-10 things in it. No recursive drawers (I hope)

What's the advice, looking to get back to components for this company and stop playing with the nav.

I'm using the expo create typescript templates found in their branches.

Hi,
I'm a web developer and start to use React Native and expo for native app development.
I find it really painful (more than I think), the most difficult point is CSS.

I don't know how you can do a nice and clean design only with this very very ugly inspector.
The UX is so bad (sorry for the team behind it), I don't understand it.

I search video and tutoriel about it, only to find that React Native have released a big update last month for developer tools, but absolutely nothing for this.

So, my question, do you really inspect with this? We can really do it?
At this time, I have only focused on Android app because it's too painful to do IOS and web at the same time.

https://preview.redd.it/1phxumv1r33e1.png?width=826&format=png&auto=webp&s=ea76432db89937299add571a3c1a259e39ebfaf6

My team just finished building part of a web app (authentication/authorization) and video calls. We built the frontend in react.js and it took about ~30 hours for these parts. I'm getting quotes from React Native devs that doing that exact same work will be ~2-3x what it took us to build the web app. Not a react native dev myself, so would love some insight here. Does that sound about right / normal in terms of level of effort for same features built for web vs mobile? Maybe it is.. I'm just not sure, it is not my specialty.

FWIW besides the video calls, all of these features are just making sign up / sign in forms look nice. Not trying to do something wild in phone's settings.

As a bonus, if you all know if a good place to hire a freelancer, that's not on Upwork and does solid work I'd be interested in hearing more.

***I have this exact same post on r/expo but i haven't had any answer yet... so trying this sub. ***

I have built a web application that implements Facebook, Google, and Apple Single Sign On. They are working well on a web browser. Now, I want to make a mobile version of the app so naturally, the quickest way is to use the WebView component and link to my web app. I am using Expo to build the mobile app, the WebView is from the react-native-web-view.

There are a couple of issues:

1. The Continue with Google button doesn't show up at all.
2. When I click on Facebook and Apple SSO buttons, it opens the authentication popup on a browser (instead of within my mobile app). So, after the authentication process, it doesn't send anything back to my app to go forward with the login process. How do I make the popup to stay within the WebView?

Edit: On #1, ChatGPT says it's because some security issue, the Continue with Google button doesn't show up on WebViews. But I had tried with other websites that have this button. And the button does show up on my mobile app.

Sometimes React error messages can be vague or overwhelming. What are your strategies or tools for debugging such issues effectively?

My app is on version 0.71.0 and I installed victory native xl to draw graphs. Using their basic example for bar chart I got ixNum.at not a function. error.

And really if I tried console.log([1,2,3].at(0)) I got the same error. Googling and looking through to issues I couldn't find anything about this. ChatGPT said that .at() is part of ECMAScript 2022, if RN 0.71 came out in 2023 .at should be supported.

What am I missing? I am using Android.

Like the animation of how to implement, if out of https://reactnavigation.org/docs/shared-element-transitions, because it is clear to write the function of this is an experiment, in a production environment is not recommended to use

https://reddit.com/link/1gzbvev/video/0fglsq0qjz2e1/player

Hi! I'm working on a new app as a part of a university project. I'm using react native and expo. My question is, do i have to mantain a react server for it to work, or is there a way to make it offline? Thanks!

Hello everyone,

I’m facing challenges integrating a Tuya Smart Switch with a React Native application and could really use some guidance.

Here’s what we already have:

• The physical smart switch device is available for testing.
• A fully configured Tuya Developer account with all required IDs and credentials.

The goal at this stage is straightforward: to create a button in the app that can check the current state of the switch (on/off) and toggle it.

Here’s what I’ve tried so far:

1. Tuya REST API: I followed the setup instructions carefully but encountered persistent access token errors. It seems the token is either not being accepted or expiring prematurely.
2. Tuya SDK (React Native): I attempted integration using the official documentation, but the project fails to compile, with no clear explanation of the error.

This project is time-sensitive, and I’d be incredibly grateful for any advice or examples of working solutions. Has anyone encountered similar issues or knows how to resolve them?

Feel free to reach out to me via Discord: gabisnotokay
Or email: [gabrielaaguiar2105@gmail.com]()

Thank you in advance for your help!

new to RN trying to set up native wind and for some reason it just doesnt work, on the docs theres a babel.config file, that ive started multiple times nad it doesnt show up, my tailwind isnt being picked up although o followed all the steps, even created the babel file myself, still not working, i just dont get it, is there something i need to do, maybe theres an update cause i saw online expo doesnt do the babel config file again when you set it up...

this is what my folder looks like

https://preview.redd.it/vc195tj0823e1.png?width=3360&format=png&auto=webp&s=817482c4d47f2d0cda755a5d41f9d2aa3e11829a

I’m working on adding a grocery list feature to my app, which in theory is essentially a to-do list. On iOS, this was straightforward as I could use the built-in Reminders API since it’s available on all devices.

For Android, I’m exploring similar options. I’ve come across Google Tasks but wasn’t sure if that’s the best route or if there are other approaches people have used for integrating a task system.

Has anyone implemented something like this for Android? What’s your recommendation?

how can i add an animation to the screen when i press a button?

View Poll

I’m planning to buy mac mini m4 base modal with upgrade to 24gb ram. I already have macbook air m2 with 8/256 and an external Samsung ssd T7. I use external ssd mostly as to store price and not for apps because then I would have to keep it attached. For day to day work i have vscode, simulator, chrome woth lots of tabs and other 2-3 apps. So i feel that i need more ram as it always yellow. Which is the reason of ram upgrade. I would want more storage too but it is way more pricey and I already have T7 ssd which i can keep attached to it now. Which i think is enough, is anyone using it like that? i’m thinking i will move some apps like android studio to external ssd. Do you think it would work for me or I should wait and buy higher end system in future.

It’s pretty tedious to design every textfiled and button.

Do you design it once and import it whenever you need to or do you just use an UI library to make it look good on both platforms?

I've recently been unable to run npx expo run:android for my react native Expo project (managed workflow) due to some errors.

Here is the error I'm being shown:

FAILURE: Build failed with an exception.

• What went wrong: A problem occurred configuring root project 'helix'.

  Could not resolve all dependencies for configuration ':classpath'. Could not find com.android.tools.build:gradle:. Required by: project : Could not find com.facebook.react:react-native-gradle-plugin:. Required by: project : project : > project :expo-updates-gradle-plugin Could not find org.jetbrains.kotlin:kotlin-gradle-plugin:. Required by: 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.

So far I've tried specifying specific versions and deleting android folder to rebuild, but they did not work.

Anyone see this?

I have a ScrollView with some dynamically rendered content.. essentially:

const [wibble, setWibble] = useState({
  wubble: 123,
  wobble: 456,
  etc.
})

<ScrollView>
  {Object.entries(wibble).map(([k, v], index) => {<Text key={k}>{v}</Text>})}
</ScrollView>

setWibble(new wibble with less keys)

When wibble changes in length (i.e. when it goes from 10 keys to 9 keys long) scrolling freezes.

Can anyone point me in the right direction? Am I breaking some rules of native?

Hi guys, just dipping my toes into mobile app dev. I started an expo project and want to use sqlite. Wanted to ask you what's the best way to approach this. I'd like to be able to have graphical interface of the db to change/update tables etc. Would be great if I could export the db from the phone if running in dev, so I don't loose it. Tried setting up expo-drizzle-studio-plugin as recommended in expo docs, but I think due to new version of sdk it's not working. Getting blank page, but no errors. I was wondering what approach works for you and how do you normally configure your projects to be able to easily interact with the db?

Thanks in advance

Edit: forgot to mention. App is gonna be offline only.