When using the following code this error occurs:
rngesturehandlermodule.attach gesture handler got 2 arguments expected 3
Code:
import React from 'react';
import {Text, View, StyleSheet, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'
export default class App extends React.Component{
render(){
return(
<View style={styles.container}>
<Image
style={{width:'100%', height:400}}
source={require('./assets/Login.png')}
resizeMode='cover' />
<Text style={{fontSize:30, fontWeight:'bold'}}>Hello User!</Text>
<Text style={{color:'gray', marginHorizontal:20, fontSize:10,textAlign:'center'}}> Welcome To The My Application I Am A Naqeeb Rajput The Developer Of The React Native</Text>
<View style={{flexDirection:'row', paddingVertical:20, margin:20}}>
<TouchableOpacity
onPress={()=>this.props.navigation.navigate('Login')}
style={{
width:100,
backgroundColor:'#0d47a1',
padding:10,
borderRadius:30,
marginVertical:1
}}>
<Text style={{color:'white', textAlign:'center'}}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
width:100,
backgroundColor:'#e3f2fd',
padding:10,
borderRadius:30,
marginVertical:1
}}>
<Text style={{color:'black', textAlign:'center'}}>Sign Up</Text>
</TouchableOpacity>
</View>
<Text style={{fontSize:16, marginTop:7}}>Or via Social</Text>
<View style={{flexDirection:'row'}}>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#283593', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15 , fontWeight:'bold'}}>f</Text>
</View>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#b71c1c', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15, fontWeight:'bold'}}>g</Text>
</View>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#311b92', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15, fontWeight:'bold'}}>In</Text>
</View>
</View>
</View>
)
}
}
Related
I created a custom renderItem using the React Native documentation as an example and it is not working, however, when using a simple component (commented in the script), it is working perfectly. I have tried to change some things around, but I can't make it work.
For the flatlist, I based my code on the react native example at https://reactnative.dev/docs/flatlist, using the flat-list-simple example, calling the function in the render item as renderItem={Function} but react-native does not recognize it, I appreciate any guidance on what I could change or if I am doing the whole thing wrong, thank you!
import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native'
import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import VisitasHeader from './VisitasHeader';
const VisitasCard = ({visitas,titulo}) => {
// renderItem for FlatList
const CardFunction = (item) => {
<View style={{marginBottom:10}}>
<View style={styles.card_top}>
<View style={styles.holder}>
<View style={styles.icon}>
<Ionicons
name='ios-people-circle-sharp'
color='white'
size={48}
/>
</View>
<View style={styles.visitante}>
<Text style={styles.text_nombre}>{item.nombre} </Text>
<Text style={styles.text_cedula}>e-0000001</Text>
<View>
<Text style={styles.text_fecha}>2 de enero de 2022</Text>
</View>
</View>
</View>
</View>
<View style={styles.card_bottom}>
<TouchableOpacity style={styles.button_accept}>
<Text style={styles.button_text}>Aceptar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_reject}>
<Text style={styles.button_text}>Rechazar</Text>
</TouchableOpacity>
</View>
</View>
}
return (
<FlatList
ListHeaderComponent={<VisitasHeader title={titulo} />}
data={visitas}
keyExtractor={item => item.id}
renderItem={CardFunction}
// renderItem={({item}) => <View><Text>{item.nombre}</Text></View>} WORKS PERFECT WHEN USING THIS
ListEmptyComponent={<Text style={{textAlign:'center',paddingTop:10}}>No tiene visitas por aprobar.</Text>}
/>
)
}
export default VisitasCard
const styles = StyleSheet.create({
button_accept:{
backgroundColor:'green',
// margin:12,
padding:10,
borderRadius:12,
},
button_text:{
color:'white',
fontWeight:'bold',
},
button_reject:{
backgroundColor:'red',
// margin:12,
padding:10,
borderRadius:12,
},
card_bottom:{
height:50,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
borderWidth:1,
borderColor:'#3959ea',
borderBottomLeftRadius:8,
borderBottomRightRadius:8,
justifyContent:'space-evenly'
},
card_top:{
height:100,
backgroundColor:'#3959ea',
borderTopLeftRadius:8,
borderTopRightRadius:8,
alignItems:'center',
justifyContent:'center',
},
holder:{
flexDirection:'row',
},
icon:{
padding:10,
alignItems:'center',
margin:12,
},
text_cedula:{
color:'white',
fontSize:18,
textTransform:'uppercase',
fontWeight:'600',
},
text_nombre:{
color:'white',
fontSize:24,
textTransform:'capitalize',
fontWeight:'800',
// ellipsizeMode:'head',
// numberOfLines:1,
},
text_fecha:{
color:'white'
},
visitante:{
flex:2,
justifyContent:'center',
alignItems:'flex-start',
}
})
try add { item } and add return
const CardFunction = ({ item }) => {
return (
<View style={{ marginBottom: 10 }}>
<View style={styles.card_top}>
<View style={styles.holder}>
<View style={styles.icon}>
<Ionicons
name="ios-people-circle-sharp"
color="white"
size={48}
/>
</View>
<View style={styles.visitante}>
<Text style={styles.text_nombre}>{item.nombre} </Text>
<Text style={styles.text_cedula}>e-0000001</Text>
<View>
<Text style={styles.text_fecha}>2 de enero de 2022</Text>
</View>
</View>
</View>
</View>
<View style={styles.card_bottom}>
<TouchableOpacity style={styles.button_accept}>
<Text style={styles.button_text}>Aceptar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_reject}>
<Text style={styles.button_text}>Rechazar</Text>
</TouchableOpacity>
</View>
</View>
);
};
I Import Fontisto import { Fontisto } from "#expo/vector-icons";
Add an Icon <Fontisto style={styles.windDirectionArrow} name='arrow-up' />
and the styling to rotate it
const styles = StyleSheet.create({
windDirectionArrow: {
fontSize: 40,
transform: [{ rotate: "90deg" }],
},
});
But the transform is not working, does anyone know any other solutions for this?
The view I am rendering looks like this
return (
<View style={styles.container}>
{error ? (
<View style={styles.centeredContainer}>
<Text style={styles.text}>Unable to load weather data</Text>
<Text style={styles.text}>{error}</Text>
</View>
) : isLoading ? (
<View style={styles.centeredContainer}>
<Text style={styles.text}>Loading Weather Data</Text>
<ActivityIndicator
style={styles.activityIndicator}
size='large'
color='rgb(255,179,25)'
/>
</View>
) : (
<View style={[styles.centeredContainer]}>
<Fontisto style={styles.text} name={icon} />
<Text style={styles.text}>{temperature}˚C</Text>
<Text style={styles.text}>
<Fontisto name='arrow-up' style={styles.windDirectionArrow} />
{windSpeed}mph
</Text>
<Text style={styles.text}>{weatherCondition}</Text>
</View>
)}
</View>
);
It works if I have the Icon element wrapped in its own but I think that is not a clean solution
<Text style={styles.text}>
<View>
<Fontisto name='arrow-up' style={styles.windDirectionArrow} />
</View>
{windSpeed}mph
</Text>
It works perfectly for me
// With Rotation
<Fontisto name="arrow-up" style={styles.windDirectionArrow} />
// Without Rotation
<Fontisto name="arrow-up" style={styles.withoutRottion} />
// When icon is wrapped inside a View and that View is rotated
<View style={styles.windDirectionArrow}>
<Fontisto name="arrow-up" style={{ fontSize: 40 }} />
</View>
My Styles :
windDirectionArrow: {
fontSize: 40,
transform: [{ rotate: '90deg' }],
},
withoutRottion: {
fontSize: 40,
},
Working Example
And also why don't you use arrow-right from Fontisto
And for Text Side by side
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<View style={styles.windDirectionArrow}>
<Fontisto name="arrow-up" style={{ fontSize: 40 }} />
</View>
<Text style={styles.text}>{windSpeed}mph</Text>
</View>
I was messing with my code and suddenly the ScrollView decided to disappear.
For some reason, the ScrollView works "properly" inside the Character bar View
but when it is inside of the base View it just isn't there.
export default class CharacterSheet extends Component {
render() {
return (
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<View style={{flex:1}}>
<View style={styles.CharacterBar}>
</View><View style={styles.Base}>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
</View>
</ScrollView>
</View>
<Animated.View style={styles.CharacterStatsBar}>
</Animated.View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
CharacterBar:{
height:72,
backgroundColor:'#242527'
},
CharacterStatsBar:{
position:'absolute',
top: 72,
left: 0,
right: 0,
height:72,
backgroundColor:'#404040',
borderBottomWidth:2,
borderBottomColor:'#c53131',
borderTopWidth:1,
borderTopColor:'#838383',
},
Base:{
flex:1,
backgroundColor:'#fff',
},
scroll:{
width:'95%',
alignSelf:'center'
},
spellsBox:{
height:80,
marginTop:10,
paddingVertical:10,
borderColor:'#777',
borderWidth:3,
justifyContent:'center'
}
});
I'm trying to run this in an android device
this problem is pretty annoying and is stressing me a little bit.
Try Like this , don't wrap ScrollView inside multiple Views.
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>byee</Text>
</View>
</View>
</ScrollView>
</View>
render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code
I'm trying to add the 3 littles dots on the right of a card to show more information on click but cannot find how this is called.
On android it is called ""overflow menu" but the only component using overflow I found is "toolbarAndroid". I cannot use it because i work on Android & IOS.
Did you know how to do this ?
Actually i'm using "react-native-elements" for the card but they don't provide this option.
Maybe i have to create a component for that
My actual code, not using "title" props of card because i don't want to display the divider line.
renderProject(project) {
const { id, name, description, species, images } = project;
return (
<Card containerStyle={thisstyles.cardContainerStyle} key={id}>
<View>
<Text style={thisstyles.projectName}>{name}</Text>
</View>
<View style={{marginLeft:15}}>
<Text style={{color:'mediumvioletred'}}>{description}</Text>
<Text>
{species} Espèces {images} Images
</Text>
</View>
</Card>
);
}
As you have used custom component just add Image to show triple dots.
<View>
<Text style={thisstyles.projectName}>{name}</Text>
<Image style={position: 'absolute', right: 0}
source={require('../../path/to/image')} />
</View>
In your given module react-native-elements,
<Card
title='HELLO WORLD'
image={require('../images/pic2.jpg')}> // you can play around with this
You can Crate Your component Like this without any image
import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';
import {Text,Header,CardItem} from 'native-base';
class CardExample extends Component{
_renderSearchResult(){
return(
<View>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
</View>
)
}
render(){
return(
<View style={styles.container}>
{this._renderSearchResult()}
</View>
)
}
}
const styles={
container:{
flex:1,
},
cardView:{
elevation:5,
marginTop:8,
},
locationRowContainer:{
flexDirection:'row',
marginTop:21,
},
addressContainer:{
flex:3,
justifyContent:'center',
alignItems:'flex-start'
},
locationText:{
fontSize:16,
color:'black'
},
circleDot:{
backgroundColor:'black',
height:6,
width:6,
borderRadius:6/2,
marginBottom:2,
},
mapLocationContainer:{
flex:1,
justifyContent:'center',
alignItems:'flex-end'
}
}
export default CardExample;