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
Related
As I have multiple data that need to be display in the screen that will exceed the screen limit and I cannot scroll down to look at the other data. I researched and found that SafeAreaView and FlatList helps in solving the issue.
I tried to apply to my code:
<SafeAreaView style = {styles.container}>
<FlatList>
<Text style = {styles.header}>{paramKey} results:</Text>
{
todoData.map((item,index) => {
return(
<View key ={index}>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)
})
}
</FlatList>
</SafeAreaView>
After applying, my data cannot be displayed anymore. So I referred to the document: https://reactnative.dev/docs/flatlist
It seems like <FlatList> ends with /> and not <FlatList> ends with </FlatList>.
Example from the docs:
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
I tried ending <FlatList> with /> but it seems to be a syntax error in my IDE (Visual Studio code). How do I properly use <FlatList> in this case?
Flatlist do not accept children prop. Use renderItem prop instead:
<SafeAreaView style = {styles.container}>
<Text style = {styles.header}>{paramKey} results:</Text>
<FlatList
data={todoData}
renderItem={({ item }) => (
<View>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)}
/>
</SafeAreaView>
I have an old issue with scrolling some content inside TouchableOpacity (react-native). I've been trying to find any solution for months but nothing worked together with onPress/onPressIn/Out handlers. Any ideas?
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
<ScrollView>
{/* some content to be scrolled here */}
</ScrollView>
</TouchableOpacity>
use TouchableOpacity inside the Scrollview
<ScrollView>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
</ScrollView>
I have problem when trying to submit data from the TextInput component. When trying to press the button that invoke the callback that handle the text, there is a need to press it twice for it to work. Once for the TextInput lose its focus and the second time to invoke the callback.
I tried this solution but it didnt worked for me.
COMPONENT:
<Modal>
<ScrollView>
<Card>
<CardImage source={{uri: this.props.linkImage}}/>
<CardContent/>
</Card>
{
this.state.single.map((comment) => {
return comment[3] ?
<Comp/> : null
})
}
</ScrollView>
<KeyboardAvoidingView behavior="padding" enabled>
<CardAction>
<TouchableOpacity>
<IconFA name="reply"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-up"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-down"/>
</TouchableOpacity>
</CardAction>
<CardAction>
<TextInput ref={input => this.input = input}/>
<TouchableOpacity>
<IconFA name="rocket"/>
</TouchableOpacity>
</CardAction>
</KeyboardAvoidingView>
</Modal>
Just pass keyboardShouldPersistTaps="always" prop to ScrollView wrapping your component like this:
<ScrollView keyboardShouldPersistTaps="always">
...content
<ScrollView>
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 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} />