I'm using Button component from NativeBase, is there any way to giving feedback that showing user has pressed the button like TouchableOpactiy does?
Related
Hi I have tooltip buttons in my TextInput when user press open a tooltip and I'm taking TextInput values from an array because of that I'm using ScrollView or FlatList.
My problem is that the tooltip of the TOP TextInput is not all visible. As you see in the below tooltip of StoreKey stays outside of ScrollView(PINK).
Is there any way to show it outside of the ScrollView ?
Note: I can use also FlatList.
If I have data in a ScrollView, FlatList, or SectionList, and that data includes a button that the user can press on, tapping on the button once hides the Keyboard as expected:
onScroll={() => Keyboard.dismiss()}
but it does not trigger the button callback. It only works if you tap the same button a second time after the keyboard is hidden. Is there any way to fix this?
I figured out the answer from the docs, setting keyboardShouldPersistTaps="always"
I am building an app in react native with the use of react-navigation. On one screen I need to display a simple dialog to make sure user really wants to exit that screen.
I've tried to add BackHandler listener but that does not apply when the user clicks on the back arrow in the header. Is there any way, how I can prevent transition back before user click on the alert button?
implement "headerLeft" of Screen Navigation Options, like
headerLeft=()=>{
return <Button onPress={}>
}
then you can do anything you want in onPress callback
I am using the Modal component from react-native to creat a slide up menu for users to select. The issue with this is, if you wish to dim the background and animate with 'slide', it does this ugly thing of sliding a dimmed box up the screen, instead of dimming the whole background THEN sliding the view in.
So I tried to solve for this by using two Modals. One modal for the dark background to fade in and second modal to slide in with the menu with a transparent background.
This actually works, but when this.doneDayPicker changes the state of this.state.showModalDayPicker so both modals are no longer visible, <DarkModal> still appears. I'm left with <DarkModal> permanently on the screen.
What can I change to let <DarkModal> dissapear when this.state.showModalDayPicker is changed?
return (
<DarkModal visible={this.state.showModalDayPicker}>
<GoalModalScreen
visible={this.state.showModalDayPicker}
done={this.doneDayPicker}
title='Health benefits'
height={this.state.goalModalHeight}
>
{this.flatList()}
</GoalModalScreen>
</DarkModal>
);
Initially I would say this is because there is no done property on DarkModal like goalModalScreen?
Or use a Ternary Operator
{this.state.showModalDayPicker ? <DarkModal> : undefined}
You might also setup DarkModal's own toggle in state.
{this.state.toggleDarkModal ? <DarkModal> : undefined}
My react component hierarchy looks like
StackNavigation
- MainScreen
- List
- Row
- Button
My usecase involves go to a new screen on click of the button. My main screen receives react-navigation's navigation props. How do I pass it down to my button in a sane manner.
You'd better pass a callback to your button through all the hierarchy and call it when button is pressed. Afterwards when you know which button is pressed (on which row) you can navigate to necessary screen from your MainScreen.