I have implemented a flat list component by binding an array. when i tap an item . I have to get either item name or Id.
_renderList = ({ item }) => {
return (
<View style={styles.listContainer} onPress={this._selectedItem(item.text)} >
<Image style={styles.listImage} source={item.avatar} />
<Text style={styles.listText} >{item.text}</Text>
<Text style={styles.listVal} >{item.val}</Text>
<Image style={styles.listImage} source={require('../../resources/icons/MyAccount/arrowright.png')} />
</View>
);
}
<FlatList data={this.state.data} renderItem={this._renderList} />
Considering #SNT answer and bennygenel comments. I have added this. answer as both of their suggestions requires attention.
_renderList = ({ item }) => {
return (
<TouchableWithoutFeedback onPress={(event)=>this._selectedItem(item.text)}>
<View style={styles.listContainer}>
<Image style={styles.listImage} source={item.avatar} />
<Text style={styles.listText} >{item.text}</Text>
<Text style={styles.listVal} >{item.val}</Text>
<Image style={styles.listImage} source={require('../../resources/icons/MyAccount/arrowright.png')} />
</View>
</TouchableWithoutFeedback>
);
}
<FlatList data={this.state.data} renderItem={this._renderList} />
You can use TouchableOpacity, TouchableHighlitfor, TouchableWithoutFeedback onPress event. View doesn't provide onPress prop.
_renderList = ({ item }) => {
return (
<TouchableWithoutFeedback onPress={(item)=>this._selectedItem(item.text)}>
<View style={styles.listContainer}>
<Image style={styles.listImage} source={item.avatar} />
<Text style={styles.listText} >{item.text}</Text>
<Text style={styles.listVal} >{item.val}</Text>
<Image style={styles.listImage} source={require('../../resources/icons/MyAccount/arrowright.png')} />
</View>
</TouchableWithoutFeedback>
);
}
<FlatList data={this.state.data} renderItem={this._renderList} />
Related
icons are not coming.Alert is working.Cannot render the function icons inside flatlist.
pls help.I need your help.
myCode:
<FlatList
data={this.state.data}
//extraData={}
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={({ item }) =>
<View style={styles.cartView}>
<TouchableOpacity style={styles.touchView} onPress={() => Linking.openURL(item.app_link)}>
<Image style={styles.cartLogo} source={{ uri: item.app_resim }} />
</TouchableOpacity>
<Text style={styles.mainViewText}>{item.app_name}</Text>
<View style={styles.mainViewAltBar}>
<TouchableOpacity >
<Icon name="refresh-outline" size={30} color="#404040" />
</TouchableOpacity>
{this.appSet(item.app_namep)}
</View>
</View>
} />
appSet(value){
AppInstalledChecker.isAppInstalledAndroid(value)
.then((isInstalled) => {//not show icons but alert working
if (isInstalled) {
return (<Icon name="checkmark-outline" size={30} color="#404040" />);
} else {
return (<Icon name="close-outline" size={30} color="#404040" />);
//alert(isInstalled);
}
})
}
Thank you.
I am trying to make visible list of buttons on top of a multi-line text input, which is now working. But when i am clicking on one of these button nothing is happening.
I am using zIndex to bring the childComponent on top of TextInput, Now when i am clicking on these button TextInput is getting focus instead of triggering button click event.
I just started learning react-native so I am not able to understand where i need to make the changes for making it functional.
Sample Code structure given below:*
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Instead of using zIndex, use absolute position in view.
position: 'absolute'
Give absolute position to the view of child component
I am trying to render the child component on onPressevent, the console.log works fine but components in the return function doesn't works.
Parent component:
onPress = (img,title,content) => {
this.setState({
show:true,
img:img,
title:title,
content:content
})
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => this.onPress(item.urlToImage,item.title,item.content)}
>
<View style={styles.picsCont}>
<Image style={styles.pics} source={{uri: item.urlToImage}}/>
<Text style={{color:'white', fontSize: 15, fontWeight: '700', paddingTop:10}}>
{item.title}
</Text>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.title}
/>
{this.state.show ?
<NewsView
img={this.state.img}
title={this.state.title}
content={this.state.content}
/> :
null
}
</View>
);
}
}
Child Component:
export default class NewsView extends Component {
render() {
console.log(this.props.img)
return (
<View style={styles.container}>
<Image style={styles.picsCont} source={{uri:this.props.img}} />
<Text style={styles.news}>{this.props.title}</Text>
<Text style={styles.news}>{this.props.content}</Text>
</View>
)
}
}
Thanks for the help...!
It might be the styles. If your child component has position:'absolute', it´s probably under your parent component, you can try to put on your child component view zIndex:10
I have created an autoconplete search field which displays the places using mapbox API. I am using the ListView for sugesstions list. when list appears and I tap on the address i need to select, on the first tap keyboard hides and onPress works in the second tap.
I am trying to figure out what's wrong.
<View style={styles.container}>
<View style={styles.searchContainer}>
<View style={styles.mapMarkerContainer}>
{mapMarkerIcon}
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.textinput}
onChangeText={this.searchLocation}
placeholder="Type your address here"
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.inputVal}
placeholderTextColor="#fff"
/>
</View>
</View>
<View keyboardShouldPersistTaps='always' style={styles.listViewContainer}>
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress}
style={styles.listView}
renderSeparator={this.renderSeparator}
enableEmptySections
/>
</View>
</View>
renderAddress
renderAdress = (address) => {
return (
<TouchableOpacity onPress={() => this.onListItemClicked(address)} style={styles.listItem}>
<View>
<Text>{address.place_name}</Text>
</View>
</TouchableOpacity>
);
};
onListItemClicked
onListItemClicked= (address) => {
this.props.onAddressGet(address);
console.log(address);
this.setState({
searchedAdresses: [],
inputVal: address.place_name
});
}
You should move the keyboardShouldPersistTaps-property to the ListView as it is a property from ScrollView and will be inherited to ListView:
Instead of
<View keyboardShouldPersistTaps='always'
<ScrollView ...>
You need:
<View
<ScrollView keyboardShouldPersistTaps='always' ...>
https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps
I have Scroll View as a header and List view as Body.So I have to swipe scroll view pro-grammatically on list swipe.so in my current code i am getting the id of the scroll view where i need the component actually using which i can call, scrollview.scrollTo(); method.
render() {
return (
<View style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
ref={'abc'}
directionalLockEnabled={false}
horizontal={true}>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
</ScrollView>
</View>
<View style={styles.listcontainer}>
<ListView
dataSource={this.state.todaysData}
renderRow={this.renderRow}
onScroll={this.handleScroll}
style={styles.container}
/>
</View>
</View>
);
}
renderRow(rowData){
return (
<CustomListRowCards
title={rowData.title}/>
);
}
handleScroll(event: Object) {
// var input = this.refs.scrollview;
customViewNativeID.scrollTo(500, 0, true)
// alert(event.nativeEvent.contentOffset.y);
}
//CutomViewNativeId returns the id..But I need the view actually.Actually i am looking for something which works like findViewById() in android.I am an android developer..I am new to React-Native..Please suggest.Thank you in advance
In order to access any view you would normally do something like this:
class MyComponent extends React.Component {
viewOne = null
//state = {...}
useViewOne = () => {
this.viewOne.doSomething()
}
render() {
return (
<View ref={(viewRef) => this.viewOne = viewRef}>
</View>
)
}
}
Keep in mind that this.viewOne will be null in componentWillMount() and instead you should use it in componentDidMount()
I suggest looking into using the ref prop on your components. You can find more info here.