We Keep Coding

React Native Expo error: Hooks can only be called inside the body of a function component

I am developing mobile app using React Native expo.. I am getting the following exception:
Invalid hook call. Hooks can only be called inside the body of a function component....
I have gone through the other answers posted here on SO and have confirmed that the hook in my code is indeed inside a function. But still I am unable to resolve the error. KIndly help. Please see my code below. Let me know if more clarification is needed.
import React, { useState, useEffect } from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function OpenGallery () {
const [image, setImage] = useState(null);
useEffect(() => { // hook is inside function but still getting error
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Some text </Text>
</SafeAreaView>
);
}
Second file:
import React from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import OpenGallery from './OpenGallery'
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function CameraScreen() {
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={OpenGallery} />
</SafeAreaView>
);
}

it is in fact not being called from inside the component. you are calling it from the JSX, which is entirely different. there are two issues here that break the rules of hooks.
hooks must be called unconditionally. you are breaking that rule here.
<Button title="Select from Gallery" **onPress={OpenGallery}** />
Hooks must be called from inside a functional component. you cannot import another component and call it as a function. this is what you're doing. you are calling the react component on a onPress method which is wrong.
What can you do to fix it?
bring the state down. make the check to see if it's on a web or a mobile in the second file itself. i would post the code but i don't have expo installed at the moment.

It might sound out of scope here but I think in your case, you need to specify the behaviour on how do you want the OpenGallery to appear after pressing the button on CameraScreen... you may be using navigation (may be react-navigation) or using a modal.
Let's say you're using react-navigation. (as you're using expo, it's normally included in the project) https://reactnavigation.org/
On CameraScreen
export default function CameraScreen({navigation}) {
const gotoOpenGallery = () => {
navigation.navigate('OpenGallery');
}
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={gotoOpenGallery} />
</SafeAreaView>
);
}
You will also need to create a StackNavigator
Your App.js (or your entry point of the app)
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import OpenGallery from './OpenGallery';
import CameraScreen from './CameraScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="CameraScreen" component={CameraScreen} />
<Stack.Screen name="OpenGallery" component={OpenGallery} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

How to create bottom tab navigation using react native

I am going to implement a react native footer menu (bottom tam navigator). But I got some errors on running it.
this is my drawer.js file
import React,{Component} from 'react';
import {View,Text,StyleSheet} from "react-native";
import {createAppContainer}from "react-navigation";
import {createMaterialBootomTabNavigator} from "react-navigation-material-bottom-tabs";
import Homescreen from "./home.js";
class drawer extends React.Component{
render() {
return (
<View style={styles.container}>
<Text>drawer</Text>
</View>
);
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
}
});
const TabNavigator=createMaterialBootomTabNavigator(
{
Home:{
screen:Homescreen,
}
},
{
initialRouteName:"home",
activeColor:"#f0edf6",
inactiveColor:"#3e2465",
barStyle:{ backgroundColor: '#694fad' },
}
);
export default createAppContainer(TabNavigator);
I had already installed the react-navigator.
By run it on my emulator I got this error.
how can I fix this?

Change createMaterialBootomTabNavigator to createMaterialBottomTabNavigator

ClassName props is missing in object type. Flow and CSS Modules

I have initialized a React Native app with the CLI quickstart. The only thing I have edited is that I use CSS Modules for styling the component (note: className in stead of style). I want to typecheck the project with flow and if I run flow it gives the following error.
I Cannot create View element because property className is missing in object type [1] but exists in props [2].
What can I do?
// #flow
import React from "react";
import {
View,
Text
} from "react-native";
import styles from "./base.sass";
const App = () => {
const [title] = React.useState("Hello");
return (
<View className={styles.title}>
<Text>{title}</Text>
</View>
);
};
export default App;

It's not React.js, you can't use like that.
Here is an example.
import React from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
const App = () => {
const [title] = React.useState("Hello");
return (
<View style={styles.title}>
<Text>{title}</Text>
</View>
);
};
const styles = StyleSheet.create({
title: {
justifyContent: 'center',
alignItems: 'center',
}
});
export default App;

The className prop has been removed from View starting from 0.11:
https://github.com/necolas/react-native-web/issues/1146
Please check a version you use!

Text strings must be rendered within a <Text> component issue in React Native

