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

top

React Native

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

19 May 2022 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

Android

MongoDB

Node.js

PostgreSQL

mongoose

react-native

React

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.

What cross platform framework to use to build a children's educational app for mobile?

9 Mar 2021 by Richard MacCutchan

See Xamarin.Essentials - Xamarin | Microsoft Docs[^], but you need to be a reasonably experienced programmer.

React-Native FileManager Component with Firebase Storage

18 May 2021 by D_Gregorian

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

Typescript

react-native

React

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

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[^]

react-native

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...

Javascript

react-native

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.

Typescript

react-native

unit-testing

AVD showing only "android" in emulator

17 Mar 2019 by Richard MacCutchan

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

react-native

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', } }) ...

react-native

API

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.

react-native

ReactJS

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

ReactJS

What is unit testing

6 Jan 2020 by Member 14708673

I have a finished project that I submitted yesterday to a client, and this morning he said that he'd like it if I implemented a few Unit Testing Frameworks into the project; Jest for Unit testing : integration of Jest [ Test Runner ] Enzyme [ Container UI Test ] Storybook [ Component UI Test ]...

react-native

unit-testing

What is unit testing

6 Jan 2020 by Patrice T

Quote: I'm new to unit testing so I'm not quite sure how to use these Google is your friend : Unit testing - Wikipedia[^] Quote: and what to use these for It is used to check that your code gives expected results.

react-native

unit-testing

What is unit testing

6 Jan 2020 by Dave Kreskowiak

If you didn't design your code with unit testing in mind, you've got a LOT of work to do to add that capability. You can't just a some uniting module and call it good. Your code has to be written to be testable, and that means writing your code against Interfaces. If you haven't done this, your...

react-native

unit-testing

Share global state using react.createcontext() and react.usecontext

2 Apr 2020 by mailcubano hide

Get global state variable using React.useContext What I have tried: I’m fallowing this approach to create Authentication flow: https://reactnavigation.org/docs/auth-flow/ Everything works fine until I create another functional component in...

react-native

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...

React native: there is way to view the list of the “zone_name” into flatlist from sqlite table?

10 Aug 2020 by Shira fo

There is way to view the list of the "Zone_Name" into flatList that let me also press and choose results of the "Zone_Name" as many i want from the flatlist. this flatlist will be showen only when i press on the "TouchableOpacity" of the "area...

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.

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...

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 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...

react-native

React

React native/typescript - how to manage state in functional component and apply flexible style with flatlist

5 Feb 2021 by Member 15066029

Can anyone tell me how to solve these things? 1.if the list is pressed, I'd like to change the background color of the list beige(#FFF5E7) to white(#FBFBFB) 2.Also, I'd like to change the read value of the Object fales to true with useState ...

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 = { ...

Typeerror: poll.options[option].includes is not a function

11 Feb 2021 by Member 15069828

I am getting this TypeError while posting data to mongodb using nodejs and express , I don't understand why I am geeting this error..! please help..! exports.votes = async (req, res, next) => { try { /** * 1. get the poll from db ...

Typeerror: poll.options[option].includes is not a function

11 Feb 2021 by thatraja

Found these. Array.prototype.includes requires Node 6. Node.js: "Array.includes is not a function" error : learnjavascript[^] Below thread has solution for lower versions javascript - Array.prototype.includes on Node js versions

Regarding Facebook ad deep links

28 Feb 2021 by Member 15086569

I am developing an application integrating facebook sdk in react-native. One of my requirement is to track successful installs from facebook advertisements.For example, I setup an advertisement in which can users can click on Install Now button...

What cross platform framework to use to build a children's educational app for mobile?

9 Mar 2021 by KEEPREADING

I am looking to build a Children’s educational app for alphabets, numbers, phrases, words etc. I want to use a cross platform framework that can create good 2D graphics and animated videos. Could you kindly suggest any cross platform frameworks I...

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() { ...

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 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...

React navigation: navigate from screen to another screen showing previous data

25 Apr 2021 by Muhmmad Nauman

I'm developing a food ordering app using react native and ASP .NET MVC Entity Framework. I've Search screen with date(field) and vendor list(dropdown) and when I click on search button it will navigate to Orders Screen with date and vendor Id as...

react-native

navigation

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; ...

react-native

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 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...

Javascript

react-native

ReactJS

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?:...

ReactJS

react-native

navigation

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

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={ ...

PHP

react-native

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 { ...

Javascript

react-native

Undefined is not an object (evaluating 'navigation.navigate') (device)

29 Dec 2021 by IG Techso

Hi, when I try to click on the image then this error will show:- undefined is not an object (evaluating 'navigation.navigate') (Device) I want to that when I click on the image then details page is open Project URL:- ...

react-native

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...

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, ...

react-native

authorization

REACT-display/hide rows in table via visibilityicon/visibilityofficon

15 Apr 2022 by Zokulko

Hello, I'm new to REACT, I want to hide/display a row if I click on VisibilityIcon/VisibilityiconOff. The icon will be put for each row on the Show column in my table. Here what I have done but when I click on the icon Display VisibilityIcon...

Javascript

react-native

React

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...

Android

react-native

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-video-js-player "no compatible source was found for this media"

12 May 2022 by Ang QiShao Ben

I am working on a product that takes a file from API and read as a blob. But pressing the play button on the video does not work. I have tried using tried using querySelector or a useState variable. All not working. There are no errors as you can...

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:...

Javascript

react-native

ReactJS

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...

Javascript

react-native

ReactJS

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...

Javascript

react-native

ReactJS

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...

react-native

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 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

Node.js

react-native

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...

react-native

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...

react-native

next.js

ReactJS

Sending notifications to specific user with expo - react native

17 Oct 2022 by Rita P

Platform: React Native (IOS target) This is my code: const ProfilesScreen: React.FC = ({ navigation, route }) => { const [expoPushToken, setExpoPushToken] = useState(""); const [notification, setNotification] =...

react-native

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...

Javascript

react-native

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...

Javascript

react-native

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...

react-native

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.

react-native

React native: read card card details with NFC on android 10 or higher

3 Jan 2023 by Member 10802831

I have a requirement of reading Credit Card Details like Card Number, Card Holder Name, Expiry Date, Card Type and CVV(If Possible) in React Native. So if anyone has any solution for this that will be helpful What I have tried: I tried various...

Android

nfc

react-native

React native: read card card details with NFC on android 10 or higher

3 Jan 2023 by Richard MacCutchan

Please read https://www.codeproject.com/KB/FAQs/QuickAnswersFAQ.aspx[^].

Android

nfc

react-native

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 "...

react-native

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".

react-native

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( ...