react native error :undefined is not a function (evaluating 'this._pressRow()') - android

some code:
renderMovie(product) {
<TouchableHighlight
onPress={this._pressRow()}>
<View style={styles.container}>
<View style={styles.rightContainer}>
<Text style={styles.title}>{product.brand_domain}</Text>
<Text style={styles.year}>{product.product_name}</Text>
</View>
</View>
</TouchableHighlight>
}
_pressRow(){
this.props.navigator.push({
title:'detail',
component:DetailView
})
}
1.red screen and error log :undefined is not a function (evaluating 'this._pressRow()')
2.I use 'this._pressRow = this._pressRow.bind(this);' in constructor()
but its not work
3.doc example.but if I use 'onPress={this._onPressButton}' ,Click event no effect
renderButton: function() {
return (
<TouchableHighlight onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('image!myButton')}
/>
</TouchableHighlight>
);
},


You have a scope problem here..
To fix it there are two possible solutions :
You need to bind this to the method :
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie.bind(this)}
/>
You can use ES6 fat arrows
renderMovie = (product) => {
<TouchableHighlight
onPress={this._pressRow()}>
<View style={styles.container}>
<View style={styles.rightContainer}>
<Text style={styles.title}>{product.brand_domain}</Text>
<Text style={styles.year}>{product.product_name}</Text>
</View>
</View>
</TouchableHighlight>
}
and the _pressRow method :
_pressRow(){
this.props.navigator.push({
title:'detail',
component:DetailView
})
}


When you declare your renderRow function in your ListView, you should bind this to the method:
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie.bind(this)}
/>

Related

how to call this add function

I am using andSubject function to set the subject in the parent component but it's not working can someone help me how can I call addSubject when I press the RoundedButton?
...
const [tempItem, setTempItem] = useState(null);
.....
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => addSubject(tempItem)}
/>
</View>
...

I guess you are looking for something like this :
const [tempItem, setTempItem] = React.useState("");
const [addSubject , setAddSubject] = React.useState("");
...
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<Text>this text bellow will show after pressing on the button :</Text>
<Text>{addSubject}</Text>
<TextInput
style={styles.textInput}
onChangeText={setTempItem}
/>
<Button
title="+"
size={50}
onPress={() => setAddSubject(tempItem)}
/>
</View>
</View>
);
}
...
demo

You have to pass the function to children by props.
parent.js
function setAddSubject(item){
console.log(item)
}
<YourForm call={(item)=>setAddSubject(item) } />
YourForm.js
export default =(props)=>{
const [tempItem, setTempItem] = useState(null);
return (
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => props.call(tempItem)}
/>
</View>
);
}

How to get photo id with onPress function?

I need to open touched photo in new screen or modal window, but i can't even get it id with onPress function. Photos parsed from unsplash.com.
I've try to wrap my view with <TouchableWithoutFeedback> and by using onPress{} recieve id of photo that i'm pressed at.
getPhoto function:
_getPhoto = () => {
alert(this.state.item.id);
}
main view:
<TouchableWithoutFeedback onPress={this._getPhoto}>
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
numColumns={2}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex:1, flexDirection: 'column'}}>
<Image source = {{ uri: item.urls.raw }} style={styles.imageView} />
</View>
}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
/>
</View>
</TouchableWithoutFeedback>
I except to recieve at least photo id from json, but most of all i get errors like "undefined is not an object".
I solved this problem doing this:
renderItem={({item}) =>
<TouchableWithoutFeedback onPress = {this._getPhoto.bind(item.id)}>
<View style={{flex:1, flexDirection: 'column'}}>
<Image source = {{ uri: item.urls.raw }} style={styles.imageView} />
</View>
</TouchableWithoutFeedback>
}
but now onPress works on app launch.

The answer was in binding.I'm bind item.id to get function:
renderItem={({item}) =>
<TouchableWithoutFeedback onPress = {this._getPhoto.bind(item.id)}>
<View style={{flex:1, flexDirection: 'column'}}>
<Image source = {{ uri: item.urls.raw }} style={styles.imageView}
</View>
</TouchableWithoutFeedback>
}
And change content of _getPhoto to this:
_getPhoto(){
alert(this);
}
So it's works like it does.

How to use react-native-modal-datetime-picker to take multiple timings and display it

