All Questions
Tagged with react-native react-hooks
3,891
questions
232
votes
14
answers
344k
views
What is useState() in React?
I am currently learning hooks concept in React and trying to understand below example.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call &...
- 33.7k
227
votes
20
answers
434k
views
How can I force a component to re-render with hooks in React?
Considering below hooks example
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<...
- 33.7k
160
votes
10
answers
224k
views
How to register event with useEffect hooks?
I am following a Udemy course on how to register events with hooks, the instructor gave the below code:
const [userText, setUserText] = useState('');
const handleUserKeyPress = event => {
...
- 12.7k
97
votes
5
answers
69k
views
Storing non-state variables in functional components
Below are two React Components that do almost the same thing. One is a function; the other is a class. Each Component has an Animated.Value with an async listener that updates _foo on change. I need ...
- 1,997
84
votes
5
answers
129k
views
Where can I make API call with hooks in react?
Basically we do API calls in componentDidMount() life cycle method in React class components like below
componentDidMount(){
//Here we do API call and do setState accordingly
}
...
- 33.7k
81
votes
8
answers
88k
views
useEffect not called in React Native when back to screen
How are you.
This is scenario of this issue.
Let's say there are 2 screens to make it simple.
enter A screen. useEffect of A screen called.
navigate to B screen from A screen
navigate back to A ...
- 5,077
70
votes
6
answers
119k
views
react-navigation: Detect when screen, tabbar is activated / appear / focus / blur
Perviously when I wanted to make some actions when screen is opened I put them inside componentDidMount. For example I can fetch some data.
like this.
componentDidMount() {
this.updateData();
}
...
- 3,646
58
votes
3
answers
73k
views
What’s the difference between useState and useEffect?
I have seen these two new concepts introduced in react v16.
As per my understanding:
useState is similar like setState with hooks and useEffect works similarly like life cycle methods.
Is my ...
- 33.7k
48
votes
5
answers
149k
views
How to prevent re-rendering of components that have not changed?
I have a component that consists of several other components such as text fields, and when an input is made to the text field, all other components are re-rendered.
I would like to prevent the re-...
- 1,941
44
votes
2
answers
26k
views
React Hooks Const Component vs Functional Component
I understand the difference between a functional component and a class component, but what's the difference between const component to a functional component?
e.g
const Home = () => {
return (
...
- 537
35
votes
3
answers
64k
views
How can I bind function with hooks in React?
Basically we bind event handler functions in constructor or make them as arrow functions in React class components like below
class Test extends Component{
constructor(props){
super(props);
...
- 33.7k
33
votes
1
answer
13k
views
TypeError: Component is not a function on adding forwardRef
Hi I was trying to add forwardRef to a child component but getting the following on adding the forwardRef:
TypeError: Component is not a function
The component is defined as below:
import React from '...
- 806
33
votes
3
answers
137k
views
How to setInterval for every 5 second render with React hook useEffect in React Native app?
I have React Native app and I get data from API by fetch. I created custom hook that get data from API. And i need to re-render it every 5 seconds. For it I wrapped my custom hook to setInterval and ...
- 1,824
25
votes
3
answers
27k
views
React Native onLayout with React Hooks
I want to measure the size of a React Native View every time it renders, and save it to state. If element layout didn't change the effect should not run.
It's easy to do with a class based component,...
- 3,104
23
votes
5
answers
20k
views
Event-driven approach in React?
I'd like to "fire an event" in one component, and let other components "subscribe" to that event and do some work in React.
For example, here is a typical React project.
I have a ...
- 8,229
23
votes
4
answers
6k
views
How to create a custom hook that recives dependencies?
I'm making a custom hook that have a toogle when some state change.
You should be able to pass any state in an array.
import { useState, useEffect } from 'react'
const useFlatListUpdate = (...
- 30.6k
22
votes
8
answers
15k
views
react-native-testing-library: how to test useEffect with act
I am using react-native-testing-library to test my react-native component.
I have a component (for the purpose of this post, it has been over simplified):
export const ComponentUnderTest = () => {
...
- 5,196
20
votes
5
answers
79k
views
how to set state array using react hooks
Thanks in advance.
I have a state array as below.
I need to add an item to state array, I came across that we need not do state mutation. How do i set state with prevState.
const [messages, ...
- 1,090
19
votes
4
answers
27k
views
Remove bottom border of header in React Native using useLayoutEffect hook
I want to remove the faint border from the bottom of the header in React Native. I'm using useLayoutEffect() hook to modify the header but unable to remove the border. I've tried using ...
19
votes
4
answers
17k
views
How to use lifecycle methods with hooks in React?
I have gone through hooks introduced in react v16.7.0.
https://reactjs.org/docs/hooks-intro.html
So my understanding about hooks is we can play with state in functional component without writing ...
- 33.7k
19
votes
4
answers
13k
views
Better way to use multiple context providers in ReactNative
I am having an app in which I am using 3 Context Provider. For the app to work, I have to wrap <App/> in all these providers. As my app grows I am expecting to have a few more providers for ...
- 17.7k
19
votes
2
answers
16k
views
Cannot read property 'handleReset' of undefined
I am using useFormik hook in my react native project
So i try to initialize useFormik in my another component and then import it in my Signup page and use here.Here is the code below.
import React ...
- 1,568
18
votes
2
answers
7k
views
Do we still need functional setState way in react hooks?
const [count, setCount] = useState(0);
const handleClick = () =>
setCount(prevCount => {
return prevCount + 1;
});
const [count, setCount] = useState(0);
const handleClick ...
- 12.7k
18
votes
3
answers
45k
views
UseState shows previous value always [duplicate]
This is a popular question among all the new react developers but somehow I'm not able to understand the logic behind available solutions. I'm trying to update the state variable using hooks and ...
- 304
16
votes
3
answers
19k
views
How to pass parent function to child screen in React Navigation 5?
Recently I have started using React Native 0.61.5 and React navigation 5.x. Now I need to pass a parent function into a child screen. For example, I want to change navbar icon by pressing button in ...
- 2,521
16
votes
7
answers
27k
views
How to apply custom fonts to whole project, Expo React Native
I'm new to React and those languages. Trying to apply a custom google font(Ubuntu) to whole project. I managed to pull the font into the project, but I can only use it in simple texts in App.js. Like ...
- 161
16
votes
1
answer
8k
views
React navigation didfocus event listener works differently between class component and functional component
When I transition to this screen, it will do some API calls to fetch the latest data. But it seems not trigger the didFocus event to fire the api calls when I transition from another navigation stack ...
- 221
14
votes
4
answers
33k
views
React-Native Add Fade in Animation
I am trying to make this card fade in every time the component loads and fade out after it unmount's using hooks but I am failing to do so and desperately need someones help. Please can you show me ...
- 478
14
votes
3
answers
17k
views
How to wrap the initialisation of an array in its own useMemo() Hook?
Can someone please give the solution to this warning message?
137:7 warning The 'slider1' array makes the dependencies of useEffect Hook (at line 143) change on every render. To fix this, wrap the ...
- 169
14
votes
1
answer
15k
views
How to use forwardRef with FunctionComponent in React Native using TypeScript
I've looked at many of the docs and examples but I still can't seem to quite understand how to use forwardRef with a functional component with TypeScript in React Native. Below is an example where I ...
- 663
14
votes
1
answer
22k
views
How can I attach a ref to a component that i am copying using React.cloneElement
hey all I want to pass in a ref into my component this way I can access the variables on said compenent like state. only issue is i can't seem to get it to work. It needs to be able to work for both ...
- 425
13
votes
3
answers
7k
views
call custom hooks conditionally react
I defined a custom hook to do some operations and calling some APIs like below
const useCustomHook = (param1,param2) => {
const response = callAPI(param1, param2 ){ .... }
return [...
- 4,470
12
votes
1
answer
9k
views
FlatList scrollToIndex using useRef with Typescript - Type Error
I am working with FlatList and I want to create one ref to be able to scroll the FlatList when pressing one button.
The thing is that I am using Typescript and I am having one type error that I am not ...
- 914
12
votes
4
answers
14k
views
How can I initialize a class instance in a stateless function component in React?
Using a stateful pattern, I usually initialize a kind of helper class in my constructor and consume its methods in some component lifecycle methods like below:
class StatefulComponent extends ...
- 1,033
12
votes
4
answers
18k
views
React Native DateTimePicker not Opening in IOS
Datetime Picker is not opening
i'm using react-native with react-hooks, in Android works fine . but its not opening in IOS and not showing any error.
i just created local component for datepicker so ...
- 324
12
votes
1
answer
3k
views
React-Native Invalid hook call for Flat List Render Item
So i have a react-native flat list where i use hooks in each FlatList renderItem, something like this,
export const RenderEntityList = (props) => {
const { entityList } = props;
const ...
- 2,354
12
votes
4
answers
21k
views
How can I pre initialise state with hooks in React?
Basically in class components we pre initialise state in constructor with initial values like below.
constructor(props){
super(props);
this.state = {
count: ...
- 33.7k
11
votes
3
answers
15k
views
How to ensure a constant inside a component is only calculated once on start in React (Native) with hooks?
I am currently creating a React Native app and still am unsure about how to best handle states for my use case.
I use react-native-svg to create a rather complex figure in the app, which is stored in ...
- 1,280
11
votes
8
answers
17k
views
Unable to reach expo servers
Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json) from the package "expo" installed in your project.
- 111
10
votes
1
answer
13k
views
"Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
I'm using React's hook and I want to have a value that is retrieved from the database as the initial value. However, I'm getting the following error:
Invariant Violation: Invariant Violation: ...
- 3,993
10
votes
3
answers
19k
views
How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form
I know we can do this easily with react class method.because we have this.ref.
but I am not sure how to do this with useRef hook in functional component.
using tricks written here
This is how I am ...
- 2,970
10
votes
2
answers
18k
views
Flatlist scrollToIndex with Hooks useRef
Im trying to scroll to the middle of my data in flatlist using React Hooks and the method scrollToIndex but i cant make reference to it. I achieved that with class using something like ref={...
- 335
10
votes
2
answers
29k
views
Passing array of React components to useState returns empty array
Very simple code here. I'm wondering if this is the expected outcome. I'm upgrading an npm module and it requires I pass these items to useState which was not previously necessary. Unfortunately, I ...
- 12k
10
votes
2
answers
3k
views
How to setParams using useEffect and avoid getting infinty renderings?
I'm using react-navigation and I have a dynamic header, so I'm using setParams and getting it in the title.
const MyComponent = ({navigation}) => {
useEffect(() => {
const { ...
- 30.6k
10
votes
1
answer
2k
views
useWindowDimensions returning wrong height
I'm having problems with the useWindowDimensions hook in react-native returning a height that is way too small. The height it gives me is 36 pixels, while I know my actual screen height on the device ...
- 101
10
votes
2
answers
5k
views
How to use react-native-action-sheet with hooks
I'm trying to use https://github.com/expo/react-native-action-sheet in a functional component using the provided hook useActionSheet(). I'm already using the class components version without any ...
- 103
9
votes
4
answers
9k
views
React native animation => new Animated.Value() with useState or not?
What is the best way to use Animated.Value () in react-native ?
With useState() or not ?
const [fadeAnim] = useState(new Animated.Value(0))
Or
const fadeAnim = new Animated.Value(0)
React-native ...
9
votes
1
answer
8k
views
useCallback Hooks getting old state values and not updating
My Callback returning same state after calling it again and again
i am new to react hooks in react classes i could have used shouldcomponentupdate and could have solved this issue
but there isn't ...
- 155