Stack Overflow
Stack Overflow

Questions tagged [react-native]

React Native is a JavaScript library used to build native mobile apps using React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere.

React Native is an open-source framework created by Facebook that lets you build mobile apps using only and some basic and . It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native apps are not "mobile web apps" or "hybrid apps". They are real cross-platform mobile apps that are indistinguishable from apps built using or . is often used to bring clarity in development.

The idea behind React Native can best be captured by the slogan "Learn once, write anywhere", enabling developers to use the same development approach for both desktop/browser and mobile apps.

Technically React Native runs the JavaScript code for a React app in a background thread. Updates to the virtual DOM are collected, and all changes are sent through an API into the native portion of the app. By doing this, React Native avoids slowing down the FPS rate of the app by not making the app wait for unfinished JavaScript operations.

Resources

Related tags

133828 questions
21
votes
1 answer

FontFamily React Native App overwrite with device custom font (Samsung & Oppo)

In React Native, I define font family for all text with Rubik font but for some devices (SAMSUNG & OPPO), the font looks like overwrite with a custom device font because that brand can choose a custom font for their device. I don't know why…
Endy Santoso
  • 591
  • 7
  • 21
21
votes
6 answers

React Native + React (for web) seed project

Is it possible to setup a project which has code for both React Native(Mobile app) + React(web), having the code shred between platforms except for the UI part. Have done something similar with Angular + NativeScript using this seed, which enables…
Anand
  • 9,672
  • 4
  • 55
  • 75
21
votes
4 answers

Set button in position "fixed" in React Native

I would like set button on the bottom right corner width fixed position in React Native. position: fixed don't work in React Native and stickyHeaderIndices method in ScrollView does not allow to position an element above the others component. Anyone…
s-leg3ndz
  • 3,260
  • 10
  • 32
  • 60
21
votes
5 answers

Remove screen from stack navigator

I’ve observed Back button logic works seeing the sequence of screens in the stack. I’ve a Drawer navigator placed inside stack navigator. On top of the stack I’ve Splash screen. On Dashboard when I press back button it takes me to splash screen.…
devedv
  • 562
  • 2
  • 15
  • 45
21
votes
3 answers

React-Native FlatList performance problems with large list

My code gets Json data to an array lists the data using a FlatList. It looks like a phonebook photo and text in a row. Here is My code: renderItem = ({ item }) => (
bucsy
  • 213
  • 1
  • 2
  • 8
21
votes
5 answers

Android equivalence of iOS ActionSheet

What is the Android equivalence of the UIActionSheet in the iOS SDK? I am working on a React-Native project and need to maintain the use of native controls where possible. I have not come across an npm package or other that makes use of the…
pnizzle
  • 6,243
  • 4
  • 52
  • 81
21
votes
2 answers

Can I delete the tvOS from react native project?

Eventually, I will be submitting a react native app to the app store but the app will only run on iOS, not tvOS. Will I be able to delete these targets and stuff and submit the project with no problem?
Jeebs600
  • 269
  • 2
  • 7
21
votes
5 answers

Render 'no content' component when section in SectionList component is empty

See https://facebook.github.io/react-native/docs/sectionlist.html When one of the Section's is empty (e.a. the data prop is an empty array), I would still like to render the SectionHeader, but also render a component that indicates that the section…
Michiel
  • 956
  • 2
  • 7
  • 19
21
votes
2 answers

Cannot find module 'ReactNative' from 'react-native.js' w/ Jest

I'm attempting to use jest (v20.0.0) w/ my React Native application (v0.42.0) however when I run yarn jest I get the following error: yarn jest v0.27.5 $ jest FAIL __tests__/routing/router-test.js ● Test suite failed to run Cannot find…
Kyle Decot
  • 20,715
  • 39
  • 142
  • 263
21
votes
3 answers

How would you mock 'onPress' within Alert?

I'm able to mock out the Alert to test that it's alert method is being called, but what I really want to test is pressing the ok button within the alert. import { Alert } from 'react-native'; it('Mocking Alert', () => { jest.mock('Alert', () =>…
Anthony Urbina
  • 381
  • 5
  • 12
21
votes
2 answers

How to convert moment date to a string and remove the moment object

I have a React Web App and a React Native Mobile App. When I pass a moment date object from my react web app to my backend, it gets converted to a string somehow and it works with my backend. When I do it with my react native mobile app, it passes…
Kelvin
  • 2,218
  • 4
  • 22
  • 41
21
votes
3 answers

ReactNative FlatList render all items at once?

I'm using ReactNative's new List component - FlatList. It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen. …
Rom Shiri
  • 1,390
  • 4
  • 16
  • 29
21
votes
7 answers

How to return an empty jsx element from the render function in react?

I have a code in react that looks something like this: class UserManagement extends React.Component { constructor() { super(); this.state = { users: undefined, }; } componentWillMount() { …
Yuval Pruss
  • 8,716
  • 15
  • 42
  • 67
21
votes
8 answers

Margin Top for Header Bar in React Native Navigation

I'm new in React Native. I'm using React-Navigation. But, on my device has problem with header navigation. This overlay by status bar like this. This issue occur both on my code and from React Navigation showcase example. How to fix it? Thanks
Pham Minh Tan
  • 2,076
  • 7
  • 25
  • 37
21
votes
1 answer

React Native Negative shadowOffset to create top shadow

I am trying to create a bottom navigation bar like YouTube or Instagram have but I am running into issue creating the shadow effect: This is my current code; shadowColor: '#000000', shadowOffset: { width: 0, height: 0 }, …
Blezx
  • 614
  • 2
  • 6
  • 19
1 2 3
…
99
100