" We are pleased by the community's efforts that make the Facebook SDK for React Native a success. We believe the community is well equipped to address developer needs going forward. Note that our support for React Native continues and is not affected by this. "

Thanks!

We used react-native and expo to develop and build the app. Expo eases a bit the process of creating and distributing bundle for AppStore. But you still have to enrol in Apple Developer Program which costs $99/year and go through the Apple app submission process.

Maybe React Native official blog can help? https://reactnative.dev/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native

Yeah, you could use AppState to listen to the app `background` event and dispatch your redux action to clear everything from the redux state. Hopefully you have your `initialState` already saved as a variable that's easy to import and use.

Make sure you `remove()` the listener on your `useEffect` callback. This is to avoid memory leaks of your app and unnecessary listens when the app is backgrounded anyways.

There are some examples on the docs I linked that show you how to use it.

it's not completely necessary as they share pretty much everything. there are still concepts which you will have to return to the normal react documentation for such as state, props, etc... this should provide more info on the differences between the libraries, good luck!

Mobile?

I saw you mention working on or having an interest in mobile in another comment so I'll throw this in:

I've only really been exposed to mobile as an accessory of a primary web SaaS but I've never exclusively worked on mobile. I know React Native is popular and there's obviously an iOS market but, and maybe this is my own bias, I see the mobile app development market as very transient; a lot of stuff comes and goes as trends change.

I've used Xamarin, twice, to create or wrap mobile experiences. If you do pursue the .NET route this would probably be something to look into.

What do I mean as an accessory item? I mean banks and other commercial endeavors that are primarily a web experience with a mobile app that wraps their web experience. It wouldn't be unusual to get hired by, say, Chase, and work on their website, but then be asked to work in their mobile app for a bit before returning to web dev.

have you done any research? There are loads of apps in production written in RN, some big some small.
https://reactnative.dev/
Look at the examples on the homepage, there are some very big ones there.

Use AppState.

It gives you callbacks when the app goes to the background and when the app comes back from background.

The callback should just check the socket connection status and reconnect if needed.

I feel your pain. It's really hard to debug these things without the project in front of me. I have two thoughts:

Because it happens in release and not debug; this error is probably going to be related to the fact React native using a different JS engine in debug van release (V8 in debug, JSC or Hermes in release for Android https://reactnative.dev/docs/javascript-environment).

One big difference is the Date object. You should look for something relating to Date in your code and try and isolate it with an Error boundary.

https://reactjs.org/docs/error-boundaries.html

You can handle the didCatchError with an Alert.alert(error) and see the error in release mode.

Good luck, I'm rooting for you ✊

My initial suspicion is that the values you are using in the image style are causing Expo to crash.

React Native requires "unitless" values when using style properties like height, width, marginRight etc so I would change '25px' for 25 (notice the lack of quotes as well).

The caveat to this is that percentage values should be strings and require the percentage unit.

You can read more here

As a React Native dev, I can say the eco system, and the line between react native apps, and native apps is blurring more and more each year. react native lets you get into the native code on either platform if you needed ti. It's maintained by facebook, and there's a huge community that maintians plugins or parts that facebook no longer uses. Each year we get nice updates. This year we got a much faster JS run time engine to run the apps. Plus, huge companies have proven the power and perfomance of React Native. Discord mobile is 100% RN, Coinbase is large part react native and of course facebook uses it.

I basically wiped all the rosetta stuff and went back to arm-native things. I uninstalled the global react-native since they now say to not install it as a global package and use NPX instead. Here's a list of my which/version commands & results:

% which ruby /Users/latitude_user/.rbenv/shims/ruby % which node /Users/latitude_user/.nvm/versions/node/v14.18.1/bin/node % which react-native react-native not found % which brew /opt/homebrew/bin/brew % brew --version Homebrew 3.2.16 Homebrew/homebrew-core (git revision 3b92200925d; last commit 2021-10-18) Homebrew/homebrew-cask (git revision ab11bfbede; last commit 2021-10-18) % ruby --version ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [arm64-darwin20] % node --version v14.18.1

https://reactnative.dev/docs/text#maxfontsizemultiplier

Setting a max font scale will allow the user to use accessibility settings up to a point where it the UI won’t get destroyed. It’s recommended to use this at a minimum though, your users have set the font scale that large for a reason.

If it’s a widespread problem then a redesign to accommodate large font scales would be the ideal solution.

If you're already familiar with React then you're not far off. The best place to start when learning new tech is the documentation. React's docs are great if you want to get more familiar with React, and then go through React Native's docs and spin up a RN project and start hacking. Expo makes it super simple. You can run and test everything in your browser (with only minor quirks). RN uses JSX, and styling is very similar to CSS. In fact I used tailwind-rn for this project and it was fantastic experience (for rn).

Increase windowsize to load more things not visible. I don't know why someone said to decrease it. Decreasing it improves performance. But increasing it means more things will load that are not visible.

> windowSize: Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport.

https://reactnative.dev/docs/virtualizedlist

However, if you are using onEndReached to fetch new data on reaching the bottom then you could increase onEndReachedThreshold so that it hits this trigger earlier.

You could use a `SectionList` instead nested `FlatList`, so you can scroll to a section(Comment) or its sub-items(Replies). https://reactnative.dev/docs/sectionlist#scrolltolocation

Have you done what it asked of you first?

error Failed to install the app. Make sure you have the Android development environment set up: <strong>https://reactnative.dev/docs/environment-setup</strong>.

Yep 'memo' is the correct answer, congrats!
I've added `memo` on the list item component.

The crazy thing is I was not seeing any noticeable impact with my own eyes. I knew memoizing was probably good but wanted to have confirmation, especially since my `renderItem` was already not anonymous as mentioned in https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem.

But with the graph, it was clear as day that the impact is big!

One thing that is weird with RN vs normal & React web dev is that there is no CSS for RN. They do have styling, but is a simulated subset of CSS rules. Most importantly, there is no grid, but they do have s a somewhat compat [flexbox](https://reactnative.dev/docs/0.64/flexbox) for layout.

Many RN apps connect to an API. For graphql there are packages like @apollo/client you can use or you can simply use fetch.

I'm not really sure what you're asking to be honest about it being industry standard or if it's a good idea.

You can add social authentication. There are services like Firebase that can help you with that or you could look up how to do it yourself. Firebase is good for prototyping if you don't already have some backend API templates to use. I'm really not a fan of Firebase to be honest but for someone starting out it's a good way to focus more on the app than the backend and database.

Lots of tutorials out there for all the above. Best of luck

I think what you are talking about is embedded react-native inside an existing app?

https://reactnative.dev/docs/integration-with-existing-apps

Or you can do what you are trying to do using a native component and events.

Or this article might help: https://reactnative.dev/docs/communication-ios

Styling components to look native won't necessarily help performance. What will help most:

• Use native drivers. Animated, for example, has a prop called useNativeDriver, which will pass all of the animation props to the native side and perform the animation natively, freeing the javascript thread. FlatList is another component that uses iOS/Android native code and greatly improves performance.
  
• Eliminate unnecessary renders. Besides using native driver for Animation heavy apps and using Flatlist, eliminating unnecessary renders is the most common effective performance optimization.

Considering RN has built in support for websockets my vote on this one has to go for PEBCAK

Software doesn't just not work for no reason, and just because you haven't managed to sort a problem doesn't make the whole project dreadful. Keep learning, and keep an open mind, in this case it unfortunately sounds like the tech task did its job and filtered out a candidate who didn't have the experience they were looking for.

"In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components."

https://reactnative.dev/docs/intro-react-native-components#native-components

And for more info:

https://reactnative.dev/docs/native-modules-intro

Maybe not the exact answer but this might help with your search

No. JS isn't "compiled into the native high level language" unless you think that the Javascript is actually used to generate Objective C code that gets compiled and linked to produce a native app.

Quoting from https://reactnative.dev:

"React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do."

and

"React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript."

In English this means that the native code components are invoked by the React components using a standard calling interface, not that the components are generated as a result of the Javascript source code.

(In your counter-example, C statements generate machine code in the native form that talk to the runtime libraries that are also in that native form; that is not the same thing as the way RN works, at least according to their docs.)

You can use the inverted prop in the FlatList. https://reactnative.dev/docs/flatlist#inverted

I don't know your source code exactly, but if that doesn't work, I'd look into reversing the order of the array that contains the messages. You can use Array.reverse() for that.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/reverse

I think that re-animated bottom sheet has a parent wrapper touchable component which listen to touch event when user want to hide or reveal bottom sheet. This touchable component wrap child components( include your app buttons).

When expanded in Landscape mode it should block event to propagate down when you need your button to listen to touch event.

Try to replace TouchableOpacity with Pressable Component. If not work try other Other bottomSheet Package.

I use this package for Bottom Sheet and It worked with button inside

Hey u/oliveralr, thanks for asking this question,
Earlier this year we talked about our “many platform” vision on our official blog (https://reactnative.dev/blog/2021/08/26/many-platform-vision).
We haven’t actively looked into WearOS support at this stage but is something that is definitely aligned with our long-term vision.
In there past there were community driven initiatives to bring react native to Wear OS and we’re more than happy to look into similar effort in the future (similarly to what is happening with `react-native-skia`).

What the other guy said, RN has a max frame rate of 60 so you should be at least be waiting for the next animation frame before calling setstate.

https://reactnative.dev/docs/timers

Apart from that you need to localise this data. The only thing that needs to re-render is your display of the data not the button.

Create a new component that retrieves the data and displays it and have your button live at a higher level. That way you aren't re-rendering everything when the data is updated. Just your display.

1 - not common. Most RN developers use a functional programming approach, rather than object oriented.

2 - redux state allows for slices of state, to split your state into different parts if you can. If it is just one big array of objects, you can use redux, but because of immutability there will be a lot of cloning when you make changes. But it's not deep cloning, so it can be pretty fast. Best way to do it is get it working, and then see if there's any actual performance issues.

Consider using virtualized lists to help performance in views with long lists of data.

React Native uses a flexbox spec based on the the same one that the web platform uses. It's incredibly powerful for creating flexible layouts for different screen sizes. It definitely takes a little getting used to if you aren't acquainted with CSS and flexbox but once you get the hang of it, it's usually the best option for laying out UI.

Positioning via the position style prop is still incredibly useful and you'll most likely end up mixing the two. Usually I'm positioning things absolutely when I need to stack views on top of one another. E.g. Putting text on top of a background image or a badge in the corner of an icon. The studio I work at makes manager games with RN so we use a lot of images and graphics, I think I end up using absolute positioning quite a bit. However, the lion's share of the UI is laid out in flexbox.

Been through this before and what it comes down to is that there is nothing you can do to make sure it looks good whilst scaling up to the ridiculous sizes some people use.

Most of the user's expect this.

What you can do is make sure the app is still usable.

There are two key ways of making this happen:

Wrap your content in a ScrollView so if the height exceeds the screen height the user can scroll around to see what they need to.

2) This you should have been doing already..Do not use fixed heights or widths. Use flex, percentages if you have to and the only place where you use fixed numbers is padding and margins - only when necessary.

Lastly - you may also want to disable scaling for text that isn't necessary to read like navigation headers. Use carefully though. There will always be the temptation to disable it for everyone but you will just anger a small group.

https://reactnative.dev/docs/text#allowfontscaling

Sizing text statically is fine. 14-16pixels is the normal height and in fact if you don't specify anything I believe it's 16.

Ok just one more thing. Use ellipsises along with number of text lines for buttons or text in multiple columns if you can't have the column wrap itself.

Remember though: you will never get it perfect just get it usable.

I'm not sure how else you would do it, but in this case you might want/need to use Expo to be able to test/compile for iOS. I don't use expo and am not completely sure of it's limitations, but unless you NEED to do some custom native code (unlikely) you'll be fine.

In the docs @ environment setup stage you need to select Expo CLI (https://reactnative.dev/docs/environment-setup)

That's a completely different error. You're sure this is template code? Regardless I notice you generated the project using Expo. You should try generating a new project via creat-react-native-app.

https://reactnative.dev/blog/2017/03/13/introducing-create-react-native-app

Like others have said, learning Swift for iOS is a good path to take. Since RN writes the AppDelegate.m in objc, you'll need to understand a bit of objc in order to bridge your AppDelegate to your Swift files. The docs talk about it in this section. https://reactnative.dev/docs/native-modules-ios#exporting-swift

Hi, u/oimanaqeel,

Check out these official websites of React and React Native. They have tutorials also, in case you wish to learn in the future&mdash;once you are comfortable with plain (vanilla) JavaScript.

https://reactjs.org/

https://reactnative.dev/

Wishing you all the best in your JS learning journey!

https://reactnative.dev/docs/getting-started
This should get you pretty far as a beginner.
Then again, it really comes down to what you are familiar with already.

You probably want to detect the text then crop to where it is. This should help.

https://adapptor.com.au/blog/text-recognition-in-react-native

If not and you want to keep trying what you are doing then you need the physical pixel ratio.

https://reactnative.dev/docs/pixelratio

React Native has had something like this for quite some time, i really loved it and I wondered why it isn't in ordinary css. ...that also means that they will have to update their docs at some point, huehue

Indeed. It’s made with react-native, building on Facebook’s reactJS front-end rendering solution. Because it functions virtually identically to the web app, it can be mistaken for a web view, but it is actually written in Babel such that one view architecture can be transformed to web (JavaScript) elements, or iOS or Android as a native app.

maybe not the answer you were hoping for, but the official guide has been tremendously improved with the last big rewrite, and I think it's the best resource to start with.

The way I learned it was by working on my fork of a library I needed to modify (react-native-maps) and understand how it worked. It's probably not the best lib to start with, but it's just one I needed to work on anyways. I did know about Android development already though, so it's an approach that I only recommend if you're at least somewhat familiar with native development. If you come from the JS world, I suggest the other way around (read the docs, come up with a simple implementation of some basic wiring of a System-provided call, and work your way from there).

this is a little odd that React Native isn't caching automatically (RN dev here), you can either specify the strategy when passing the `uri` in props (https://reactnative.dev/docs/images#cache-control-ios-only) , but you also should check the max-age in the cache-control header of the uploaded profile image (if there isn't one, you should definitely set it after successful upload, either via the client sdk or through a cloud function)

Do you mean to display an image component for each element of the Flatlist? If that's the case the following will add the same image to each of your Item.

1. Import image element from react-native
   import { Image } from 'react-native';

2. Add the <Image/> element to the const Item functional component
   ...
<Text style={styles.title}>{name}</Text>
<Image style={styles.tinyLogo} source={{ uri: '<code>https://reactnative.dev/img/tiny_logo.png</code>' }}/>
...

If you want a different image for each Item you should add the uri/url of the images as props and pass them to the source parameter.

You can subscribe to AppState changes using AppState.addEventListener('change', ...): https://reactnative.dev/docs/appstate. I just do this in my root component.

When the last state was "background" and the next state is "active", I trigger a refresh of all data, and write the current time to a variable in the component state. The next time the refresh function is run, I check the current time against the saved time, and if it hasn't been a minute, I don't do any requests.

It would probably be somewhat cleaner if this was extracted to a custom hook, or a redux action.

Let me know if this answers your question, and if you would like a code example.

Also, this may be helpful?

https://reactnative.dev/docs/ram-bundles-inline-requires

&#x200B;

You could theoretically do network calls for code modules instead of requires?

Android studio is an IDE specifically for developing Android apps

If you want to be on both IOS and Android, look into code frameworks that will support both, such as React Native

React native is JavaScript not Java but you can learn it

Hltv.org’s app (and many modern apps) probably uses a library like React so that they can deploy a single app that will run on multiple operating systems instead of building separate apps for each

remove the react native video show series, i think its very very uselesshttps://reactnative.dev/help

&#x200B;

&#x200B;

i rather have william candilion as he is good in React Native :)

or mayb someone from the RN community create the same caliber of videos that flutter do on their API components.. so you can invite more developers in this community

docs: "A lower number yields better accuracy... If you do not need precise scroll position tracking, set this value higher". In your case you want precise position tracking, so lower number.

And it's super laggy because how the onScroll method is handled, it's really wrong. This is how you should get the x value and then I think using interpolation should be enough to transform the x value for header.

I think the pre reqs depend on your goals, but you sound like you're just entering this world as a non programmer who has done some programming-when-needed previously.

I think you'll like want to use Expo. Your idea of Expo to native development being like jQuery and JavaScript is kinda accurate there-- but I can't imagine you'd be wanting to put yourself through the learning curve of working without it. Expo's main value proposition is avoiding the learning curve and get you right into seeing your code work on your device.

So yeah, make sure you have node js installed, a code editor, and expo downloaded on your device to preview your app.

Then you can follow these expo instructions and see it on your phone.

https://reactnative.dev/docs/environment-setup

Then you should be able to follow along on most RN tutorials.

The only caveat when using Expo is that at times a tutorial may ask you to install a certain module that won't work with Expo. Usually the install instructions on those modules will have separate instructions on how to install on Android and iOS, which will be a giveaway that your expo managed app won't work with it.

Expo does cover a lot of satisfactory basics for the beginner and a lot of modules will work with Expo.

Maybe once you're comfortable with Expo you can begin your training in the dark arts of not knowing why Xcode is throwing errors at build.

Though the folks at React Native have made things easier as time has gone on.

Happy learning!

I might be wrong, but I don't think Facebook Messenger ever used React Native.

Messenger was released for iOS and Android on August 9, 2011; the initial release of React Native wasn't until 2015.

Furthermore, I don't think Facebook Messenger was ever in the React Native showcase page, which would be a surprising omission.

Third piece of evidence: a Facebook blog post from August 23, 2012 talks about Messenger being a "new, native app" and makes multiple references to Objective-C for the iOS applications.

JavaScript can be a great choice for making apps, using technologies like React Native or Ionic. I would recommend first working on web apps (which are really just websites that work like apps rather than websites) first, as that lets you learn the basics first without learning all the fancy app-specific bits.

Mods and bots are highly specific on mods for what and bots for what, but some like Chrome extensions and Discord bots are written in JavaScript. Even if what you want to mod uses a different language, as I mentioned, JS can be a great language to learn and then much of that knowledge can then carry over to learning other languages. (Many professional programmers will know and work with at least a couple languages and will pick up new ones as needed).

Finally, games. Games can also be done with JavaScript, using the same as web apps (React Native or Ionic). For simple games, this can be a great option. If you want to create more complex games, you'll probably be looking to use either Unity (C#) or Unreal Engine (C++).

Electron is a good option but it seems to have some performance bottlenecks and high ram consumption, in most cases it's a very good solution to building cross-platform desktop apps especially when you have expertise in the JS world and if you want to have a desktop version of your web-app with added features.

You can look in this Electron react boilerplate to quickly set it up and use react on the front end.

Also, Look into React Native for Desktop Apps as well which seems to have performance gains over Electron implementation.
React Native for Windows + macOS

I'm new to react native and wanted to have a look at it, but not sure why I can't get it to run

`error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

• What went wrong: Could not open settings generic class cache for settings file 'C:\Users\winuser\meditation\meditation-main\frontend\android\settings.gradle' (C:\Users\winuser.gradle\caches\6.9\scripts\3zjf6kxpyng8ikpfai4z363at).
  &gt; BUG! exception in phase 'semantic analysis' in source unit 'BuildScript' Unsupported class file major version 61 ` Checked the environment and jdk, and don't see any issues with neither. Where might I have gone wrong?

Wanted to have a look at it, but not sure why I can't get it to run

`error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

• What went wrong: Could not open settings generic class cache for settings file 'C:\Users\winuser\meditation\meditation-main\frontend\android\settings.gradle' (C:\Users\winuser.gradle\caches\6.9\scripts\3zjf6kxpyng8ikpfai4z363at).
  > BUG! exception in phase 'semantic analysis' in source unit 'BuildScript' Unsupported class file major version 61 `

Checked the environment and jdk, and don't see any issues with neither. Where might I have gone wrong?

You get a few components in RN as well:

https://reactnative.dev/docs/components-and-apis#basic-components

And there is one big advantage of RN over Flutter: It uses the native UI components of the OS. So you always get the look and feel of the os in the app.

1. Starting with that link you gave, since 80% of the basics of React apply to RN as well. I'd especially start down at the #hooks section and learn those concepts.

2. You can't beat the official documentation for just about everything else you'll need specifically for RN. Start with the "Guides" section, which gives you a refresher on React and then dives into concepts that are specific to native apps.

3. Beyond the basics, there's no more "cheats" and it's just all about figuring out what features you need and what works best overall for your app.

I think you're trying to ask whether you can import a third party video editing SDK into React Native. The answer is yes.

You need to write a native module.

https://reactnative.dev/docs/native-modules-intro

What's the data? x,y coordinates?

Might be as simple as drawing a view that has its borders bent to make it look like a circle and positioned absolute. You will need to do some basic math to convert the coordinates to screen coordinates using these functions https://reactnative.dev/docs/pixelratio

As someone else said item is a named property of the object passed to renderItem.

Please take a good read of the specifics for renderItem in the official docs, https://reactnative.dev/docs/flatlist#required-renderitem.

OT: That Hermes and fabric description is confusing on their blog - I may have missed some history but I can’t work out how they differentiate here: https://reactnative.dev/blog/2021/10/26/toward-hermes-being-the-default

React Native Money is a simple component library that exposes a fully native TextInput component that uses currency formatting libraries provided with Android and iOS, so as well as being performant it is also lightweight on your binary sizes. The component has an identitical prop signature and API to the default TextInput provided with React Native, The only difference is that the value prop accepts a Number type and onChangeText returns a number value and formatted string.

The new Expo system has support for arbitrary native code, on iOS specifically, we have optimizations for bare workflow + Apple TV in the Expo CLI run commands (expo run:ios —scheme + selecting a TV scheme will auto configure, and run a TV simulator).

The Expo SDK doesn’t have explicit support for TV platforms, but it can be patched in using patch-package.

The AndroidManifest.xml modification described in the RN docs can be applied with Expo config plugins https://reactnative.dev/docs/building-for-tv (PRs welcome for upstream Expo CLI support ❤️)

Finally, EAS Build and Submit support any React Native app, so the auto code signing, building, and submitting can all be used on TV (in theory).

Saying from the start I didn't implement paging yet but is this might be what you are looking for?
https://reactnative.dev/docs/next/scrollview#snaptointerval

For animations, you can use reAnimated to snap back with some offset values.

You can use stuff like Ionic Framework and React Native to get into app dev quickly if you're already a web dev

You're not a failure dude, believe in yourself :)

Native Modules is what you're looking for.

Here's where I found the link and there's one for iOS, as well.

Native Modules tutorial for Android.

I read Riley's "Learning React Native" book once. Despite I still think the reactnative.dev official documentation is the best in the game, Riley's book is quite concise and explains many of the challenge a beginner dev might face (e.g. flatlists, styling, etc).

This looks awesome. Are the plans to support platform native ui frameworks such as gtk-rs and UIKit? Having all controls would cause maintenance headache but I think having example on how to use Gtk-rs with dioxus with few controls would be a good start. This would allow me to easily create dioxus components backed by gtk-rs.

I think this has a potential to take over react-native if it can support platform native controls. Having core component abstraction such as View, Text, Image could be a good start. https://reactnative.dev/docs/components-and-apis#basic-components

Existem várias formas de criar um app, te recomendo usar react native já que está aprendendo javascript.

Sobre o android studio, ele não é realmente necessário, na verdade você pode usar qualquer IDE/editor de texto.

Quick fix would be to change the keyboard type to email.

https://reactnative.dev/docs/textinput#keyboardtype

Doesn't explain why it's happening but it should fix it.

This type of issue is more common with managed textinputs but in your case that doesn't apply.

You need to set up an event listener on keyboard state and make sure you’re setting a ref for the bottom sheet.

https://reactnative.dev/docs/keyboard

In the event handler, call snapTo on the bottomSheet ref when keyboard is shown.

If you’re not currently using snapTo, it’s a little confusing as you pass an index to your snapPoints array that you set in the sheet props, not an actual height.

I’ve had some issues with this as the snapPoint array being reset can cause issues with rerenders and I don’t want all of my bottom sheets to be able to cover most of the phone.

The approach I’ve settled on is to set my maximum snap height just above the keyboard height and use an inner ScrollView (from reanimated) combined with scrollTo

Full tweet for those that want to avoid Twitter:

> A present for your holidays: @reactnative's site has a new Architecture section populated with content about how the new Fabric renderer works written and edited by @SamuelSusla and @lunaleaps! Enjoy! https://reactnative.dev/docs/fabric-renderer

First of all, the setup will be Expo and React Navigation . Regarding the app, create 2 screen components, one is the general items screen, one is the details screen. On the general items screen render a Flatlist component with all the items, and on the details screen whatever stats you want to render. When an item on the flat list is pressed it’ll pass the data of that same item to the details screen, you can do it by passing the data to the navigation function in the shape of an object. Then receive that data using route.params in your details screen and render it however you’d like.

What if you first introduce a native Android/iOS widget in your flutter codebase that then invokes a react native component? Sorta just follow these two docs

https://docs.flutter.dev/development/platform-integration/platform-channels

https://reactnative.dev/docs/integration-with-existing-apps

I bet this will make local debugging and work a pain in the ass tho

Here is a example snack of how I would go about making a scroll based animation. You can bind the scroll offset of the scrollview to an animated value - Reference. You can then interpolate the colors based on the input scroll offset. I have used some noticeable colors to see the change, but you can use any other colors. Currently colors can't be interpolated on the UI thread (hence the useNativeDriver: false), but you can work around that by absolutely positioning two views of the start and end background colors inside the box and change the opacity of those views based on the scroll

There are fixes incoming in RN very soon (if I understand correctly) but otherwise I would agree with TootBeepThaFoot's comment - it doesn't work great.

The way it's supposed to work is that it uses Keyboard's addListener() to detect the keyboard appearance and then shift your scrollview up and down accordingly. However, regardless of what mode you pick (padding, position, etc) it just doesn't work on both platforms, and not the way it's documented.

React Native doesn't retain "most of code". If you dig down, you'll see that most of the code is in a forest of components written in a platform-native language (downloaded from GitHub or other repo) and RN maps its Javascript calls to those components. You can write your own, but if you need to do that you're better off just scrapping RN and writing it natively. This "share most of your code" is disinformation.

https://reactnative.dev/docs/intro-react-native-components

+1 to this.

I've worked on multiple large react-native teams (20+ engineers). The teams that use styled-components are severely handicapped. Their sprint velocities are dramatically lower, and they spend more time tweaking UI instead of shipping features.

Styled-components remove the mobile-first custom flexbox shipped default with react-native (https://reactnative.dev/docs/flexbox), and it adds an unneeded level of abstraction to the CSS which makes your UI less flexible overall.

Use React.StyleSheet() (https://reactnative.dev/docs/stylesheet) instead.

EmailComponent needs a fixed height and you probably need to supply an item measurement function.

https://reactnative.dev/docs/flatlist#getitemlayout

Trying to scroll to a specific item is a real pain. There are all sorts of optimisations going on and things that don't need to be rendered aren't so it might not know where to scroll to exactly.

Hey, so i worked on it a bit bc i wanted to learn what i was doing before responding. I wanted to at least setup the api directly first. So far, i have it connected to https://sheets.googleapis.com/v4/spreadsheets/{Sheet-ID}/values/{Sheet-Name}?valueRenderOption=FORMATTED_VALUE&amp;key={API-Key}, but it doesn't seem to be producing the correct output when i use it in conjunction with the code provided here, https://reactnative.dev/docs/network. I was wondering why that is? Console.log gives the correct output, so is it just some formatting issue?

Desktop and mobile apps are often built with other, lower level languages than HTML/CSS/JS, but there are now ways to make desktop and mobile apps with HTML/CSS/JS. See Electron and React Native

https://www.electronjs.org/

https://reactnative.dev/

I realize this is an older post now but wanted to share for anyone else finding this thread. I would say Facebook remains committed to the future of React and React Native.

https://reactnative.dev/blog/2021/08/19/h2-2021#messenger-desktop

I am using version 0.63.4, and I am compiling it in the terminal with "./gradlew bundleRelease" like in the React Native https://reactnative.dev/docs/signed-apk-android. I already did all the signing process steps before

You would not normally use java such as view-models. You may need to run 'yarn run android' (or something similar, the command will be inside your package.json file) to generate the android files. You can integrate java into your react native app, some info in the docs here:

https://reactnative.dev/docs/native-modules-android

But yeah, with react native you'd be working mostly with Javascript.

If the goal is to leverage your Javascript, node, and maybe React knowledge for desktop development, then I would be more inclined to suggest React Native.

React Native will create a much leaner application without as much bloat as comes with the Electron runtime.

React Native apps are written slightly different than React apps. However, React Native apps can also be deployed as web apps. If your intent it to write a cross-platform app, I would start with React Native, and perhaps later replace the native form elements with html elements for the web version.

Similar products include Apache Cordorva, Vue React, and NativeScript.

Looks like it doesn't.

> In most cases, React Native will use JavaScriptCore, the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.

Apparently it uses some other jit-less method.

A few more simple apps that use RN because they don't need anything complex:

- Facebook
- Facebook Ads Manager
- Facebook Analytics
- Instagram
- Oculus
- Shopify
- Tableau
- Flipkart
- Skype
- Pinterest
- Uber Eats
- Walmart

https://reactnative.dev/showcase

Hello

Typescript -> React -> RN (imho) is the best path to follow.
I'm a noob/junior RN so wil reply what I know, what I've read/seen

1. https://reactnative.dev/docs/performance
2. Maybe. But with flutter you have to learn a new language (Dart) from scratch. And I've read it is difficult to customize its widgets (components)
3. I hope there's a lot more future of RN
4. I see RN is continuously in development. I've suffered important changes in components from version to version. I tried to reuse some components (eg. rn navigator) from 2020 project which now don't work due to changes

But I still love RN

You can debug you app in the browser even if you have enabled hermes.
Follow this instruction: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

You won't be able to see the network requests though.

Well you can run any java or swift code on react native by using native modules, and apparently pythorch supports both android and ios, so this should be doable.

But as you might expect, your swift code will only work on iOS and your java code will only work on Android, so RN might end up not being all that useful on a project like this.

Can you given an example of what data do you want to secure?

The best security advice is not to store any sensitive data locally if possible.

Android Keystore and Apple Keychain services are right choice to save / persist sensitive information online. (tokens and encryption keys)

If you need to secure large amount of data on device, Encrypt the data / database and use keystore / keychain to store your encryption keys

To secure API calls from MITM attacks, check how to do SSL pinning.

Most of these details are mentioned in ReactNative guide for Security here.

Original but deprecated package : https://reactnative.dev/docs/segmentedcontrolios

Use one of the community packages instead : https://reactnative.directory/?search=segmentedcontrol

hey! I would suggest you to take a look at the native module guide on the react-native docs. Give a try to implement a native module with your desired script (it's possible to write native module with swift too). Maybe you should also implement an event listener which will emit events to your react-native app (js thread) on every clipboard change. Good luck! https://reactnative.dev/docs/native-modules-ios

I use reanimated v2 in production and it works great. The difficult part of using reanimated has been updating through alphas and API changes, but I think it's stabilizing now.

Anyway, read Caveats in the docs which explains the limitations of using the native driver with the build in Animated api.

Use pixelratio. https://reactnative.dev/docs/pixelratio

Which returns you pixel density multiplier for given screen. So, say, you have an image component, width 200; height 150 and current pixelratio is 3x, then you need to fetch a 600w and 450h for that component.

Assuming that you already have a job and some skills other than programming, it really depends on how many ideas for apps you have:

1. Just one: probably it's not good but just the first, keep thinking.
2. About 10: one might be good. Choose the best, think it through, compare with the market, make numbers, and hire someone, if you see it will pay off.
3. More than 100: learn to code to make PoCs, test your ideas, and develop the best ones. Possibly, you will not be developing them alone anyway.

For point 3: Python is probably not the best language for an app. It may be a good language for learning to program. However, if you are thinking of apps, you are going to have a hard time translating Python to apps. I would take whatever you know about Python and use it as a base to start with something more app-oriented. Personally, I would go for this: https://reactnative.dev/ It's not the best for final results but it's quite versatile for prototyping and getting started.

Hey,

Yeah it's possible to make what your are wanting but you'll need to use the Pressable props and state variables once it will change some values in the style during the runtime. If you take a look in the docs (https://reactnative.dev/docs/pressable), it will be more clear what are this props and how to get types of interactions to change some values in the style.

Hope this helps, good luck!

In react native you use Stylesheet.create and use object notation. For media queries you can import useWindowDimentions to swap styles based on size.

https://reactnative.dev/docs/usewindowdimensions

Also percentage based widths and heights and flex values help make things look good on across different screen sizes

Last time I checked axios uses XMLHTTPRequest to send the actual request. This class has some native implementation in your React Native project, which in it's turn sends the actual request. Check out the React Native networking docs for more.

Isn't this CRNA generated with Expo? I have generated my project with just a react-native without Expo because I have planned to include a library that Expo does not support.

I followed the React-native CLI of the official site:

https://reactnative.dev/docs/environment-setup

A greenfield React Native app likely won't have to use much Native functionality - the community is large, and there are many existing React Native libraries that handle this.

Hardcore gaming or performance intensive interactions - will benefit from the control and better performance offered by native, compiled code.

You need to have some understanding of iOS Pods and Android Gradle in order to install libraries and setup a build.

Conversely, if you're integrated React Native into an existing native app - that will require much more native code to integrate native + React Native cohesively.
https://reactnative.dev/docs/communication-ios