Click here to Skip to main content

Submit your article

React Native

react-native

Great Reads

Supporting the Lost Animals Search Service Through a Simple and Useful Mobile App

by André Marcos (Advisor), GracianoSouza

React Native, Node.js and PostreSQL, a PERN stack to develop an app to support the lost pets searching process

How to Close a React Native Modal with a Button

by Cindy Potvin

Add a close button to a React Native and close the modal by clicking beside it.

React-Native FileManager Component with Firebase Storage

by D_Gregorian

How to create a React-Native (iOS & Android) FileManager with Firebase Storage

An Integrated Mobile Application to Control and Management Gym Personal Activities with PHP Ecosystem and React Native

by André Marcos (Advisor), Renan Cardoso

Developing a solution to help user and personal trainer, to control and to track personal activities in a gym supported by a simple and integrated app with PHP ecosystem and React Native and Postgre database.

Latest Articles

BookCars - Car Rental Platform with Mobile App

by Akram El Assas

Car Rental Platform with a mobile app

Movin' In - Rental Property Management Platform with Mobile App

by Akram El Assas

Rental Property Management Platform with a Mobile App

Visualizing Your Photos on a Map with React Native

by Bohdan Stupak

Samples from the application that displays photos location on a map

How to Parse External Classes and js in react-native as a Package

by Alen Toma

Generate and execute external full js code in react-native and nodejs

All Articles

React Native

A post method is working fine with postman but not working in react native and getting error code 400, from ASP rest api

31 Aug 2022 by nityanand NCR

