We Keep Coding

Invariant Violation : scrollToIndex out of range : requested NaN but maximum is 1 (FlatLList/SwiperFlatList)

When I want to distribute my data from my firebase database to my React Native mobile application in the form of a carousel with SwiperFlatList, an error is displayed
each time my class is updated, showing me as follows: "Invariant violation: scrolltoindex out of range: requested Nan but maximum is 1."
By hiding the error the carousel works well but it can be very annoying and cause problems during its build.
Here are my codes:
My Render function :
renderPost=post=>{
return(
<View style={styles.card}>
<HorizontalCard title={post.title_new} desc={post.text} img={post.image} />
</View>
)
}
HorizontalCard Component :
export default class HorizontalCard extends Component {
constructor(props) {
super(props);
}
static propTypes = {
screen: PropTypes.string,
title: PropTypes.string,
desc: PropTypes.string,
img: PropTypes.string,
};
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{flex: 1}}>
<TouchableOpacity
onPress={() => {
this.setModalVisible(true);
}}
style={styles.container}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<Text>{this.props.desc}</Text>
<Button
title="Fermer la fenêtre"
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}} />
</View>
</View>
</Modal>
<View style={styles.card_discord}>
<Image style={styles.card_discord_img} source={{ uri: this.props.img }} />
<LinearGradient
start={[1.0, 0.5]}
end={[0.0, 0.5]}
colors={['rgba(51, 51, 51, 0.2)', '#333333', '#333333']}
style={styles.FadeAway}>
<View style={styles.FadeAway}>
<Text h4 style={styles.FadeAway_h2}>
{this.props.title}
</Text>
<Text style={styles.FadeAway_p}>{this.props.desc}</Text>
</View>
</LinearGradient>
</View>
</TouchableOpacity>
</View>
);
}
}
My HomeScreen component (page where the error appears) :
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.ref = Fire.shared.firestore.collection('posts')
this.useref=
this.state={
dataSource : [],
}
}
feedPosts = (postSnapShot) =>{
const post = [];
postSnapShot.forEach((doc) => {
const {uid,text,timestamp,title_new,image} = doc.data();
const data=Fire.shared.firestore
.collection('users')
.doc(uid)
.get()
.then(doc=>{
post.push({
text,
timestamp,
title_new,
image,
uid,
})
this.setState({
dataSource : post,
});
})
});
}
renderPost=post=>{
return(
<View style={styles.card}>
<HorizontalCard title={post.title_new} desc={post.text} img={post.image} />
</View>
)
}
render() {
return (
<ThemeProvider>
<ScrollView>
<SwiperFlatList
autoplay
autoplayDelay={5}
index={0}
autoplayLoop
autoplayInvertDirection
data={this.state.dataSource}
renderItem={({item})=>this.renderPost(item)}
/>
...
<ScrollView>
</ThemeProvider>
)
}
}

React-Native: Formik ref fails to get value