I'm using react-native-cli version 2.0.1 and react-native version 0.57.8. I am learning React native, and have encountered an issue when trying to render two different child components (Header and AlbumList) in the main App component.
Issue
The error disappears if I remove the <View> tags and AlbumList component in the index.js file (meaning only show one component). I have looked through threads like this, but am still unable to identify how I'm using the <View> tag incorrectly.
index.js
import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';
//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} />
<AlbumList />
</View>
);
//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);
AlbumList.js
import React from 'react';
import { View, Text } from 'react-native';
const AlbumList = () => {
return (
<View><Text> Album List </Text></View>
);
};
export default AlbumList;
I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless.
Header.js
import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements
// Make a component
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style = {viewStyle}>
<Text style = {textStyle}> {props.headerName}</Text>
</View>
);
};
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60
},
textStyle: {
fontSize: 20
}
};
export default Header;
Help is appreciated. Thanks in advance!

in your index.js file, replace App function with below,
//Create a component
const App = () => (
<View><Header headerName={'Albums'} /><AlbumList /></View>
);
there should be no space between components here
while using react native components, try to put each element in a new line, in this way you don't have to worry about spaces
const App = () => (
<View>
<Header headerName={'Albums'} />
<AlbumList />
</View>
);
Let me know if it works

In my case i had a misplaced semicolon as shown and it was giving me so much headache
<Screen>
<RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
</Screen>

Exported Constant not working in stylesheet

In one of the components in my project, I export a constant integer and then use it as a value for height in StyleSheet. In one particular case, it is not working and I can't figure out why. I have extracted the minimum possible code to reproduce it.
In TopBar.js, I export NAVBAR_HEIGHT and import it in both Home.js and MyModal.js. While it works right in Home.js when I use it as value of height in StyeSheet, it doesn't work in MyModal.js. However, if I replace NAVBAR_HEIGHT with a hardcoded int value, it works. It also works if I use NAVBAR_HEIGHT inline instead of creating a StyleSheet and passing the styles.topbar object.
(I wanted to make an rnplay for this, but looks like it can't make multiple files and thus, I couldn't reproduce it.)
Here is the code, apologies for making it long. I've also pushed it to git here.
Home.js (root component)
import React from 'react';
import {
View, StyleSheet, TouchableHighlight
} from 'react-native';
import TopBar, { NAVBAR_HEIGHT } from './TopBar';
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = { showModal: false };
}
render() {
return (
<TouchableHighlight onPress={this.toggleModal}>
<View style={styles.view}>
<TopBar showModal={this.state.showModal}
onClose={this.toggleModal} />
</View>
</TouchableHighlight>
);
}
toggleModal = () => {
this.setState({ showModal: !this.state.showModal });
}
}
const styles = StyleSheet.create({
view: {
height: NAVBAR_HEIGHT,
backgroundColor: 'blue',
}
});
MyModal.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
Text,
} from 'react-native';
import { NAVBAR_HEIGHT } from './TopBar';
export default class MyModal extends Component {
render() {
return (
<Modal animationType={'slide'}
visible={this.props.visible}
style={styles.container}
onRequestClose={this.props.onClose}>
<View style={styles.topbar}>
<Text style={styles.text}>{NAVBAR_HEIGHT}</Text>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topbar: {
backgroundColor: 'red',
height: NAVBAR_HEIGHT,
},
text: {
fontSize: 20
}
});
TopBar.js
import React, { Component } from 'react';
import {
View,
StyleSheet,
Platform,
Text,
} from 'react-native';
import MyModal from './MyModal';
export const NAVBAR_HEIGHT = Platform.OS === 'ios' ? 200 : 100;
export default class TopBar extends Component {
render() {
return (
<View style={styles.container}>
<Text>TEST</Text>
<MyModal visible={this.props.showModal}
onClose={this.props.onClose} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'green',
},
});
I might be making some silly mistake but I have spent way too much time on this one and I'm still clueless. Help.

The modules TopBar.js and MyModal.js have a circular dependency: TopBar imports MyModal, and MyModal imports TopBar. Because module resolution is synchronous, the imported value is undefined.
Extract the common dependency into its own module and reference it from both TopBar and MyModal.
Here's a simple reproduction:
a.js
import {b} from './b';
export const a = 'a';
console.log('A sees B as', b);
b.js
import {a} from './a';
export const b = 'b';
console.log('B sees A as', a);
main.js
import {a} from './a';
Outputs:
B sees A as undefined
A sees B as b