Develop Reference

React-Native Navigation and Promise Rejection

I have broken down into a simple example something I cannot solve. The code below appears to work fine to the point where I add navigation into the check function, as indicated below.
It then fails with "Possible Unhandled Promise Rejection (id: 0)"
App.js
import React from 'react';
import { Text, View, Button, } from 'react-native';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { HomeScreen, NewScreen } from './ui/screens.js';
import { apiCall } from './api/server.js';
const Stack = createStackNavigator();
const App = () => {
const check = async () => {
const navigation = useNavigation(); <--------- Added, then failure
try {
const response = await apiCall();
console.log(response);
navigation.navigate("NewScreen"); <------- Added, then failure
}
catch(err) {
console.log("Caught: " + err);
}
};
return (
<NavigationContainer>{
<Stack.Navigator>
<Stack.Screen name="Home">
{(props) => (
<HomeScreen {...props} check={check} />
)}
</Stack.Screen>
<Stack.Screen name="New"
component={NewScreen}
/>
</Stack.Navigator>
}</NavigationContainer>
);
}
export default App;
server.js
import base64 from 'react-native-base64';
import * as global from './defs.js';
export const apiCall = async () => {
try {
const response = await fetch(global.SITE + "/ttt.php", {
method: 'POST',
headers: {
'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Authorization': 'Basic ' + base64.encode(global.BASICAUTHUSER + ':' + global.BASICAUTHPWD)
}
});
console.log(response);
if (!response.ok) {
return new Promise((resolve, reject) => {
reject(new Error(httpError(response.status)));
});
}
return response.json();
}
catch(err) {
return err;
};
};
screens.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
export function HomeScreen({ check, navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Next" onPress={check} />
</View>
);
}
export function NewScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Activation Screen.</Text>
</View>
);
}
Any help gratefully received.

you are trying to use useNavigation() hook but your component is not inside
<NavigationContainer>.
i'll suggest you use your navigation/apiCall function inside HomeScreen and from there you can navigate easily.
more ref useNavigation Hook

Button that leads to another screen/page in react native