I have started learning react-native and I am using the react-native-modal-datetime-picker first time. I tried to take multiple timings from timePicker but I am not getting how to do it. I want to take 5 different timings for my app also I have to display it. following is my code for you to understand my requirement.
_showDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: true })
}
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = (time) => {
const selected1 = time.getHours() + ':' + time.getMinutes();
this.setState({ value1: selected1 })
this._hideDateTimePicker();
};
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>valu1 </Text>
<Text style={styles.textStyle2}> {this.state.selected1} </Text>
<TouchableOpacity style={styles.iconStyle}>
<Icon name='edit' color='#212B51' size={25} onPress={this.renderDateTimeModals} />
</TouchableOpacity>
</View>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Value2 </Text>
<Text style={styles.textStyle2}> {this.state.selected2} </Text>
<TouchableOpacity style={styles.iconStyle}>
<Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
</TouchableOpacity>
</View>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Value3 </Text>
<Text style={styles.textStyle2}> {this.state.selected3} </Text>
<TouchableOpacity style={styles.iconStyle}>
<Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
</TouchableOpacity>
</View>
<TouchableOpacity
style={[styles.buttonContainer, styles.loginButton]}>
<Text style={styles.loginText}> Submit </Text>
</TouchableOpacity>
<DateTimePicker
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode={'time'}
is24Hour={false}
/>
</ScrollView>
);
}
I want 5 different value picked and want to display them all. Please help Thanks in advance

Creating a GridView From Listview in ReactNative?(Without using libraries)

Consider a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.
So far,I've managed to get the results to display using the ListView components in rows (i.e. 2 result per row, see screenshot).
in one row.both the grids display data of a single person,i want
details in a consecutive manner not repeating.
</Content>
<View style={{backgroundColor: 'white'}}>
<Text style={{color: 'black',fontSize: 17,marginTop: 25,marginLeft: 15}}>Employees</Text>
</View>
<List dataArray={currentContext.props.employeeList}
renderRow={(data) =>
<ListItem>
{this.renderRow(data)}
</ListItem>
} />
</Content>
The function renderRow(data) is given by
renderRow(data){
return(
typeOne()
)
function typeOne(){
return(
<View style={styles.gridContainer}>
<Content contentContainerStyle={{
padding:6,
paddingBottom:0
}}>
<View style={{flex:1,}}>
<Row>
{renderCell(data.photo_url, 0,data.name)}
{renderCell(data.photo_url, 1,data.name)}
</Row>
</View>
</Content>
</View>
)
function renderCell(bg,pos,title){
if (pos%2==0) {
return(
<Col style={[{marginRight:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}else{
return(
<Col style={[{marginLeft:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}
function cellContent(bg,title){
if(bg==null){
return null
}
return(
<Button style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View style={styles.cellContent}>
<Image style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>
)
}
}
}
}
How can get the list-view to return 2 data's per row ?
I will give you similar question for reference in the below link
ListView grid in React Native
please help me solve this issue.
The style part
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'white',
},
button:{
color:'white'
},
overLayView: {
position:'absolute',
alignSelf:'center',
},
gridContainer: {backgroundColor:'#EDF0F2',flex:1,},
colStyle:{height:210,flex:1,marginBottom:6,marginRight:10,marginLeft:10},
cellContent:{position:'absolute',left:0,right:0,top:0,bottom:0},
cellTitleBg:{bottom:65,backgroundColor:'#778899',height:35},
cellTitle:{bottom:65,color:'white',fontWeight:'bold',fontSize:17,right:0,textAlign:'right',right:0}
})

Maybe use a wrapper library, I recommend this one: https://www.npmjs.com/package/react-native-easy-listview-gridview

Try this out...
pass index from the renderRow function down to this function where this view is defined.
<Button key={index} style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View key={index} style={styles.cellContent}>
<Image key={index} style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View key={index} style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text key={index} style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>

How can I findViewById() in react-native android

I'm referring to this in my index.android.js file..
<View>
<CustomView>
...
</CustomView>
</View>

This can be done by React.findNodeHandle.
In your case,
...
var { findNodeHandle } = React;
...
render: function() {
return (
<View>
<CustomView ref="customView">
...
</CustomView>
</View>
);
},
somethingLikeComponentDidMount: function() {
var customViewNativeID = findNodeHandle(this.refs.customView);
// Something else...
}
...
might do the work.
For a working example (natively binding two components), check out here as the JS part and here as the native Java part.

do use refs for the component which can act as the reference for the component
ex:
<View>
<TextInput style={styles.textInput}
ref={'usrname'}
placeholder={'Username'}
placeholderTextColor={'red'}
onChangeText={(userName) => this.setState({userName})}
value={this.state.userName} />
<TouchableOpacity onPress={this._onPressButton}>
<View style={styles.buttonContainer}>
<Text> Submit </Text>
</View>
</TouchableOpacity>
</View>
and onPress:
_onPressButton: function(e){
var x = this.state.userName;
alert(x); //we can also use alert(this.state.userName)
},

Categories

Resources