When I press the TouchableOpacity, it highlights, but a little over half of the time, it doesn't log press.
Why is the touchable area so small? It feels like it is only 1 x 1 pixel.
I already tried quite a few things, such as using a <View> wrapper and setting the width and height of the TouchableOpacity component.
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}
/>
TouchableOpacity has the size of the content in this example which means if the icon is very small then your touchable area will be very small. I usually set a square sized container style for icons and increase the size when necessary
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
height: 20,
width: 20
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}/>
Related
i managed to overlapped my searchbar over react native mapview, however with that i wont be able to pitch or zoom onto my map, are there any solution to this?
reason i wanted to add touchablewithoutfeedback over googleplacesautocomplete is due that googleplacesautocomplete will always prompt out virtual keyboard
return (
<Provider>
<MapView style={{
height: '100%',
width: '100%',
}}
ref={mapRef}
onMapReady={goToMyLocation}
initialRegion={location}
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
scrollEnabled={true}
zoomEnabled={true}
pitchEnabled={true}
rotateEnabled={true}
showsTraffic={true}>
{location &&
<Marker
image={require ('../../assets/map_icon.png')}
title="You are here"
coordinate={location.coords} /> }
</MapView>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{position: 'absolute', top: '5%', width: '100%', height: '100%'}}>
<GooglePlacesAutocomplete
placeholder="Search"
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'en',
components: 'country:my'
}}
GooglePlacesDetailsQuery={{fields: 'geometry'}}
fetchDetails={true}
listViewDisplayed='auto'
autoFocus={false}
enableHighAccuracyLocation={true}
enablePoweredByContainer={false}
onPress={(data, details = null) => {
console.log('data:', data)
console.log('details:', details)
console.log(JSON.stringify(details?.geometry?.location))
}}
onFail={error => console.log(error)}
onNotFound={() => console.log('no results')}
textInputProps={{
autoFocus: true,
blurOnSubmit: false,
}}
isRowScrollable={true}
styles={{
textInput: {
height: 35,
width: '80%',
fontSize: 16,
borderRadius: 12,
borderColor: '#5A5A5A',
borderWidth: 1,
marginHorizontal: '3%',
backgroundColor: '#ECECEC',
},
predefinedPlacesDescription: {
color: '#1faadb'
},
container: {
marginHorizontal: '3%',
},
listView: {
borderRadius: 12,
elevation: 1,
},
row: {
backgroundColor: '#ECECEC',
height: 35,
paddingTop: 10,
}
}}
renderRightButton={() =>
<TouchableOpacity onPress={() => navigation.navigate('Profile')}>
<Image
style={{height: 35, width: 35, marginRight: '3%', borderRadius: 36}}
source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
/>
</TouchableOpacity>}
/>
</View>
</TouchableWithoutFeedback>
<StatusBar style='auto' />
</Provider>
i tried wrapping mapview and view under touchablewithoutfeedback but that would result in react.children.only expected to receive single react.element.child
i also tried creating another view and wrapped mapview and googleplacesautocomplete in it then wrap that particular view in touchablewithoutfeedback, but still unable to zoom or pitch map
current view
based on the image attached, im not able to pitch or zoom into the map
I would try setting the height of the View element containing the GooglePlacesAutocomplete to a small fixed height like this:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{position: 'absolute', top: '5%', width: '100%', height: 65}}>
<GooglePlacesAutocomplete />
</View>
</TouchableWithoutFeedback>
Since the position of the View is set to absolute, its sitting on top of you MapView and not allowing you to interact with it properly. The only problem is now the encompassing View is set to a static height of 65 and when options become visible, they will drop out of view.
The GooglePlacesAutocomplete can be really tricky to overlay on a map because its position must be set to absolute in order to work on mobile. This means the height of the encompassing View will have to be toggled when the user is focused on the GooglePlacesAutocomplete.
Your final solution might look something like this (warning did not test):
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View
style={{
position: 'absolute',
top: '5%',
width: '100%',
height: this.state.autoCompleteFocused? "100%": 65
}}
>
<GooglePlacesAutocomplete
focus={()=>{this.setState({autoCompleteFocused: true})}
blur={()=>{this.setState({autoCompleteFocused: false})}
/>
</View>
</TouchableWithoutFeedback>
I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.
When I give the latter its property of absolute, it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.
Here are screenshots of before and after the inner element position on absolute:
Here's my code including the absolute property:
if (props.stream) {
return (
<>
<TouchableWithoutFeedback onPress={handleScreenPress}>
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={props.stream.toURL()} />
<CountDown time={time} />
{/* {showButtons && */}
<View style={{
// position: 'absolute',
}}>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleEndCall}
>
End Call
</Button>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleSpeakerSwitch}
>
Speaker
</Button>
</View>
{/* } */}
</View>
</TouchableWithoutFeedback>
</>
);
}
return (<> <Loader title="Connecting Your Call.." /> </>)
}
const styles = StyleSheet.create({
videoViewWrapper: {
flex: 1,
overflow: 'hidden'
},
android: {
flex: 1,
position: 'relative',
backgroundColor: 'black'
}
})
export default VideoCall;
I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.
If you want to achieve something like this, then see the code :
Check code :
export default class App extends React.Component {
render() {
return (
<View style={{flex:1}}>
<View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>
<TouchableOpacity
style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
</TouchableOpacity>
<TouchableOpacity
style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
check the link : expo snack
Hope it helps .feel free for doubts
Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.
I am developing a Facebook type application where i have a problem in my comments.js. In this file i have ScrollView and View wrape in a KeyboardAwareScrollView.When i click a button it's focus on TextInput correctly.The problem is only the keyboard is open and the child component inside the KeyboardAwareScrollView is not scrolled to the last TextInputs where they can focused.
What i do i can wrape the ScrollView and View into into one View but did't any help.Then i apply multiple way's i think there is issue in my code.
This question is ask multiple time i read these
1.React-Native button press after textInput in Keyboard aware scroll view
2.React Native KeyboardAwareScrollView doesn't work
3.Automatically scroll the view up when keyboard is shown in react-native
4.How to make your React Native app respond gracefully when the keyboard pops up
but didn't meet my condition.
Here is my code
<KeyboardAwareScrollView style={{flex:1}}
resetScrollToCoords={{ x:0, y: 0 }}>
<ScrollView contentContainerStyle={styles.scrollViewStyle}
keyboardShouldPersistTaps='always'>
<Image/>
<List/>
</ScrollView>
<View style={{ flexDirection: 'row', height: 50 }} >
<Image
style={{ height: 40, width: 40, marginLeft: 20 }}
source={require('../../assets/plus.png')}
/>
<View style={{ flex: 1, marginLeft: 20 }}>
<TextInput
autoGrow='true'
ref='myInput'
underlineColorAndroid='transparent'
placeholder='Type here to translate!'
onChangeText={text => this.setState({ text })}
>
{this.state.text}
</TextInput>
</View>
<TouchableOpacity
onPress={() => {
this.CommentsApi()
}}>
<Image/>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:
jsx:
<Modal style={styles.modal}
isVisible={props.categories.some(x => showModal(x))}>
<Container style={styles.modalView}>
<Header style={styles.header}>
<Left>
<Title
style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
</Title>
</Left>
<Right>
<Button
small
transparent
danger
rounded
icon
onPress={() => props.setAllShowSubcategoriesToFalse()}>
<Icon name="times" size={20} color='#9E9E9E' />
</Button>
</Right>
</Header>
<Content >
<SelectMultiple
labelStyle={styles.label}
items={getDisplaySubcategories(props.categories)}
selectedItems={
props.categories.filter(category => category.selected)
}
onSelectionsChange={props.toggleSubcategory} />
</Content>
</Container>
</Modal>
styles:
const styles = {
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 8,
height: 100
},
modal: {
padding: 10,
height: 100
}
}
Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?
I'm using react-native-modal
How about something like:
<Modal transparent>
<View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
{/* fill space at the top */}
<View style={{ flex: 1, justifyContent: 'flex-start' }} />
<View style={{ flex: 1, backgroundColor: 'white' }}>
{/* content goes here */}
</View>
{/* fill space at the bottom*/}
<View style={{ flex: 1, justifyContent: 'flex-end' }} />
</View>
</Modal>
This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.
Hopefully, that helps some bit
The given task here is to begin app with blinking cursor in the center of screen and keyboard hidden, then after clicking anywhere on the white space keyboard should appear like this:
I tried couple of things, but none of them was workiing, so is there any way to do this?
Here is the part of code I've came up whith already
return (
<ScrollView contentContainerStyle={styles.container}
scrollEnabled={false}>
<View
style={{
position: 'absolute',
right: 0,
left:0,
bottom: this.state.visibleHeight*1.5-this.state.height*0.5
}}>
<TextInput
autoFocus={true}
{...this.props}
multiline={true}
style={[styles.input, {height: Math.max(35, this.state.height)}]}
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,
height: event.nativeEvent.contentSize.height,
});
}}
onChangeText={(text) => {
this.setState({text});
}}>
<Text style={styles.input}>{parts}</Text>
</TextInput>
</View>
<View style={{position: 'absolute',
right: 20,
bottom: this.state.countHeight+10
}}>
<Text style={{color: limiterColor}}>{limiter}</Text>
</View>
</ScrollView>
);
https://rnplay.org/apps/sSKINg
link to the full app