I have a dummy Login code with formik form in react-native
import React, { Component } from "react";
import {
TextInput,
Text,
Alert,
Image,
View,
TouchableOpacity,
SafeAreaView,
ScrollView
} from "react-native";
import styles from "./Styles/LoginStylesheet";
import { KeyboardAccessoryNavigation } from "react-native-keyboard-accessory";
import { Formik } from "formik";
import schemaObject, { initialValues, refs } from "./Validations/LoginValidations";
export default class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
activeInputIndex: 0
};
}
handleFocus = index => () => {
this.setState({
activeInputIndex: index
});
};
handleFocusNext = () => {
if (this.state.activeInputIndex + 1 >= refs.length) {
return;
}
refs[this.state.activeInputIndex + 1].focus();
};
handleFocusPrevious = () => {
if (this.state.activeInputIndex - 1 < 0) {
return;
}
refs[this.state.activeInputIndex - 1].focus();
};
handleLogin = () => {
console.log("ACTIOn");
// this.formik.handleSubmit();
};
render() {
return (
<View style={styles.safeAreaView}>
<SafeAreaView style={styles.safeAreaView}>
<ScrollView style={styles.superView}>
<Formik {/* LINE 56 */}
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleSubmit
}) => (
<View style={styles.superView}>
<View style={styles.logoParentView}>
<Image
source={require("../../Resources/Assets/Login/aptihealth_logo.png")}
resizeMode={"contain"}
style={styles.logo}
/>
</View>
<View style={styles.emailParentView}>
<Text style={styles.titleLabel}>Email Id</Text>
<TextInput
value={values.emailId}
onChangeText={handleChange("emailId")}
onBlur={() => setFieldTouched("emailId")}
placeholder="Email Id"
style={styles.textInput}
autoCorrect={false}
onFocus={this.handleFocus(0)}
ref={input => {
refs[0] = input;
}}
/>
{touched.emailId && errors.emailId && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.emailId}
</Text>
)}
</View>
<View style={styles.passwordParentView}>
<Text style={styles.titleLabel}>Password</Text>
<TextInput
value={values.password}
onChangeText={handleChange("password")}
placeholder="Password"
onBlur={() => setFieldTouched("password")}
style={styles.textInput}
autoCorrect={false}
secureTextEntry={true}
onFocus={this.handleFocus(1)}
ref={input => {
refs[1] = input;
}}
/>
{touched.password && errors.password && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.password}
</Text>
)}
</View>
<View style={styles.forgotPasswordParentView}>
<TouchableOpacity
style={styles.forgotpasswordButton}
activeOpacity={0.7}
>
<Text>Forgot Password?</Text>
</TouchableOpacity>
</View>
<View style={styles.loginParentView}>
<TouchableOpacity
onPress={() => {
console.log("VALUES: ", values, this.formik);
this.handleLogin();
}}
style={styles.loginButton}
activeOpacity={0.7}
>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.seperaterParentView}>
<View style={styles.seperaterView} />
<Text style={styles.seperaterText}>OR</Text>
<View style={styles.seperaterView} />
</View>
<View style={styles.faceIdLoginParentView}>
<Image
source={require("../../Resources/Assets/face_id_small_color/face_id_small_color.png")}
resizeMode={"contain"}
/>
<TouchableOpacity style={styles.faceIdButton}>
<Text>Sign In with Face ID</Text>
</TouchableOpacity>
</View>
<View style={styles.signUpParentView}>
<TouchableOpacity style={styles.signupButton}>
<Text>Sign Up for Account Here</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</ScrollView>
</SafeAreaView>
<KeyboardAccessoryNavigation
nextDisabled={false}
previousDisabled={false}
nextHidden={false}
previousHidden={false}
onNext={this.handleFocusNext}
onPrevious={this.handleFocusPrevious}
avoidKeyboard
/>
</View>
);
}
}
I am trying to console formik ref in login action getting undefined value with debug error
ExceptionsManager.js:126 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `LoginView`.
in Formik (at LoginView.js:56)
I have no idea why it's getting undefined ??

You should take a look at this issue.
You problem is here
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)} {/* passing this ref will throw the error */}
>
In the latest version of Formik, they changed Formik to a functional component as explained in the issue, which gives you this error if you pass ref's.
You can check for the suggestions on the issue or wait until they release an update with the correction.
Edit:
Formik made an update and now you can use ref with the prop innerRef.
Please see this comment
You should change it to
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
{/* using innerRef instead of ref*/}
innerRef={p => (this.formik = p)} {/* this will give you the formik bag */}
>
And this way you can call this.formik.handleSubmit(), just lik you want to do.

React Native - How to pass the Image from the other Component without using React Redux

The goal is to pass the State of the Photos from my CameraRoll.js (Modal) to EventCreator.js(Modal) without using the React Redux. I'm using React Native Navigation V1.
I'm wondering maybe it is possible state of photos: [] become props? Just don't know how to do it. Need help, thank you guys!
Here are my codes:
CameraRoll.js:
state = {
photos: [],
index: null,
pickedImage: null
}
getPhotos = () => {
CameraRoll.getPhotos({
first: 200,
assetType: 'All'
})
.then(res => {
this.setState({
photos: res.edges,
});
})
.catch((err) => {
console.log('Error image: ' + err);
});
};
render() {
return(
<View style={styles.container}>
<Image source={{uri: this.state.pickedImage}} style={styles.image}/>
<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
{this.state.photos.map((photos, index) => {
return(
<TouchableHighlight
style={{opacity: index === this.state.index ? .5 : 1}}
onPress={() => this.setState({pickedImage: photos.node.image.uri})}
key={index}
underlayColor='transparent'
>
<Image
style={{width: width / 3, height: width /3}}
source={{uri: photos.node.image.uri}}
resizeMode='cover'
/>
</TouchableHighlight>
);
})}
</ScrollView>
</View>
);
}
EventCreator.js:
render(){
return(
<View style={styles.container}>
<EventInput
titleOnChangeText={this.eventNameChangedHandler}
descriptionOnChangeText={this.eventDescriptionChangedHandler}
titleEvent={this.state.controls.eventName}
descriptionEvent={this.state.controls.eventDescription}
/>
<Image
style={styles.image}
source={"I want to pass the image here from CameraRoll.js"}
resizeMode='contain'
/>
</View>
);
}

