Develop Reference

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children

I am setting up a React app . I am getting the error "Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."
i have this code App.js
import React from 'react';
import {text, StatusBar , StyleSheet, View }from 'react-native'
import Header from './src/components/Header';
import { Colors } from './src/global/styles';
export default function App() {
return (
<View style= {styles.container}>
<StatusBar
barStyle = "Ligh-content"
backgroundColor = {Colors.StatusBar}
/>
<Header/>
</View>
)
}
const styles = StyleSheet.create({
container: {flex:1}
})
////////////////////////////////////////////////////////////////////////////////////
in header.js
import React from 'react';
import { Text,View, StyleSheet , Dimensions } from "react-native";
import { Colors ,parameters } from '../global/styles';
import Icon from 'react-native-vector-icons/FontAwesome';
export default function Header(title){
return (<View style={styles.header}>
{
<Icon type="Material-community"
name = "arrow-left"
color = {Colors.headerText}
size={28} onPress = {() => {}}
/>
}
<View>
<Text style={styles.headerText}>{title}</Text>
</View>
</View>
)
}
const styles= StyleSheet.create ({
header:{
flexDirection : 'row',
backgroundColor:Colors.bouttons,
height: parameters.headerHeight
},
headerText:{
color: Colors.headerText,
fontSize:22,
fontWeight:"bold"
}
})

import {text, StatusBar , StyleSheet, View }from 'react-native'
change text with Text and if it still doesnt work can u write your
import { Colors ,parameters } from '../global/styles' file in here

How do I get my app to make use of the Android back button or onPress of a button?

How do I get my app to make use of the Android back button or onPress of a button?
My relevant packages:
"react": "16.13.1",
"react-native": "0.63.4",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4"
App.js
import React from "react";
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import incomingCallScreen from "./screens/incomingCall/incomingCallScreen";
import bookingScreen from "./screens/booking/bookingScreen";
const switchNavigator = createSwitchNavigator({
Loading: LoadingScreen,
Splash: splashScreen,
mainFlow: createStackNavigator({
IncomingCall: incomingCallScreen,
Booking: bookingScreen
}),
},
{
initialRouteName: 'Loading',
},
);
const App = createAppContainer(switchNavigator);
export default () => {
return (
<App />
);
};
Then in my BookingScreen, when i click a button, it slides right to the IncomingCall screen, BUT i cant use the back button no Android or the Decline button to slide back. Or go back at all.
My Booking.js screen:
import React, { Component, useEffect } from "react";
import { SafeAreaView, StatusBar, View, Text, StyleSheet, Dimensions, Image, ScrollView, TouchableOpacity } from "react-native";
import { withNavigation } from "react-navigation";
function BookingScreen(props) {
const today = () => {
return (
<View style={{ flexDirection: 'row', }}>
<MaterialIcon
name="call"
size={20}
color={Colors.primaryColor}
onPress={() => props.navigation.push('IncomingCall')}
style={{ alignSelf: 'flex-end', marginLeft: Sizes.fixPadding }}
/>
</View>
)
}
}
export default withNavigation(BookingScreen);
And then in the IncomingCall.js screen:
import React, {Component, useEffect, useState} from 'react';
import {View, Text, StyleSheet, ImageBackground, BackHandler, Pressable} from 'react-native';
import { withNavigation } from "react-navigation";;
import { TransitionPresets } from 'react-navigation-stack';
function IncomingCallScreen(props) {
const onDecline = () => {
navigation.goBack();
return true;
};
return (
<View style={styles.row}>
{/* Decline Button */}
<Pressable onPress={onDecline} style={styles.iconContainer}>
<View style={styles.iconButtonContainer}>
<Feather name="x" color="white" size={40} />
</View>
<Text style={styles.iconText}>Decline</Text>
</Pressable>
)
}
IncomingCallScreen.navigationOptions = () => {
return {
header: () => null,
...TransitionPresets.SlideFromRightIOS,
}
}
export default withNavigation(IncomingCallScreen);

Instead of using navigation.push('IncomingCall') like you are, instead use navigation.navigate('IncomingCall'). This will push the screen onto the stack of screens, you do not have to do it manually. Additionally, every time a user wants to go back a screen, you should use navigation.goBack(), which I see you already are. This should allow Android users to user the physical buttons on their devices.