i'am fairly new to react native and i'm doing a social media clone. I've got my navigator and the login via a database done , but i was wondering if there was a way to link a page/screen to another one by pressing a button .
Here is my code for the home screen after logging in :
import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
class HomeScreen extends Component {
constructor(props){
super(props);
this.state = {
isLoading: true,
listData: []
}
}
componentDidMount() {
this.unsubscribe = this.props.navigation.addListener('focus', () => {
this.checkLoggedIn();
});
this.getData();
}
componentWillUnmount() {
this.unsubscribe();
}
getData = async () => {
const value = await AsyncStorage.getItem('#session_token');
return fetch("http://localhost:3333/api/1.0.0/search", {
'headers': {
'X-Authorization': value
}
})
.then((response) => {
if(response.status === 200){
return response.json()
}else if(response.status === 401){
this.props.navigation.navigate("Login");
}else{
throw 'Something went wrong';
}
})
.then((responseJson) => {
this.setState({
isLoading: false,
listData: responseJson
})
})
.catch((error) => {
console.log(error);
})
}
checkLoggedIn = async () => {
const value = await AsyncStorage.getItem('#session_token');
if (value == null) {
this.props.navigation.navigate('Login');
}
};
render() {
if (this.state.isLoading){
return (
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Loading..</Text>
</View>
);
}else{
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Welcome to The app </Text>
</View>
);
}
}
}
export default HomeScreen;
Now ideally i would want a button in my else statement which could lead me to another screen (eg main screen of the app ) after logging in .
App.js :
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeScreen from './screens/home';
import LoginScreen from './screens/login';
import SignupScreen from './screens/signup';
import LogoutScreen from './screens/logout';
const Drawer = createDrawerNavigator();
class App extends Component{
render(){
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Signup" component={SignupScreen} />
<Drawer.Screen name="Logout" component={LogoutScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
}
export default App;

If you're new to react native, I'd suggest that you give functional components and hooks a try, this is how your code would look like as a functional component after some clean up
(The answer is included in component)
import React, { Component, useEffect, useState } from "react";
import { View, Text, FlatList, Button } from "react-native";
import AsyncStorage from "#react-native-async-storage/async-storage";
const HomeScreen = (props) => {
const [isLoading, setIsLoading] = useState(true);
const [listData, setListData] = useState([]);
useEffect(() => {
const subscription = props.navigation.addListener("focus", () => {
checkLoggedIn();
});
getData();
return subscription.remove(); //similar to component unmount, syntax might be different based on your version
}, []);
const getData = async () => {
setIsLoading(true)
const value = await AsyncStorage.getItem("#session_token");
return fetch("http://localhost:3333/api/1.0.0/search", {
headers: {
"X-Authorization": value,
},
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else if (response.status === 401) {
props.navigation.navigate("Login");
} else {
throw "Something went wrong";
}
})
.then((responseJson) => {
setIsLoading(false);
setListData(responseJson);
})
.catch((error) => {
console.log(error);
});
};
const checkLoggedIn = async () => {
const value = await AsyncStorage.getItem("#session_token");
if (value == null) {
props.navigation.navigate("Login");
}
};
return (
<>
{isLoading ? (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Loading..</Text>
</View>
) : (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Welcome to The app </Text>
<Button
title="Next Page"
onPress={() => {
props.navigation.navigate("yourScreenName");
}}
/>
</View>
)}
</>
);
};
export default HomeScreen;
since you screens are
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Signup" component={SignupScreen} />
<Drawer.Screen name="Logout" component={LogoutScreen} />
//you can add more screens here just make sure to import them first
//example
<Drawer.Screen name="Example" component={ExampleScreen} />
// name will be the name you use to navigate to that screen
// component should have the screen you imported
then you should pass one of those names to props.navigation.navigate() so the button would be
<Button
title="Next Page"
onPress={() => {
props.navigation.navigate("Login");
}}
/>

If you want to stick with a class component, then :
import {TouchableOpacity} from "react-native"
In the else part,
<TouchableOpacity style ={{width:100, height:100}} onPress={()=>{this.props.navigation.navigate("screenname")}}></TouchableOpacity>
TouchableOpacity is a blank space on the screen, which can be styled easily, and you have an onPress event. Basically it's like a better version of a button. You can also place other components inside the TouchableOpacity, and make the whole thing clickable

Unable to find the react native variable "ConnectionStatus"

I am trying to implement a code that tests the internet connectivity using react native NetInfo from '#react-native-community/netinfo'. It is giving me an error that says "Can't find variable: connectionStatus". I tried my best declare properly but for some reason it is giving the error above.
import React, { Component } from 'react'
import NetInfo from '#react-native-community/netinfo';
import { ActivityIndicator, StyleSheet,View, Text } from 'react-native'
import { WebView } from 'react-native-webview';
export default class BrowserScreen extends Component {
constructor(props) {
super(props);
this.state = {
connectionStatus: false,
}
}
componentDidMount() {
const {navigation} = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.checkConnected();
})
}
async checkConnected() {
const networkState = await NetInfo.fetch();
if (networkState.isConnected) {
this.setState({ connectionStatus: true });
}
}
LoadingIndicatorView() {
return <ActivityIndicator
color='#009b88'
size='large'
style={styles.ActivityIndicatorStyle}
/>
}
render() {
let url = this.props.navigation.getParam('webUrl');
console.log(url) ;
return (
/**
* use the webview here to display the webpage
*/
connectionStatus ? (
<WebView
source={{ uri: url }}
renderLoading={this.LoadingIndicatorView}
startInLoadingState={true}
/>
) :
(
<View>
<Text> No Connection !!!!</Text>
</View>)
)
}
}
const styles = StyleSheet.create({
ActivityIndicatorStyle: {
flex: 1,
justifyContent: 'center'
}
})