A post method is working fine with Postman but not working in react native and getting error code 400. The api working from asp rest api. I have tried this code. What I have tried: const formData = new FormData(); formData.append("file",...

An Integrated Mobile Application to Control and Management Gym Personal Activities with PHP Ecosystem and React Native

5 Oct 2021 by André Marcos (Advisor), Renan Cardoso

Developing a solution to help user and personal trainer, to control and to track personal activities in a gym supported by a simple and integrated app with PHP ecosystem and React Native and Postgre database.

AVD showing only "android" in emulator

17 Mar 2019 by Richard MacCutchan

See Create and manage virtual devices | Android Developers[^].

Bind data to flatlist from Microsoft SQL

4 Mar 2022 by Poonam Sharma 2022

I am new in React Native and my database is connected with Microsoft SQL. Now I want to bind data from Microsoft SQL Server to FlatList in React Native. Here is my code. Please help. What I have tried: import { StyleSheet, Text, View } from...

BookCars - Car Rental Platform with Mobile App

5 Apr 2024 by Akram El Assas

Car Rental Platform with a mobile app

Countdown timer with reset functionality in react

1 Jun 2022 by kelle1869

I have a countdown timer set at every second. Every time I would reset the counter and choose another period to countdown, the previous timer keeps counting and will have multiple timers in the background. I tried to reset the timer. How can I...

Create a bible app REACT NATIVE

7 Oct 2021 by Member 15344769

i want to create a bible app with react native in which the user can select book chapter verse and read the bible and search its verses i do not know how to do it but for example the bible is in a document .doc format or .txt format and each...

Create a bible app REACT NATIVE

7 Oct 2021 by Richard MacCutchan

It has been done many times, for example https://www.bible.com/en-GB[^]

Dark theme does not get apply to webview for react native android app

22 Oct 2020 by Vicky Fadia

Dark theme is setted up correctly for React Native expo app and works correctly everywhere but when I switch it on the theme changes to dark everything works perfectly except the web view. How to make the webview part convert into dark theme on...

Display data from API database with flatlist

21 Mar 2021 by Member 15111703

export class Diet extends Component { constructor(props) { super(props); this.state = { data: [], fullData: [], loading: false, error: null, query: "", }; } async componentDidMount() { ...

Display XML using fetch and xml2js as listitem.accordion

29 Nov 2022 by MohammedZr

i'm trying to get this xml data from sql database using fetch and then parsing it using xml2js package to a list called meterData after that i want to insert the xml data to an react native element ListItem.Accordion so far this is my code, the...

Display XML using fetch and xml2js as listitem.accordion

29 Nov 2022 by Afzaal Ahmad Zeeshan

Two things in your exception: Quote: Unhandled promise rejection This can be resolved by wrapping your code with a try...catch block that will help you capture the exception and check the details. When working with exceptions, it is always...

Experiencing slow data fetching in react native with firebase: how to optimize performance

13 Aug 2023 by Mohamad Shoumar

I've built a small mobile app using React Native (Expo) with Firebase. The app allows users to view their portfolio, transactions, PNL, etc. However, I'm facing an issue where fetching data from the database is taking an excessive amount of time....

Function components cannot be given refs with react-native-rich-editor on expo

21 Jul 2022 by Myrmelo

I am trying to use this package : https://www.npmjs.com/package/react-native-pell-rich-editor And I have the following code : import { useState, useRef } from "react"; import { RFPercentage } from "react-native-responsive-fontsize"; import...

Hello. Please I am having an issue with firebase data modelling and really need a help.

15 Aug 2022 by Muniru Dreamer

I want users to be able to join a specific group by clicking on a "Join Group" button located at the particular group's screen. I've created a member model in firestore where I wrote the below code but it does'nt work. What I have tried: ...

How can I pass a image data from react native to PHP code on server side

1 Dec 2022 by Rilesh Patel

I am uploading images using react native. and my API is on php based. when i am testing my API using Post Man it works perfectly. but when I pass an image from react-native app. it show me an error like "[SyntaxError: JSON Parse error: Unexpected...

How can you assign a variable to an image component, which can be read later in react native?

29 Mar 2021 by patty2904

Does someone know how to make it so that whatever image is clicked on, the modal data will show the correct data? My idea was to assign a value to the image component but I can't find anything helpful online. Thank you so so much in advance! ...

How do I add a marker in mapbox using react?

10 Sep 2021 by Eduardo Moraes Rigo

Hello, i'm coding an app and i'm having some issues adding an marker to the map, i'm using React and Mapbox to do it, here's the part of the code: import * as React from "react"; import { useRef, useEffect, useState, useContext } from...

How do I build a frontend for my opencv. My aim is to solve a rubik's cube and run the project in a browser window.

3 Sep 2021 by Manas Sharma 2021

I am building a python project using opencv and kociemba library, the aim is to solve a rubik's cube. It would take the 6 faces of cube as input and produce the instructions to solve the cube as output. However, I want to encase my project to run...

How do I build a frontend for my opencv. My aim is to solve a rubik's cube and run the project in a browser window.

3 Sep 2021 by Gbetnkom Jeff

If you are considering a Web application, you can look through Flask. It's a great way to combine front and back.

How do I call a react native app from react app

30 May 2022 by pathum hewage

I want to call a react native app from react app. I don't have clear idea about it. Actually I want to run a react native code in react app. Can I know is the react native web view is support to this task.This the code what i want to run in react...

How do I fix support for the experimental syntax 'decorators-legacy' isn't currently enabled error in react native expo

29 Oct 2020 by victor senanayaka

I'm trying to run my react native app Quote: This is the error I'm getting when i run"npm start" on cmd Error Expo Press ? to show a list of all available commands. SyntaxError: F:\PROJECT ONE\apptest-expo\src\components\PostList\index.js:...

How do I fix support for the experimental syntax 'decorators-legacy' isn't currently enabled error in react native expo

29 Oct 2020 by Richard MacCutchan

https://medium.com/@patrickjbradley/support-for-the-experimental-syntax-decorators-legacy-isn-t-currently-enabled-f69206bade39[^]

How do I merge the function into the component

14 Jul 2022 by kkongkk

I want to put the 'home' function into 'Header', however I have no clue how to without breaking it. I am trying to welcome a user who logs in via Google their name and profile pic with a message... I am trying to get rid of the Home function,...

How do I merge the function into the component

15 Feb 2022 by Andre Oosthuizen

Remove your Home constant completely, use the div inside your header as you are already making a call to "user" there, something like this (you need to play with it as I have no idea what end result you require) - function Header() { const...

How do I pass a response data I am getting back from createasyncthunk in redux toolkit to a component ?

14 Feb 2023 by geomukkath

This might sound like a noob question but I need some help here: ``` export const loginUser = createAsyncThunk( 'users/login', async ({ email, password }, thunkAPI) => { try { const response = await fetch( ...

How do I pass a response data I am getting back from createasyncthunk in redux toolkit to a component ?

14 Feb 2023 by Andre Oosthuizen

These might help - How to Pass Data and Events Between Components in React[^] Using Context to pass data[^] How to Pass Data from Child to Parent in React[^] a Snippet from the last link - While there is no direct way to pass data from the...

How do I solve this error: "invariant violation: requirenativecomponent: "rnsscreenstackheaderconfig " was not found in the uimanager"

4 Feb 2023 by Darzee The Great

I am learning React Native, and currently at React Navigation. I've followed all the steps from the docs (https://reactnavigation.org/[^]) but I keep getting this error: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig "...

How do I solve this error: "invariant violation: requirenativecomponent: "rnsscreenstackheaderconfig " was not found in the uimanager"

4 Feb 2023 by OriginalGriff

Start Here: ERROR Invariant Violation: requireNativeComponent: “RNSScreenStackHeaderConfig” was not found in the UIManager.[^] - apparently there is no "one solution fits all".

How to Close a React Native Modal with a Button

11 Sep 2021 by Cindy Potvin

Add a close button to a React Native and close the modal by clicking beside it.

How to configure version 9.19.1 firebase in react-native?

14 Apr 2023 by Gcobani Mkontwana

Hi Team I am developing a react-native, but i am experience some length error problem with my firebase version. How do i configure this version in react-native? What I have tried: // Import the functions you need from the SDKs you need import...

How to create cards in a form using react-forms?

19 Jun 2022 by Gcobani Mkontwana

Hi Team I am struggling to create cards in react, i want my form to have 3 cards, one left, one right and other center. What I have tried: /** * All the stylesheet for the application *@author:Gcobani Mkontwana @date:14/06/2022 */ * { ...

How to detect screen orientation change in react native?

28 Jan 2021 by Member 15058718

I'm using 'Video' from 'expo-av' to display my videos. My goal is to display the video depending on the Orientation of the device of the user. I'm using 'ScreenOrientation' from 'expo-screen-orientation' so i can detect the rotation using the...

How to fetch image using api react native

18 Jun 2019 by Member 14504362

//my fetchID is working fetchID = async () => {) fetchPhoto =() => { fetch('http://127.0.0.1:8000/api/photo/' + this.state.user_id.id, { method: 'GET', headers: { "Accept": "application/json", 'Content-Type': 'application/json', } }) ...

How to get a selected value from the <googleplacesautocomplete> in react native and POST it to the API

8 Feb 2021 by Member 15067760

const GooglePlacesInput = () => { const [city, setcity] = React.useState(''); useEffect(() => { console.log() }) const onRequestTagClick = async () => { const token = userSession.getAccessToken(); const requestData = { ...

How to give information about where the diseases and insects are in the crop by clicking the photo.

6 Nov 2023 by Yashvi Moradiya

I am developing an application for a project in React Native for which I need the following. What I want to do in this code is that when a photo of a crop is clicked from the camera, by analyzing that photo, the information about where the...

How to give information about where the diseases and insects are in the crop by clicking the photo.

28 Oct 2023 by Pete O'Hanlon

You have a lot of hard work ahead of you. You will need to incorporate a library capable of working with object detection and use that. You are probably going to have to train your own detection model. Getting started with object detection in...

How to make sure that the value of a setstate variable is undefined when passing it as a parameter?

29 Sep 2021 by nruizjr

Using react native, I wanted to pass cookBooks to another screen. I can confirm that cookBooks was updated inside useEffect. But when I pass it as a parameter to another screen, no data was passed. interface IBook { userId?:...

How to nest bottom tab navigator, stack navigator and drawer navigator in react native?

22 Jul 2022 by ONKAR MEHRA

I have been trying to nest stack navigator inside bottom tab navigator and which has been nested into drawer navigator. In terms of nesting, bottom tab navigator is at the top, then bottom tab navigator and then at the end stack navigator. I have...

How to nest bottom tab navigator, stack navigator and drawer navigator in react native?

22 Jul 2022 by Member 15714599

You have good approach but the problem is that we can not use these navigations from React but instead we can use Flux one.

How to open a PDF using react-native-openanything in react-native?

8 Dec 2021 by harshitp tecogis

Problem: I wish to open pdf saved in internal storage of the phone but its giving me an error as Possible Unhandled Promise Rejection (id:0). Package used: react-native-openanything What I have tried: import React from 'react'; import { ...

How to open camera in row when click on row.

24 Oct 2023 by Yashvi Moradiya

I want to create an app in React Native in which I want to open the camera in a row. When I click on the green row, the camera should open and the photo should click. I want to do it this way. What I have tried: // YourCropScreen.js import...

How to open camera in row when click on row.

24 Oct 2023 by Pete O'Hanlon

If you want to hook up to a web camera in React, I would suggest that you start by looking at Using React Webcam to capture and display images - LogRocket Blog[^]. This blog details the various things that you can do with the following npm...

How to Parse External Classes and js in react-native as a Package

5 Sep 2022 by Alen Toma

Generate and execute external full js code in react-native and nodejs

How to pass flat list item data to another screen's textinput

26 Nov 2021 by RajaAl12

I am able to pass screen1 flatlist data (props) to screen2, but what i want is the data to be inside screen2 TextInput. Screen1 export default class Data extends Component { constructor(){ super() this.state={ ...

How to pass json object to another activity in react native

11 Apr 2020 by Aitzaz Ahsan

On the submit button, I am calling one API after successfully run I want to send data to another activity in the react-native. I tried following source code, I am a newbie in react-native. What I have tried: On submit I am calling this...

How to use href link in react ?

11 Apr 2023 by ramweb12345

How to use href tag using const in react. I tried below code but getting html code also. I want display only text message� const ExpiredMesaage�= � 'Your session has expired. Please login again via

How to use href link in react ?

11 Apr 2023 by Afzaal Ahmad Zeeshan

That is a plain string, so React will render it on the DOM as it is. You can render the hyperlink inside a paragraph. Use this: const ExpiredMesaage = Your session has expired. Please login again via

I have an error that says render error text string must be rendered within a text component.

26 Feb 2022 by Kiddo 2022

import React, { createContext, useContext, useEffect, useState } from 'react' import { Text } from 'react-native'; import * as Google from "expo-google-app-auth"; import { GoogleAuthProvider, onAuthStateChanged, signInWithCredential, ...

I need to find a full stack developer for my team

9 Oct 2020 by Richard MacCutchan

Quote: Any tips on how to find people? Do what everyone else does and pay for advertising.

Internal server error 500 axioserror {message: 'request failed with status code 500', name: 'axioserror', code: 'ERR_BAD_RESPONSE', config: {…}, request: xmlhttprequest, …} code : "ERR_BAD_RESPONSE"

24 May 2023 by tan25

import React, { useState, useEffect } from "react"; import { useLocation, useNavigate } from "react-router"; import axios from "axios"; import "./BillingModule.css"; const BillingModule = () => { const [expenses, setExpenses] = useState([]); ...

Introducing node.data.obfuscator

10 Aug 2022 by Alen Toma

This library is built so that you could secure JSON or string data in JS files. The library will shuffle the data in memory and make it unreadable for the naked eye.

Is it possible to call a firebase function onvalue() in another onvalue() if yes how

22 Sep 2022 by Senzaki

technologies used: React Native / Expo / Firebase I explain to you, I recover a list of key with my first onValue, in this one I forEach for each key and in this one I make another onValue in order this time to recover the information of the...

Jest giving error on test suits due to syntax error at import

15 Dec 2023 by Nathalie Olcese

I wan jest to do unit tests with jest and typescrip/react but my test fails because says there are syntax errors in my imports. This is my jest.cinfig.ts file and babelrc file { "env": { "test": { "presets": [ [ ...

Jest giving error on test suits due to syntax error at import

7 Mar 2024 by Pete O'Hanlon

To import the Jest configuration, you need to use import type { Config } from "@jest/types"; Jest features sit under @jest, not jest.

Marker not moving on map even after rerendering

5 Jun 2021 by Member 15232748

Hi! I am fetching coordinates from my database every 5 seconds, and my marker is dynamic,This is my render method console.log('render'+this.state.driverLocation.latitude +' '+this.state.driverLocation.longitude); let marker = null; ...

Mobile app framework for UBER kind of mobile app development

9 Aug 2023 by Richard MacCutchan

See Cross-Platform Mobile Development in Visual Studio | Microsoft Learn[^].

Mobile app framework for UBER kind of mobile app development

9 Aug 2023 by Uwakpeter

We are about to start working on a mobile app project that is similar to **UBER drivers and passengers apps**, We are not certain about the mobile app framework to use that would give us all the functionalities with **a single code-based for...

Movin' In - Rental Property Management Platform with Mobile App

5 Apr 2024 by Akram El Assas

Rental Property Management Platform with a Mobile App

My textinput disappear when I sart taying

30 Oct 2021 by houcin olmostaf

I have screen named EditeScreen .it has text input that takes the height of the device . so the problem is when I start typing the text goes above and disappear. any solutions please here is my Text Input component

My textinput disappear when I sart taying

30 Oct 2021 by Member 15413342

paddingBottom is whats pushing your texts upwards. Change the value to maybe 10, and see if it helps

Npm start not working

1 Jan 2023 by Bharti Saiinii

> react-lap@0.1.0 start > react-scripts start npm ERR! code ENOENT npm ERR! syscall spawn pwsh.exe npm ERR! path C:\Users\Administrator\Documents\frontend\react\my-app npm ERR! errno -4058 npm ERR! enoent spawn pwsh.exe ENOENT npm ERR! enoent...

Npm start not working

1 Jan 2023 by Richard MacCutchan

enoent spawn pwsh.exe ENOENT At a guess, npm is trying to run Powershell (the cross-platform version), but you do not have it installed. However, you need to check the complete log file as indicated in the error messages above.

Proper way on how to install and add an audio file in react native?

13 Dec 2019 by Psoba

I need a proper installation and the source code for adding an audio in react native for a mobile application What I have tried: I’ve installed the npm install --save react-audio-player but it doesn’t work.

Proper way on how to install and add an audio file in react native?

13 Dec 2019 by Richard MacCutchan

Sorry, but this site does not provide code to order. And the expression "but it doesn’t work" tells us nothing that would lead us to suggested solutions.

Proper way on how to install and add an audio file in react native?

13 Dec 2019 by Afzaal Ahmad Zeeshan

Quote: I’ve installed the npm install --save react-audio-player but it doesn’t work. It would not work on its own. You have to configure the project to run properly, and also make sure that you are using the valid file types. This package react-audio-player uses the native tag to...

React native - initiating viber and whatsapp voice calls and capturing call time

23 May 2023 by saiche nouh

I am developing a React Native app that requires two buttons: one to initiate a Viber free voice call and another to initiate a WhatsApp voice call. I have tried multiple packages in React Native, including creating a native module in Java using...

React native [0.66.4][android] - direct local .aar file dependencies are not supported when building an AAR

26 Apr 2022 by Shubham Bisht 2022

Hi everyone, I'm new to this community. I'm stuck on a problem which is related to Android, and I'm working on react-native. Below is the link to question I've asked on stackoverflow, can someone please help me. React Native [0.66.4][Android] -...

React native [0.66.4][android] - direct local .aar file dependencies are not supported when building an AAR

26 Apr 2022 by OriginalGriff

No. If you want to ask a question here, ask the question here, niot "please go to SO and answer my question". I don't contribute to SO because I don't like the attitude there (and I'm not alone in that) so I for one am not interested to...

React native element type is invalid: expected a string skeleton placeholder package

21 May 2022 by MohammedZr

Im Trying to use this package called Skeleton-PlaceHolder in my React Native App i followed installtion steps and i tried both two ways to use this Package but when i run my app i get this [ Render ] error Quote: Element type is invalid:...

React native state inside fetch not updating why?

7 May 2022 by nabeel ahmad 2022

The restaurant data in this code is always null. However I have same code in previous screen working perfectly fine. I dont know why the state is not updating the . May be useeffect is causing problem const...

React native with firebase how can I retrive all the data from spcific collection

12 Sep 2022 by Alya Aljuraywi

but the list is empty i tried to replace the flatlist with {books.map((bb) => { return ( name: {bb.ISBN} ); })} but i...