Why isn't react native displaying my background image?

The following code below compiles into react native just fine and the I don't recieve any errors in any of the compilers but my android emulator remains blank instead of displaying a background image like it's suppose to. Does anyone know why?
Code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ImageBackground} from 'react-native';
import bgImage from './Images/background.jpg'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<ImageBackground source={bgImage} style={styles.backgroundContainer}>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1,
width:null,
height:null,
justifyContent: 'center',
alignItems: 'center',
},
});

Try this way
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ImageBackground} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<ImageBackground source={require(./Images/background.jpg)} style={styles.backgroundContainer}>
<Text> Here Background Image </Text>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1,
width:'100%',
height:'100%',
},
});

You should use require
<ImageBackground soure={require(bgImage)} style={styles.backgroundContainer}>
</ImageBackground>

source={require(BgIMage)} You missed the require

Hiding RefreshControl in Android React Native

I have a requirement where I want to hide the refresh indicator completely of Refresh Control for Android. I already set most of the color properties to transparent by still see gray circular indicator. Is there any way to completely hide this circular indicator. Link to gif about what is hapenning: http://imgur.com/dkAmkC6
This is my code:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
FlatList,
Dimensions,
RefreshControl,
ToastAndroid,
} from 'react-native';
import Constants from './Constants';
export default class TestList extends Component {
constructor(props) {
super(props);
this.rows =[{id: 1},{id: 2},{id: 3},{id: 4}];
this.state = {
refreshing: false,
}
}
renderItem(row) {
return (
<Text style={{fontSize: 20, borderBottomWidth: 1, borderColor: 'red', color: 'blue', height:80}}>{row.item.id}</Text>
)
}
render() {
return (
<View style={[styles.container]}>
<FlatList
data={this.rows}
renderItem={this.renderItem.bind(this)}
overScrollMode='always'
style={{flex: 1}}
keyExtractor={(item) => item.id}
removeClippedSubviews={false}
keyboardShouldPersistTaps='always'
refreshControl={
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show('Refresh completed with short duration', ToastAndroid.SHORT)}/>}
ref="FlatList"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
[1]: http://imgur.com/dkAmkC6

You can use Platform api from react native.
import { Platform } from 'react-native'
<Flatlist
...other props
refreshControl={
Platform.select({
ios: (
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show(
'Refresh completed with short duration',
ToastAndroid.SHORT
)
}
/>
)
})
}
/>

You could conditionally render the RefreshControl component so that it only renders when you want it to.
The react docs discuss some techniques here: https://facebook.github.io/react/docs/conditional-rendering.html
But for simplicity's sake, I prefer to use the https://github.com/ajwhite/render-if npm module to conditionally render the component based on a flag in your component's state or in a redux store.

I had the same issue and wanted the same thing, but did not get it for android, so I tried the prop. progressViewOffset={number}, up-to such that the pull to refresh worked as well as the loading icon was hidden(was above the view). This is not proper solution but it worked for me.

This works for me on iOS (have not tested on Android):
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={this.onRefreshHandler.bind(this)}
title='Pull to refresh'
tintColor='transparent'
/>
}

using navigator to below code of react-native

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Navigator,
TouchableHighlight
} from 'react-native';
export default class calu extends Component {
constructor(props){
super(props);
this.state={f2:null, height:null,result:0};
this.compute=this.compute.bind(this);
}
compute(){
console.log('pressed');
let f1=(this.state.f1);
let f2=parseInt(this.state.f2);
this.setState({result: f1 + f2 });
}
render() {
return (
<View>
<TextInput
keyboardType='numeric' onChangeText={(text) => this.setState({f1: parseInt(text)})} placeholder='enter second number' />
<TextInput
keyboardType='numeric' onChangeText={(text) => this.setState({f2: parseInt(text)})} placeholder='enter second number' />
<Text> result: {this.state.result.toFixed(2)} </Text>
<TouchableOpacity
onPress={this.compute}>
<Text> compute </Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('calu', () => calu);
I have done small app of adding two numbers and displaying result. But I want to display result in another scene using navigator, so where can I add navigator and how to pass value to another scene? Anyone please help me and share code to me.
Thank you.