connectionStatus is stored in state, refer to it as this.state.connectionStatus

React Native Flatlist ListItem called many times after initial render

Flatlist component as below
<FlatList
data={this.state.data}
keyExtractor={item => item.ID.toString()}
renderItem={this.renderItem}
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
ListFooterComponent={this.renderFooter}
/>
renderItem = ({ item }) => {
return (
<ListElement onPress={() => this.rowData(item)} item={item}/>
);
};
ListItem Component
import React from "react";
import { Image } from "react-native";
import { Left, Right, Body, Text, ListItem } from "native-base";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen";
import Thumbnails from "../components/Thumbnails";
import styles from "../styles/HomeStyles";
import GlobalStyles from "../constants/GlobalStyles";
class ListElement extends React.Component {
componentDidMount(){
console.log(this.props.item.ID)
}
shouldComponentUpdate(){
return false;
}
render() {
return (
<ListItem onPress={this.props.onPress} thumbnail style={styles.listItem}>
<Left>
<Thumbnails imageURI={require("../../assets/images/female2.png")} />
</Left>
<Body style={{ borderBottomColor: "transparent", top: 2 }}>
<Text
style={{
fontFamily: GlobalStyles.primaryFont,
fontSize: hp("1.85%"),
}}
>
{this.props.item.FirstName} {this.props.item.LastName}
</Text>
<Text
note
style={{
fontFamily: GlobalStyles.primaryFont,
color: "#666666",
fontSize: hp("1.6%"),
}}
>
{this.props.item.Title}
</Text>
</Body>
<Right>
<Image
style={styles.rightArrow}
source={require("../../assets/images/arrowRight.png")}
/>
</Right>
</ListItem>
);
}
}
export default ListElement;
I tried to populate api data on the flatlist. Please refer my above code for implementation. Currently I am facing rerendering issues as mentioned below.
My listitem componentDidMount is invoking multiple times on scroll after even intial render of all listitems.
I have tried PureComponent and shouldComponentUpdate. Thanks in advance.

An Update
Please Find the entire code of Flatlist component
import React, { PureComponent } from "react";
import { View, FlatList } from "react-native";
import { ListItem } from "react-native-elements";
import FL from "../screens/FL";
import FL1 from "../screens/Fl1";
class FlatListDemo extends PureComponent {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
error: null,
refreshing: false,
};
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const url = `https://jsonplaceholder.typicode.com/posts`;
this.setState({ loading: true });
fetch(url)
.then((res) => res.json())
.then((res) => {
this.setState({
data: res,
error: res.error || null,
loading: false,
refreshing: false,
});
})
.catch((error) => {
this.setState({ error, loading: false });
});
};
renderItem = ({ item }) => {
return <ListElement onPress={() => this.rowData(item)} item={item} />;
};
render() {
if (this.state.loading === true) {
return <View></View>;
} else {
return (
<View>
<FlatList
data={this.state.data}
keyExtractor={(item) => item.ID.toString()}
renderItem={this.renderItem}
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
ListFooterComponent={this.renderFooter}
/>
</View>
);
}
}
}
export default FlatListDemo;

Try the following:
add to state a boolean value (you can name it "wasFetched").
Then change the componentDidMount like this:
componentDidMount() {
if(this.state.wasFetched === false) {
this.setState({ wasFetched: true }, () => this.makeRemoteRequest())
}
}

React Native AXIOS method GET response.data shows null

