Develop Reference

A Swift/iOS Class Equivalent to Android Dialog?

If I want to create a pop up view in Android, say on clicking a button, a QR code will pop up and things behind will be blurred a bit, I called the Dialog class in Android/Java, which I think is more like a View in iOS.
May I know whether there is a class which is almost equivalent in iOS? I googled around and seems no one mention about that. While some might say I could use AlertController, I would say the experience is completely different. Dialog in Android can contain everything - text, buttons, images, layouts, you name it, while AlertController in iOS is literally just the alert and it does not expect you to do so much customization.
Can anyone illustrate the road ahead for me?

You use UIAlertController in Swift.
Example
DispatchQueue.main.async {
let alertController = UIAlertController(title: "My Title", message: "My Message", preferredStyle: .alert)
alertController.view.tintColor = UIColor.blue //Change this or remove
//Blur Effect
let blurEffect = UIBlurEffect(style: .light)
let blurVisualEffectView = UIVisualEffectView(effect: blurEffect)
blurVisualEffectView.frame = self.view.bounds
self.view.addSubview(blurVisualEffectView) //Add the blur effect to the dialog
//Set Image
var myImage = UIImageView(frame: CGRect(x: 89, y: 35, width: 95, height: 80))
myImage.image = UIImage(named: "MyImage")!
alertController.view.addSubview(myImage)
//Button actions
let cancelAction = UIAlertAction(title: "Cancel", style: .destructive) {_ in
blurVisualEffectView.removeFromSuperview()
}
let okAction = UIAlertAction(title: "OK", style: .default) {_ in
blurVisualEffectView.removeFromSuperview()
}
//Height constraint handler
var height: NSLayoutConstraint = NSLayoutConstraint(
item: alertController.view, attribute:
NSLayoutConstraint.Attribute.height,
relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil,
attribute: NSLayoutConstraint.Attribute.height,
//Change this as desired
multiplier: 1, constant: self.view.frame.height * 0.4)
alertController.view.addConstraint(height) //Set the constraint
alertController.addAction(cancelAction)
alertController.addAction(okAction)
//Display (present) the alertcontroller
self.present(alertController, animated: true, completion: nil)
}
Result
Breaking This Down
Declare the alertController. Set the title to "My Title" and the message.
Set the tintColor. This changes it to custom colors other than the default iOS blue tint.
Add the UIBlurEffect. "Tries" to mimic Androids AlertDialog. :)
Declare and add the UIImageView to the alertController as a sub view
Add the action buttons. cancelAction and okAction. Notice the style: property? This allows you to choose between .destructive, and .default. .destructive makes the button red-tinted, and .default leaves it as the alertController's tintColor.
Add a height constraint. Useful if you want more content visible (like UIImageViews)
Use the alertController.addAction functions to add our buttons, and present it.
Extra note: All of this is contained inside DispatchQueue.main.async {}. This is useful if you want to show your dialog before the parent ViewController is fully loaded. (E.G. You show your dialog in the .viewDidLoad function.

Why does my Nativescript-vue app crash when using the hardware back button before a modal is rendered?

I have an app built in Nativescript-Vue where detail pages are shown in modals.
I use the method $showModal() to open a modal, but when I press the hardware back button on an Android device before the modal is rendered, the app crashes and it's giving me the following error.
If I wait a second, it works just fine.
TypeError: Cannot read property 'nativeView' of undefined
Should I override the back functionality to wait before the modal is fully rendered?

I think NativeScript-Vue might be trying to access a non-existent ref.
If you want to override it manually you could adding something like the following to your modal:
import * as app from 'tns-core-modules/application'
export default {
data: {
...
rendered: false
},
methods: {
onBackButtonPress (message) {
if (!this.rendered) return
app.android.off(app.AndroidApplication.activityBackPressedEvent, this.onBackButtonPress)
this.$modal.close(message)
}
},
created () {
app.android.on(app.AndroidApplication.activityBackPressedEvent, this.onBackButtonPress)
},
mounted () {
this.rendered = true
}
}
I'm not sure though whether the listener that's added in the created method will be added in time to prevent the crash.

Laggy animations (tab bar/pager) with react-native

I have a quite typical problem of laggy animations during component rendering. However, as far as I understand, the common solutions I found in the documentation of react-native cannot be applied to my use case.
Let me explain: I have a tab pager implemented with (i) a ViewPagerAndroid containing a set of pages and (ii) a tab bar composed of a set of touchables and a line (Animated.View) that moves (translateX transform) when the pager X-scroll value changes.
Each page component follows the same logic:
when componentDidMount is called, it triggers a network call for loading data
once the data are loaded, the state is updated with the new data and the component is rerendered
the render method simply returns a FlatList that displays the loaded data (20 items only)
My problem is: if the user clicks on a tab while the pages are rendered, the animations are horribly laggy. Given that the animation and the rerendering are performed on the UI thread, I'm guessing that they are competing in some way.
I eliminated various causes, but wasn't able to find a proper solution to keep the animation fluid:
I replaced the network call with hardcoded data and a simple timeout; the UI is still laggy when the pages are rerendered
I tried to improve the rerendering time, but the FlatList is quite slow even using pure components.
I tried in release mode and there is no differences
The problem occurs also on a physical device (Nexus 5X, which is quite powerful)
It's not specific to my implementation, I tried github.com/skv-headless/react-native-scrollable-tab-view and github.com/zbtang/React-Native-ViewPager
I know about InteractionManager and TimerMixin.requestAnimationFrame, but it's useless in my case: when the rendering is started, the user can still click on the tab bar buttons and it's not an option to wait the end of the render (laggy).
I uploaded my code in a github repository (https://github.com/benjaminbillet/tabbartest), in case you want to have more details. It's quite straightforward, but don't hesitate to ask me more details.
Some additional information:
react-native 0.46.4
node 8.2.0
npm 5.3.0
tried only on Android.
Do you think I should fill a bug report?
Thanks a lot.
EDIT-1 Here is a simplified version of the animation code:
render() {
const underlineStyle = {
position: 'absolute',
left: 0,
bottom: 0,
width: this.tabWidth,
height: underlineHeight,
backgroundColor: underlineColor,
transform: [{
translateX: this.pagerScrollX.interpolate({
inputRange: [0, 1],
outputRange: [0, this.tabWidth],
}),
}],
};
return (
<View style={[styles.tabs, style]}>
...
<Animated.View style={underlineStyle} />
</View>
);
}
onPageScroll(offset) {
const { offset, position } = e.nativeEvent;
this.pagerScrollX.setValue(position + offset);
}

LayoutAnimation : how to not animate entering views?

I'm currently trying to animate a view change with LayoutAnimation.
Using this code :
LayoutAnimation.easeInEaseOut();
Produces :
Video
As you see, the "Filters" menu animates by fading in. I want it to not fadeIn (to appear at opacity 1 from start).
I tried doing :
LayoutAnimation.configureNext({
duration: 200,
create: {
type: 'easeInEaseOut',
},
delete: {
type: 'easeInEaseOut',
},
update: {
type: 'easeInEaseOut',
},
});
But I get the error : Unsupported layout animation createConfig property (null). Is it possible to not animate created views with LayoutAnimation ?

You should be able to simply omit the create and delete keys:
LayoutAnimation.configureNext({
duration: 200,
update: {
type: 'easeInEaseOut'
}
});
The error Unsupported layout animation createConfig property (null) is caused by a missing required value called property on the create/delete animations.

React native Android VerticalDownSwipeJump bug

I use the VerticalDownSwipeJump when rendering a new scene in my React Native project. New scenes are supposed to come into view from above, pushing the current scene out of view.
On iOS this works as expected, on Android however the new scene being rendered comes into view from the above AND the right side as well.
Not sure why this is the case on android and not on iOS...
I haven't found any reports of this issue on SO or the React Native Github.
Any clues why this is happening?

This is quite old question, but maybe somebody will have the same problem. First of all, You can customize this view. The animations are defined here:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfig.js
Below steps which I have made:
1.
I've created my own object:
var FromTheRightCustom = {
opacity: {
value: 1.0,
type: 'constant',
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
I've replaced FromTheRight to FromTheRightCustom in two places:
i)
var FromTheDown = {
...FromTheRightCustom,
ii)
var FromTheTop = {
...FromTheRightCustom,
The only difference, that in Android you will have empty space made by StatusBar. This can be fix e.g. by backgroundColor of navigator (sceneStyle).