I'm using React Native and I get this error:
Render Error Invalid hook call. Hooks can only be called inside of the body of a function component...
The problem is, there seems to be nothing wrong with the hook I use (useState), the error says I have a problem at this line:
const [isOpen, setIsOpen] = useState<boolean>(false);
I read the Rules of Hooks but I don't see anything wrong with this.
This is my component:
const GoalCard = (goal: IGoal) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
const btnsOpacity = useRef(new Animated.Value(0)).current;
const initialeCardHeight = goal.deadline != undefined ? 150 : 80
const cardHeight = useRef(new Animated.Value(initialeCardHeight)).current;
const toggleCard = () => {
setIsOpen(!isOpen);
resizeCard();
if(isOpen) {
fadeOutBtns();
} else {
fadeInBtns();
}
}
}
This is where I call toggleCard (in the same file):
const renderDeadline = () => {
return (
<View style={styles.footer}>
<View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Icon name="time-outline" size={28} color="#A0A4BA" style={{marginRight: 4}}/>
<Text style={styles.deadlineText}>Deadline</Text>
<Text style={styles.dateText}>test</Text>
</View>
<TouchableOpacity onPress={() => toggleCard()}>
<Icon name={isOpen ? "chevron-up-outline" : "chevron-down-outline"} size={21} color="#A0A4BA"/>
</TouchableOpacity>
</View>
)
}
renderDeadline component is inside GoalCard, and I saw in the Rules of Hooks that this might be the cause for this error.
So I tried removing it, and using the JSX of renderDeadline directly in GoalCard instead, but I got the same error (tried deleting the app and npm run iOS again, not just hot reload).
Related
Im making this menu that when the user clicks at an option, it changes the background image, but i cant use the hook that i created as a parameter to the source of the image. Can someone find where im wrong and how to fix it?
Heres the part of my code referents to the menu and the hooks:
export function Home(){
let imagens = {
vovo: '../assets/vovoJuju.png',
mc: '../assets/mcJuju.png',
pato: '../assets/patoJuju.png',
}
const navigation = useNavigation<any>();
const [showBottomSheet, setShowBottomSheet] = React.useState(false);
const [param, setParam] = useState(1);
const [skin, setSkin] = useState('vovo')
const hide = () => {
setShowBottomSheet(false)
}
function handleAbout(){
navigation.navigate('About');
}
useEffect(() => {
if(param==1){
setSkin('vovo');
}
else if(param==2){
setSkin('mc');
}
else if(param==3){
setSkin('pato');
}
})
return(
<SafeAreaView style={styles.container}>
<TouchableOpacity onPress={handleAbout}>
<Counter />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setShowBottomSheet(true)
}}
>
<Image source={skin} style={styles.imgvj}/>
</TouchableOpacity>
<BottomSheet show={showBottomSheet} height={290} onOuterClick={hide}>
<Pressable onPress={hide} style={styles.bottomSheetContent}>
<Image source={barrinhaLoja} style={styles.barra}/>
</Pressable>
<View style={styles.conteudoLoja}>
<View style={styles.marginLeft48}>
<TouchableOpacity onPress={() => {
setParam(1);
}}>
<Image source={vovoJuju} style={styles.vovo}/>
<Text style={styles.legendasLoja}>Vovó Juju</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => {
setParam(2);
}}>
<Image source={mcJuju} style={styles.mc}/>
<Text style={styles.legendasLoja}>MC Juju</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => {
setParam(3);
}}>
<Image source={patoJuju} style={styles.pato}/>
<Text style={styles.legendasLoja}>Pato Juju</Text>
</TouchableOpacity>
</View>
</View>
</BottomSheet>
I created the "let imagens", "const param", "const skin" and the "useEffect trying" to make this function. I already tried using the source in different ways such as source={skin} and source={imagens[skin]} but it havent worked.
I'm not certain if this solves your problem, but here's how the first few lines of your component should look like without useEffect:
const imagens = {
vovo: '../assets/vovoJuju.png',
mc: '../assets/mcJuju.png',
pato: '../assets/patoJuju.png',
};
export function Home(){
const navigation = useNavigation<any>();
const [showBottomSheet, setShowBottomSheet] = React.useState(false);
const [param, setParam] = useState(1);
const hide = () => {
setShowBottomSheet(false)
}
function handleAbout(){
navigation.navigate('About');
}
let skin = 'vovo';
switch(param) {
case 1: skin = 'vovo'; break;
case 2: skin = 'mc'; break;
case 3: skin = 'pato'; break;
}
return /* the rest goes here */
}
To reference the actual image, you would use something like {imagens[skin]}.
I moved imagens outside of this function because it never changes, but it doesn't impact anything otherwise.
I was wondering why there's 1 missing character every time I type on text input using onChangeText and onChange function simultaneously.
Here's my code:
import React, {useState} from "react";
import {Text} from "galio-framework";
export default function UpcomingSurvey ({ navigation }) {
const [timer, setTimer] = useState('')
const [saving, setSaving] = useState(false);
const [edited, setEdited] = useState(false);
const [inputValue, setInputValue] = useState('')
const inputChanged = () => {
setSaving(true)
clearTimeout(timer)
const newTimer = setTimeout(() => {
console.log('inputValue: ', inputValue)
}, 2000)
setTimer(newTimer)
}
function renderUpcomingSurvey () {
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
<>
{saving &&
<Block style={{flex: 1}}>
<Text muted size={11} style={{ textAlign: 'right'}}>Saving</Text>
</Block>
}
{(edited && !saving) &&
<Block style={{flex: 1}}>
<Text muted size={11} style={{textAlign: 'right', color: '#36d79a'}}>saved</Text>
</Block>
}
</>
{!isLoading ? (
<Input
editable={radioCustom}
onChangeText={setInputValue}
onChange={inputChanged}
value={inputValue}
right placeholder="Type your custom question here."
iconContent={<Block />}
/>) : <Text></Text>
}
<Text muted size={12}>Free text | Your employees will see that this is a custom question</Text>
</Block>
When I try to console.log('inputValue: ', inputValue) inside inputChanged function will give missing one character. Example when I try to input Text this will give value in console Tex which missing character t.
Maybe there's a delay on capturing text value input after the onChange function triggers
What's the real culprit of these code?
It is probably the async nature of the setState function
Try to log the input value like this:
useEffect(() => {
console.log(inputValue)
}, [inputValue]) //Only run when inputValue is set
Solve it by assigning the Input defaultValue={inputValue} instead of value={inputValue}
So I am using react-navigation 5 and I have a custom drawer component for my app. I want to display the name of the logged-in user in the drawer for which I am using a state variable and I am updating the state from firestore. I am calling a function in useEffect which accesses firestore and gets the name of the user. But I think the useEffect is not working without refresh because unless I save the project and refresh the application the state is not getting updated in the application and I cannot see the name of the user without refreshing but it is visible after a refresh. Any ideas why this is happening? Any help would be appreciated. Thank you.
Custom drawer
export default function CustomDrawer(props) {
const paperTheme = useTheme();
const [name,setName]=useState('');
useEffect(() => {
doStuff();
}, []);
const doStuff = async () => {
var phone=global.phone;
await firestore().collection("Users").where('Phone Number', '==', phone).get().then(querySnapshot=>{
querySnapshot.forEach(documentSnapshot => {
console.log("in drawer");
console.log(documentSnapshot.data());
setName(documentSnapshot.data().Name);
})
})
};
return(
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row',marginTop: 15}}>
<Avatar.Image
source={{
uri: ''
}}
size={50}
/>
<View style={{marginLeft:15, flexDirection:'column'}}>
<Title style={styles.title}>{name}</Title>
</View>
</View>
</View>
</View>
</DrawerContentScrollView>
</View>
);
}
Looks like you have doStuff function defined outside the useEffects.
Either you need to put it inside useEffects or add it in dependency list
useEffect(() => {
doStuff();
}, [doStuff]);
I am using refs to animate a View, but the refs are throwing an undefined error. However, if I comment-out my attempt to access the ref, load the page, un-comment the code, & reload the page, the animation works fine.
My code:
export const AccountScreen = ({ navigation }) => {
return (
<SafeAreaView style={{ backgroundColor:'#FFFFFF', flex: 1 }}>
<Animatable.View style={styles.container} ref={ref => {this.containerRef = ref}}>
</Animatable.View>
</SafeAreaView>
)
};
launchOpenAnimation()
function launchOpenAnimation () {
this.containerRef.animate(appearContainerAnimation); //If I comment this out, reload, and un-comment, it works
}
What can I do to fix this? It appears that the ref isn't defined at the time that my launchOpenAnimation() is executed, but that it is defined after, thus resulting in the code working if I comment it out, reload, un-comment, and reload again.
First thing first, your question is messed up between calls component and functional component, cuz there is no this in functional component. I'll convert them to function component using useRef and useEffect
In the first run this.containerRef have not be assign to ref of Animatable yet.
Try this
export const AccountScreen = ({ navigation }) => {
const animateRef = useRef()
useEffect(() =>{
launchOpenAnimation()
function launchOpenAnimation () {
// add ? to make sure animate is called only when this.containerRef exists
containerRef?.current.animate(appearContainerAnimation);
}
},[])
return (
<SafeAreaView style={{ backgroundColor:'#FFFFFF', flex: 1 }}>
<Animatable.View style={styles.container} ref={ref => {
ref.animate(appearContainerAnimation); // add this if you need to run when initial render run
animateRef.current = ref
}}>
</Animatable.View>
</SafeAreaView>
)
};
I'm using React Navigation. I'm directing you to the conversation after the record insert page. I provide automatic renewal when I redirect. I'm sending a parameter. But that doesn't work. I don't know where I'm making a mistake.
I get this error.
Uncaught typeerror. TypeError: s.handleRefresh is not a function. (In 's.handleRefresh()', 's.handleRefresh' is undefined
LeadDetail.js Page
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
title: 'Müşteri Adayı Detay',
headerRight: (
<TouchableHighlight activeOpacity={0.4} underlayColor='transparent' onPress={() => navigation.navigate('CreateMeeting', { parentId: params.id, parentType: 'Lead' })} style={{marginRight: 12 }}>
<Icon
name="calendar-check-o"
size={25}
color="white"
/>
</TouchableHighlight>
)
};
};
CreateMeeting.js Page
dataSuccess(response) {
this.setState({ buttonLoading: false });
Alert.alert(
'Tebrikler!',
'Meeting başarılı bir şekilde kayıt edildi',
[
{ text: 'Tamam', onPress: () => this.props.navigation.navigate('Meeting', { refreshMeeting: true }) }
]
);
}
Meeting.js Page
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
let refresh = navigation.getParam('refreshMeeting', false);
if(refresh) {
params.handleRefresh();
}
return {
title: 'Görüşmeler',
headerRight: (
<View style={{ flexDirection: 'row' }}>
<TouchableHighlight activeOpacity={0.4} underlayColor='transparent' onPress={navigation.getParam('setOverlay')}>
<Icon
name="filter"
size={25}
color="white"
/>
</TouchableHighlight>
<TouchableHighlight activeOpacity={0.4} underlayColor='transparent' onPress={navigation.getParam('setModalVisible')} style={{ marginRight: 12, marginLeft: 20 }}>
<Icon
name="plus"
size={25}
color="white"
/>
</TouchableHighlight>
</View>
)
};
};
Are you setting the param handleRefresh? Instead of params.handleRefresh(); shouldn't it be params.refresh();?
Also, s.handleRefresh where is this in your code? I think there is a typo or something like that and I'm considering that s.handleRefresh is actually params.handleRefresh
Please edit your question if none of this is correct.
I don't know where you are setting the param handleRefresh, but if you are setting it (please check that and add the code where you do that), maybe here is the reason why this happens.
If you look at the docs they have a not
React Navigation doesn't guarantee that your screen component will be mounted before the header. Because the increaseCount param is set in componentDidMount, we may not have it available to us in navigationOptions. This usually will not be a problem because onPress for Button and Touchable components will do nothing if the callback is null. If you have your own custom component here, you should make sure it behaves as expected with null for its press handler prop.
This means that the header can render before the component calls setParams and that doens't load you params in the first time. What you need to do some checking to avoid that time when the header renders first.
// added some checking
if(refresh && params && params.handleRefresh) {
params.handleRefresh();
}