I am trying to use React native reanimated carousel in an expo project knowing that I have already used it on a previous one and it worked fine. So I copied and pasted the same code but for an unknown reason I get the following error:
TypeError: Cannot read properties of undefined (reading 'toString')
So I used the bare code example from the documentation and found out I still get the same issue.
Here are the version the packages I'm using :
"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-reanimated-carousel": "^3.1.5",
Example.js
import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
function Index() {
const width = Dimensions.get('window').width;
return (
<View style={{ flex: 1 }}>
<Carousel
loop
width={width}
height={width / 2}
autoPlay={true}
data={[...new Array(6).keys()]}
scrollAnimationDuration={1000}
onSnapToItem={(index) => console.log('current index:', index)}
renderItem={({ index }) => (
<View
style={{
flex: 1,
borderWidth: 1,
justifyContent: 'center',
}}
>
<Text style={{ textAlign: 'center', fontSize: 30 }}>
{index}
</Text>
</View>
)}
/>
</View>
);
}
export default Index;
This problem occurred because of the absence of the reanimated plugin in the babel.config.js. Based off of the documentation here's what needs to be done.
Add Reanimated's Babel plugin to your babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
I think problem is in your renderItem function. You generate list of integers as data and try to pass the integer as a child to:
<Text style={{ textAlign: 'center', fontSize: 30 }}>
{index}
</Text>
replace it with
<Text style={{ textAlign: 'center', fontSize: 30 }}>
{`${index}`}
</Text>
Solution for me;
babel.config.js
plugins: ['react-native-reanimated/plugin']
and "expo start -c"
Related
I'd like help regarding the test code in the expo-camera, I am using expo go and once I run the code, it gives me this error: TypeError: undefined is not an object (evaluating '_expoCamera.CameraType.back'), here is the documentation for the expo-camera: https://docs.expo.dev/versions/latest/sdk/camera/ , I am currently using expocamera 12.3.0 and have used navigation.navigate to navigate to this tab thanks ! and here is the code I directly copied from the site
import { Camera, CameraType } from 'expo-camera';
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [type, setType] = useState(CameraType.back);
const [permission, requestPermission] = Camera.useCameraPermissions();
if (!permission) {
// Camera permissions are still loading
return <View />;
}
if (!permission.granted) {
// Camera permissions are not granted yet
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>
We need your permission to show the camera
</Text>
<Button onPress={requestPermission} title="grant permission" />
</View>
);
}
function toggleCameraType() {
setType((current) => (
current === CameraType.back ? CameraType.front : CameraType.back
));
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={toggleCameraType}>
<Text style={styles.text}>Flip Camera</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
margin: 64,
},
button: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: 'white',
},
});
Update: fixed it, just changed CameraType.back into Camera.Constants.Type.back, solved
I keep getting this error saying "ERROR Warning: React has detected a change in the order of Hooks called by MainMenuScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks". Really confused don't know why am getting this error if someone can please explain or show an example it would greatly be appreciated. Many thanks for considering my request.
Here is an image of the code.
function MainMenuScreen({ navigation, route, props }) {
const globalContext = useContext(Context)
const { setIsLoggedIn, appSettings, domain, userObj, setUserObj, setToken, address, setAddress } = globalContext;
const [selecedTab, setSelectedTab] = React.useState(tabs[0]);
return (
<View style={styles.container}>
<LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
<FlatList
data={tabs}
horizontal
showsHorizontalScrollIndicator={false}
style={{ flexGrow: 0 }}
keyExtractor={(item, index) => `${item}-${index}`}
renderItem={({ item: tab }) => {
return (
<TouchableOpacity onPress={() => setSelectedTab(tab)}>
<View style={[styles.pill,
{
backgroundColor: selecedTab === tab ? 'gold' : 'transparent',
},
]}>
<Text style={[styles.pillText, { color: selecedTab === tab ? 'white' : 'black' }]}>{tab}</Text>
</View>
</TouchableOpacity>
)
}}
/>
<FlatList
data={popularFood}
keyExtractor={item => item.key}
renderItem={({ item }) => {
return (
<View style={{ flexDirection: 'row' }}>
<Image source={{ uri: item.image }} style={{ width: 100, height: 100, margin: 10 }} />
<View>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.type}</Text>
<View>
<AntDesign name="star" size={20} color="gold" style={{ marginRight: 10 }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.rating}</Text>
</View>
</View>
</View>
)
}}
/>
<Text style={styles.title}>Address</Text>
<Text style={styles.title}>{address}</Text>
</LinearGradient>
</View>
);
};
Error:
ERROR Warning: React has detected a change in the order of Hooks called by MainMenuScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
It actually happens because of any bad practice for hook implementations
1 - Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function
NOTE: Implement your useState hooks first at top of the function
2 - Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions
3 - Getting Error during Test
If you get This Error when testing the component, be careful to where you set your custom hooks (replace to top of the function)
Best Practice
use eslint for lint your code avoid geting React Hooks Rules errors
install package with npm or yarn
npm install eslint-plugin-react-hooks --save-dev
Can someone help me with this Component, i want to make like this, but dont know how this white frames called? Can someone tell me this? And if we press that yellow Touchable Opacity it is showing whole Text, and if we press again it will became smaller!
Thanks in Advance , I am Just new in RN
You can easily create that card with a little bit of CSS.
Below is the sample app which shows you how you can achieve that.
Working Example: Expo Snack
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
Image,
TouchableOpacity,
} from 'react-native';
import { AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
import { newsFeed } from './news';
export default function App() {
const [news, setNews] = useState(newsFeed);
const showFull = (index) => {
const temp = [...news];
temp[index].toggle = !temp[index].toggle;
setNews(temp);
};
return (
<View style={styles.container}>
<FlatList
data={news}
renderItem={({ item, index }) => (
<View style={styles.card}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.paragraph}>
{item.toggle ? item.desc : `${item.desc.substr(0, 100)}...`}
</Text>
{item.toggle && (
<Image source={{ uri: item.img }} style={styles.img} />
)}
<View style={styles.bottomBar}>
<Text style={styles.date}>4/02/2021</Text>
<TouchableOpacity onPress={() => showFull(index)}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.moreBtn}>
{!item.toggle ? 'More' : 'Less'}
</Text>
<AntDesign
name={item.toggle ? 'up' : 'down'}
size={12}
color="orange"
/>
</View>
</TouchableOpacity>
</View>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
bottomBar: {
marginVertical: 5,
flexDirection: 'row',
justifyContent: 'space-between',
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
padding: 10,
backgroundColor: 'white',
marginVertical: 5,
borderRadius: 10,
},
title: {
marginVertical: 5,
fontSize: 18,
fontWeight: 'bold',
},
img: {
flex: 1,
height: 100,
borderRadius: 10,
marginVertical: 5,
},
paragraph: {
fontSize: 14,
},
date: {
fontSize: 12,
color: 'rgba(21,21,21,0.5)',
},
moreBtn: {
fontSize: 12,
color: 'orange',
marginRight: 10,
},
});
actually this card is not a component you can design it using css and if you want to create a component which you can reuse then you can make one component and reuse it as you want and for this card either you can use your own css or a library called native-base which is
like bootstrap but it is used in react-native
you can read about native base here for more information
https://nativebase.io/
and if you want to create card of your own then make a separate file and make a funcional card component in it
and call it wherever you like
import myCustomCard from './card'
and to use it you use like this in your jsx
<myCustomCard />
and if you want to know more about how to pass props and else you can checkout official docs of the react native here
https://reactnative.dev/docs/getting-started
I am using RN 0.55.4 + Expo
I tried to use KeyboardAvoidingView to my form but it doesnt change anything with or without KeyboardAvoidingView, its still blocking my form. I am using
tcomb-form
This is my current code
return (
<View style={styles.container}>
<KeyboardAvoidingView>
<ScrollView>
<View>
<Header/>
<View style={styles.inputs}>
<LoginForm
formType={formType}
form={this.props.auth.form}
value={this.state.value}
onChange={self.onChange.bind(self)}/>
{passwordCheckbox}
</View>
<FormButton/>
<View >
<View style={styles.forgotContainer}>
{leftMessage}
{rightMessage}
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
)
This is the style
var styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1
},
inputs: {
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
forgotContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginLeft: 10,
marginRight: 10
}
})
This is the display
I also tried https://github.com/APSL/react-native-keyboard-aware-scroll-view library but still same result, keyboard is blocking the view / form.
Anyone know whats wrong?
For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding" :
<KeyboardAvoidingView behavior="padding">
Refering to react-native documentation :
Note: Android and iOS both interact with this prop differently.
Android may behave better when given no behavior prop at all, whereas
iOS is the opposite.
A working example on iOS and Android :
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>
It also happened to me... ScrollView and FlatList can work it out by setting a dynamic height depending on your data to FlatList. eg:
<ScrollView>
<FlatList style={{height: dataArr.length * YourInputHeight}}
...
/>
</ScrollView>
I hope all is well! First off, I'd like to thank you for being such a great developers and supporter of the SO community - you really make a difference!
I wanted to ask you about how to solve an error I continue to encounter when using react-native-overlay.
It seems when I put the overlay tags within a touchable highlight in order to bring the nested text to the forefront of the view - I get the following error:
Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component. I have tried adding a native method within the class and that did not work (posted on another topic).
Any help would be greatly appreciated!
Here's my code so far:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var Overlay = require('react-native-overlay');
var {
Text,
View,
StyleSheet,
Image,
TouchableHighlight,
AppRegistry
} = React;
var styles = StyleSheet.create({
container: {
marginTop: 0,
flex: 1
},
buttonText: {
fontSize: 24,
color: 'white',
alignSelf: 'center',
},
bgImage: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
resizeMode: 'cover',
},
});
class App extends React.Component{
makeBackground(btn){
var obj = {
flexDirection: 'row',
alignSelf: 'stretch',
justifyContent: 'center',
flex: 1,
backgroundColor: "#020202",
opacity: 0.3,
}
return obj;
}
goToProfile(){
console.log('Going to Profile');
}
goToRepos(){
console.log('Going to Repos');
}
goToNotes(){
console.log('Going to Notes');
}
render(){
return (
<View style={styles.container}>
<Image source={{uri: 'http://s3.amazonaws.com/rapgenius/1365796760_TommieSmithAP276.jpg'}} style={styles.bgImage} >
<TouchableHighlight
style={this.makeBackground(0)}
onPress={this.goToProfile.bind(this)}
underlayColor="#88D4F5">
<Overlay>
<Text style={styles.buttonText}>Causes</Text>
</Overlay>
</TouchableHighlight>
</Image>
<Image source={{uri: 'http://a57.foxnews.com/global.fncstatic.com/static/managed/assets/876/493/baltimore%20suspect%20injured.jpg?ve=1&tl=1'}} style={styles.bgImage}>
<TouchableHighlight
style={this.makeBackground(1)}
onPress={this.goToRepos.bind(this)}
underlayColor="#E39EBF">
<Text style={styles.buttonText}>News</Text>
</TouchableHighlight>
</Image>
<Image source={{uri: 'http://cdn.breitbart.com/mediaserver/Breitbart/Big-Government/2014/08/16/ferguson-rioter-tear-gas-AP.jpg'}} style={styles.bgImage}>
<TouchableHighlight
style={this.makeBackground(2)}
onPress={this.goToNotes.bind(this)}
underlayColor="#9BAAF3">
<Text style={styles.buttonText}>Hashtags</Text>
</TouchableHighlight>
</Image>
<Image source={{uri: 'http://www.swurvradio.com/wp-content/uploads/2015/06/Jason-Derulo-Ciara-and-Tinashe-honor-Janet-Jackson-with-a-dance-medley-at-the-BET-Awards-on-June-28-2015-in-Los-Angeles..jpg'}} style={styles.bgImage}>
<TouchableHighlight
style={this.makeBackground(3)}
onPress={this.goToNotes.bind(this)}
underlayColor="#9BAAF3">
<Text style={styles.buttonText}>Entertainment</Text>
</TouchableHighlight>
</Image>
</View>
)
}
};
AppRegistry.registerComponent('App', () => App);
The error I get is the following:
Error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component
stack:
ensureComponentIsNative index.ios.bundle:35696
React.createClass.componentDidMount index.ios.bundle:35353
CallbackQueue.assign.notifyAll index.ios.bundle:5332
ReactNativeReconcileTransaction.ON_DOM_READY_QUEUEING.close index.ios.bundle:16113
ReactNativeReconcileTransaction.Mixin.closeAll index.ios.bundle:6636
ReactNativeReconcileTransaction.Mixin.perform index.ios.bundle:6577
batchedMountComponentIntoNode index.ios.bundle:8012
Object.ReactDefaultBatchingStrategy.batchedUpdates index.ios.bundle:15893
Object.batchedUpdates index.ios.bundle:5095
URL: undefined
line: undefined
message: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native componenthandleException # ExceptionsManager.js:62
All Touchable has only one child and it should be native (View, Text, Image etc).