React Native seems to come with a few built in effects for "touchable" views, such as TouchableOpacity, TouchableNativeFeedback etc. but none of them fit my use case.
Is there an obvious way to change the styles on a button as it's depressed (change the background color or enlarge the button using transform:scale etc.)? Obviously I'd want it to revert to the default styles when the user stops holding the button.
Related
I want to replace the "refresh indicator" that is used in FlatList, etc. inside the RefreshControl. I am aware that there are some minor styling changes you can make with tint and colors to adjust the colors of the spinners on iOS and Android but I want to make my own spinner indicator entirely and disable the native spinners.
Is it possible to either disable the native spinners used during the refresh operation, or to replace them with my own custom spinners?
There is a way to create a component that run when KeyboardAvoidingView is running. For example, in a screen there are a TextInput (in the bottom like footer) and a Text. When I click in TextInput to edit (KeyboardAvoidingView is enable) I want the Text disappear. I know how can disappear the Text but I should find a way to detect when KeyboardAvoidingView open.
I just created react native app with expo init, built for Android. When i open app in landscape mode and after turn to portrait, the height of app is half of screen. https://i.stack.imgur.com/kzIlD.jpg
Here is code: https://github.com/catalin935/reactNativeHeightBug/blob/master/App.js
It looks like your view has been initialised with a height, perhaps Dimensions.get('screen').height?
If you want the view to always fill the screen, add flex: 1 to the styles to get it to flex to it's container rather than using height/width values.
Alternatively, you could attach an event listener to Dimensions to listen for the change event and use that to rerender your views although I'd only really recommend that if you want your UI to change depending on the screen ratio/orientation (eg, set a FlatList to use two columns rather than one in landscape mode. I have a small library called react-native-screenutils that may help you with that.
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
In React Native, there are at least three ways to make a button: TouchableNativeFeedback, TouchableHighlight and TouchableOpacity. There is also TouchableWithoutFeedback, which the documentation clearly states you should not use because "all the elements that respond to press should have a visual feedback when touched".
TouchableNativeFeedback is Android only and "replaces the View with another instance of RCTView"
TouchableHighlight "adds a view to the view hierarchy"
TouchableOpacity works "without changing the view hierarchy"
Are there any other significant differences between the three? Is one of them the goto component? In what case should you use TouchableHighlight over TouchableOpacity? Are there any performance implications?
I am writing an application right now, and find that all three have a significant delay between tap and the action (in this case a navigation change). Is there any way to make it snappier?
source: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, by Nick Wientge
TouchableHighlight
• What it does: Darkens or lightens the background of the element when pressed.
• When to use it: On iOS for touchable elements or buttons that have a solid shape or background, and on ListView items.
TouchableOpacity
• What it does: Lightens the opacity of the entire element when pressed.
• When to use it: On iOS for touchable elements that are standalone text or icons with no background color.
TouchableNativeFeedback
• What it does: Adds a ripple effect to the background when pressed.
• When to use it: On Android for almost all touchable elements.
Well, This is how I typically decide what to use:
If I'm building for Android-only, and the component is large enough that the native feedback will be visibly different than using the others then I use TouchableNativeFeedback
If I want to control the opacity on the component or I want the button to have color when touched, and I don't want to control the focused state of some element inside the Touchable, then I use TouchableHighlight. (TouchableOpacity has got some weird parts when you control opacity yourself).
In all other cases, I use TouchableOpacity because it's more "bare" than TouchableHighlight
I think the main essential difference as stated in Docs:
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.link
TouchableHighlight
TouchableHighlight A wrapper for making views respond properly to
touches. On press down, the opacity of the wrapped view is decreased,
which allows the underlay color to show through, darkening or tinting
the view.
The underlay comes from wrapping the child in a new View, which can
affect layout, and sometimes cause unwanted visual artifacts if not
used correctly, for example if the backgroundColor of the wrapped view
isn't explicitly set to an opaque color.
TouchableOpacity
TouchableOpacity # A wrapper for making views respond properly to
touches. On press down, the opacity of the wrapped view is decreased,
dimming it.
If you want to
highlight button on press — use TouchableHighlight
change button's opacity on press — use TouchableOpacity