Trying to get data on React Native native using axios method GET and local IP.
Running the URL on localhost using XAMPP works fine on the web.
But when trying to get data using api call on React Native, it's showing response.data as null on console.log()
The following are the code snippet below:
The sign in screen successfully shows the user token and user type on console.log().
SignInScreen.js
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, TextInput, } from 'react-native';
import { mapping, light as lightTheme, dark as darkTheme } from '#eva-design/eva';
import { ApplicationProvider, Layout, Text, Input, Button } from 'react-native-ui-kitten';
import Constants from '../constants/Constants';
import axios from 'axios';
import AsyncStorage from '#react-native-community/async-storage';
export default class SignInScreen extends Component {
static navigationOptions = {
title: 'Sign In',
};
constructor(props) {
super(props);
this.state = {
userName: 'freelancer',
password: 'password',
}
}
login() {
console.log('Sign In Pressed');
var self = this;
axios({
method: 'post',
url: Constants.API_URL + 'auth/login/',
data: {
user_name: this.state.userName,
password: this.state.password,
},
headers: {
'X-API-KEY': 'zzzz',
},
})
.then(function (response) {
if (response.data) {
AsyncStorage.setItem('my_token', response.token);
AsyncStorage.setItem('u_type', response.type);
//self.props.navigation.navigate('UserHome');
self.props.navigation.navigate('Freelancer');
console.log("Login Sucessful (response.data) ===> ", response.data);
} else {
console.log('Login attempt Failed');
}
})
.catch(function (error) {
console.log(error)
console.log('Error Response', error.response)
});
}
render() {
const { navigate } = this.props.navigation;
return (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Layout style={styles.container} level='1'>
<ScrollView>
<Text style={styles.text} category='h4'>Sign Up with Email</Text>
<TextInput label={'USERNAME'}
placeholder={'username'}
autoCapitalize='none'
style={styles.input}
onChangeText={userName => this.setState({ userName })}
value={this.state.userName} />
<TextInput label={'PASSWORD'}
placeholder={'Password'}
autoCapitalize='none'
style={styles.input}
onChangeText={password => this.setState({ password })}
value={this.state.password} />
<Button style={styles.button} onPress={() => this.login()}>SIGN IN</Button>
</ScrollView>
</Layout>
</ApplicationProvider>
);
}
}
const styles = StyleSheet.create({
button: {
marginTop: 15,
marginLeft: 16,
marginRight: 16
},
container: {
flex: 1,
},
input: {
marginLeft: 16,
marginRight: 16,
marginBottom: 15
},
text: {
marginVertical: 16,
textAlign: 'center'
},
});
However, on FreelancerScreen the response.data is showing null.
FreelancerScreen.js
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import axios from 'axios';
import Constants from '../constants/Constants';
import AsyncStorage from '#react-native-community/async-storage';
export default class FreelancerScreen extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
//-test
totalBooked: null,
dateStart: null,
};
console.log('Constructor()');
}
componentDidMount() {
this.getAppointmentList();
console.log('ComponentDidMount()')
}
getAppointmentList = () => {
var self = this;
axios({
method: 'get',
url: Constants.API_URL + 'appointment_f/flist/',
responseType: 'json',
headers: {
'X-API-KEY': 'zzzz',
Authorization: AsyncStorage.getItem('my_token'),
},
})
.then(function (response) {
console.log('Response Data: ', response.data);
})
.catch(function (error) {
console.log('Error Response: ', error.response);
});
};
clearAsyncStorage = async () => {
AsyncStorage.clear();
this.props.navigation.navigate('SignIn');
console.log('Logged Out.')
}
render() {
const { dataSource } = this.state;
return (
<View>
<Text style={{ marginLeft: 20 }}> FreelancerScreen </Text>
<TouchableOpacity onPress={() => this.clearAsyncStorage()}>
<Text style={{ margin: 20, fontSize: 25, fontWeight: 'bold' }}>LogOut</Text>
</TouchableOpacity>
{<FlatList
data={dataSource}
renderItem={({ item }) => {
return (
<View>
<Text style={{ marginLeft: 20 }}>date_start: {item.date_start}</Text>
<Text style={{ marginLeft: 20 }}>total_booked: {item.total_booked}</Text>
</View>
);
}}
/>}
</View>
);
}
};
/*data: {
total_booked: this.state.totalBooked,
date_start: this.state.dateStart,
},*/