I find it interesting to use React Native, but currently I just have one pain point:
The native look and feel of e.g. a iOS List.
So if I create a SwiftUI App in XCode and add a List with some text it looks like an native iOS list. But If I create a React Native app with an FlatList and then run in on my iPhone, it just looks like a list with absolutly no style.
Is there and plugin or whatever to get the "native" iOS 14 look and feel?
Related
iOS 16 introduces UIPasteControl as a way of avoiding the paste permission dialog appearing when an app programmatically accesses the clipboard contents.
To enable UIPasteControl, its target needs to be set to an object that conforms to UIPasteConfigurationSupporting, so typically a UIResponder like UIViewController or UIView. Then you would ensure the object's pasteConfiguration is set to allow the types you want to paste.
I've got a React Native app so there are no native iOS UIView etc. type objects being used directly.
If, for example, a paste button was to be added to a React Native view, then how can that be hooked up so that its using UIPasteControl?
If we consider the latest version of react native, there might we not see the functionality for UIPasteControl as per new iOS versions.
for this, I guess we should create our implementation and export the functionality to react-native to accomplish this requirement.
If you have hands-on experience with iOS native development and custom native UI views implementation in React Native then you can check out the following blog about the UIPasteControl implementation in native, to implement it natively and export it to React Native.
UIPasteControl(Native) demo : https://blog.kylelanchman.com/how-to-use-uipastecontrol-in-ios-16/
I've dug through stack / the general web and couldn't find anything on this.
I have a React Native / Web app built with Expo.
I have loaded a custom font via Expo Fonts as suggested.
let [fontsLoaded] = useFonts({"MyFont": require("pathtomyfont"})
Font loads great and displays. Lovely.
However, our designers are using
number case: lining,
number spacing: tabular,
I attempted to set this like so:
style={{fontVariant: ["lining-nums", "tabular-nums"]}}
Typescript seems quite happy with this - and it works just fine on the web and on android. However iOS seems to completely ignore this.
Am I setting this incorrectly on iOS? Notice in the outputs below how the 0's are correct on android but not on iOS. The web renders like android.
ios:
android:
I'm wondering if there is a way to see UI changes in an iOS application without having to restart the device or simulator. I know in react native since they use Javascript you're able to make a change to the background colour of a view and the background would reflect that change without having to restart the simulator. So I'm thinking since react native just converts javascript into native app code this might be possible in Native Development? Yes no maybe?
Doing normal native iOS development in the typical way -- no.
But, if you reproduce what ReactNative is doing (defining a data format for UI, loading it, and then wiring it up dynamically), then you can re-create it.
You might want to look into SwiftUI, which gives you a way to preview in Xcode without running the entire app.
Without that, if you use modules for all your UI code, you could incorporate a playground and see live changes as you code as well.
Apple specifies that users can change their icon to give a more personalised experience. See docs here:
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/#user-selectable-app-icons
My question is regarding using this functionality in React Native. Building an app in React Native is it possible to access this setAlternateIconName method and provide the user with alternate app icons? Does React Native provide a nice way to interact with this IOS method?
I am currently trying to build this out. This package seems designed to do what we both are looking for, but I haven't tried on anything that I have actually deployed yet.
https://github.com/skb1129/react-native-change-icon
use can use this module react-native-alternate-icons, it allows to access to setAlternateIconName method
While developing a phonegap smartphone application which runs on ios/android and bb v6+, im using a web service call to google maps and using tags for navigating through the application. I received an answer from apple with the following rejection message:
We found the following issues with the user interface of your app:
- Did not include iOS features. For example, it would be appropriate to use native iOS buttons and iOS features.
Additional user interactive features are needed.
My app has 2 buttons, one for searching and one to view the search results, both of which are non-native, html < button > tags.
Is it possible to use the native iOS buttons with a phonegap project, i.e using the search button (magnifying glass with word 'search' underneath), with a plugin?
Is it possible that my app was rejected for using a Google Maps web service call? if that were the case, i imagine the rejection message would be similar to the rejection message seen in this previous post
Any ideas/suggestions/guidelines would be great,
thanks
You could implement the NativeControls plugin. Judging by your screenshots a the iOS tab bar should work well with your app.
Not using native controls isn't a problem in itself. However, your app is too close to the appearance of a standard iOS settings page, which means that anything which doesn't exactly match that will feel broken.