if you mean this:
onPress={() => this.setState({pickedImage: photos.node.image.uri})}
it just change the state value. What you should do is put an if statement on the return of cameraRoll.js:
private onPress = (img) => {
this.props.onImagePicked(img)
}
render() {
return(
<View style={styles.container}>
<Image source={{uri: this.state.pickedImage}} style={styles.image}/>
<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
{this.state.photos.map((photos, index) => {
return(
<TouchableHighlight
style={{opacity: index === this.state.index ? .5 : 1}}
onPress={() => this.onPress(photos.node.image.uri))}
key={index}
underlayColor='transparent'
>
<Image
style={{width: width / 3, height: width /3}}
source={{uri: photos.node.image.uri}}
resizeMode='cover'
/>
</TouchableHighlight>
);
})}
</ScrollView>
</View>
);
}
And in EventCreator.js:
constructor(){
super(props);
this.state = {
pickedImg: undefined
}
}
private onImagePicked = (newImg) => {
this.setState({
pickedImg: newImg
})
}
render(){
return(
<View style={styles.container}>
<EventInput
titleOnChangeText={this.eventNameChangedHandler}
descriptionOnChangeText={this.eventDescriptionChangedHandler}
titleEvent={this.state.controls.eventName}
descriptionEvent={this.state.controls.eventDescription}
/>
<Image
style={styles.image}
source={this.props.source}
resizeMode='contain'
/>
<CameraRoll props={...} onImagePicked={this.onImagePicked}/>
</View>
);
}

How can I add an object to an arraylist using setState

I'm trying to add this object { "origin": "user", "message": this.state.message } to the messages arraylist by using setState. Right now I'm getting the following error:
Invariant Violation: Objects are not valid as React child (found:object with keys {origin, message})
Also, if there is a better way than setTimeout to wait until the message has been rendered before scrolling to the bottom that would be cool aswell!
sendMessage = () => {
this.setState(prevState => ({
messages: [...prevState.messages, { "origin": "user", "message": this.state.message }]
}));
this.callChatService().then((responseJson) => {
this.setState({
context: responseJson.context
});
for (var i = 0; i < responseJson.output.generic.length; i++) {
this.setState(prevState => ({
messages: [...prevState.messages, { "origin": "bot", "message": responseJson.output.generic[i].text}]
}));
}
})
setTimeout(() => this.refs.flatList.scrollToEnd(), 1500);
this.setState({
message: ""
})
}
renderItem = ({ item }) => {
if (item.origin == "user") {
return (
<View>
<View style={styles.rowRight}>
<Text style={styles.message}>{item}</Text>
</View>
</View>
);
}
else {
return (
<View>
<View style={styles.rowLeft}>
<Text style={styles.message}>{item}</Text>
</View>
</View>
);
}
}
componentWillMount() {
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>{this.state.header}</Text>
</View>
<FlatList
style={styles.list}
ref="flatList"
data={this.state.messages}
keyExtractor={(item, index) => index}
renderItem={this.renderItem}
/>
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={20}>
<View style={styles.footer}>
<TextInput
value={this.state.message}
onChangeText={text => this.setState({ message: text })}
style={styles.input}
underlineColorAndroid="transparent"
placeholder="Ask me anything"
/>
<TouchableOpacity onPress={this.sendMessage} style={styles.sendButton} >
<Icon name="send" type="material-icon" size={28} color="#00B2EE" />
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
);
}

The issues lies in those lines of your renderItem method:
<Text style={styles.message}>{item}</Text>
item in this context is an object and can not be rendered by the Text component, hence the error.
Considering your code, I believe it should have been item.message like so:
<Text style={styles.message}>{item.message}</Text>

undefined is not an object (evaluating '_this.props.navigation.navigate')

This was working fine within the Login.js component:
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
But when i move this to a separated component i receive the error in the title of this post.
SocialFooter.js:
import React, { Component } from 'react';
import {
View,
Image,
TouchableHighlight,
Linking
} from 'react-native';
export default class SocialFooter extends Component {
static navigationOptions = { header: null }
constructor(props) {
super(props);
}
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
render() {
return (
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
)
}
}
I've tried adding const { navigation:navigate } = this.props;within the onPress method, also i tried binding this in the constructor, like: this.onPressSocialButton = this.onPressSocialButton.bind(this);
Nothing worked, please help me. thanks!

Solved by adding:
const { navigation } = this.props; in the parent component's render() method (Login.js)
then i passed it to the child component like this:
<SocialFooter navigation={navigation}/>

Navigation prop is only supplied to the react-navigation screens which you have already configured, if you need to use the navigation prop in any other components, you need to pass it as a prop
<SocialFooter navigation={navigation}/>