First, change the theme of IOS to the light, access the app, and look at the header, and there is a border bottom style in the header.
However, if you change the theme to dark and look at the header, there is no border bottom.
IOS Dark Mode
IOS Light Mode
Is navigation related to the theme of the device?
Example from #react-navigation documentation
Using the operating system preferences
On iOS 13+ and Android 10+, you can get user's preferred color scheme ('dark' or 'light') with the (Appearance API).
Try this example on Snack
import { useColorScheme } from 'react-native';
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from '#react-navigation/native';
export default () => {
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
{/* content */}
</NavigationContainer>
);
};
Related
I am new in react native and want to display images, i setup project with expo and try following code for displaying image i do some research but i think code is right, i don't know why it's not displaying in simulator, Do anyone have any idea.
code:
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
const ImageDetail = (props) => {
return (
<View>
<Image source={require('./beach.jpg')} />
<Text>{props.title}</Text>
</View>
)
};
const style = StyleSheet.create({
});
export default ImageDetail;
I have image in same folder where file is.
Provide a style with height and width for the Image, without that the image component wont display the image.
<Image style={{height:100,width:100}} source={require('./beach.jpg')} />
I am implementing font size accessibility in a NativeScript-Vue app.
I want to allow or prevent Label resizing through an XML attribute for both Android and iOS, but behavior and implementation on the platforms are different.
Android
All labels are scaled by default. If I want a label not to resize, I need to call the function setTextSize in the loaded event, following this solution.
<Label text="Not resizable" #loaded="$androidFixedLabelSize($event, 70)" />
Vue.prototype.$androidFixedLabelSize = function({ object }, fontSize) {
if (object.android)
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}
iOS
Labels are not scaled by default. To resize a label, I need to use nativescript-accessibility-ext plugin and add the attribute accessibilityAdjustsFontSize.
<Label text="Resizable" accessibilityAdjustsFontSize="true" />
Having to add one attribute for fixed Android and one for resizable iOS is a bit cumbersome.
I was thinking of having all labels resizable by default, and specify if I want one not to resize through a directive or an attribute.
Can I achieve this through a custom directive? Or something else?
Update
I was able to prevent resizing on Android through a directive without hardcoding font size, but there is a problem: update is triggered only for few labels. el.nativeView.android in bind and inserted hooks is undefined.
Vue.directive("noresize", {
update: el => {
if (el.nativeView.android) {
el.nativeView.android.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, el.nativeView.fontSize);
} else {
// iOS code
}
}
});
On iOS, I would like to simply set accessibilityAdjustsFontSize="false", but this implies that it is true by default.
So the next question is: how do I set accessibilityAdjustsFontSize="true" on all Label components on iOS?
Thanks to Morten Sjøgren, developer of #nota/nativescript-accessibility-ext, I was able to add a global event. Accessibility resizing is now applied on all Label components, unless the attribute noResize is true.
app.js
import '#nota/nativescript-accessibility-ext';
import { Label } from 'tns-core-modules/ui/label';
// code
Label.on(Label.loadedEvent, ({ object }) => {
if (object.noResize) {
if (object.android) {
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, object.fontSize);
}
} else {
object.accessibilityAdjustsFontSize = "true";
}
});
<Label text="Don't resize" noResize="true" />
I'm using react navigation V3 and i want to use swipe in my bottomTabNavigator.
i can't do it because createBottomTabNavigator don't support it any yet and createBottomNavigator is actually deprecated.
It is very annoying because in react navigation V2 we can do iteasily.
Just createMaterialTopTabNavigator support swipe but i want a bottom navigator and not a top one
If you take a look at the documentation for createMaterialTopTabNavigator you can see that in the TabNavigatorConfig there is the ability to set the position of the tab bar using tabBarPosition
Position of the tab bar, can be 'top' or 'bottom', default is top
So if you use createMaterialTopTabNavigator instead of createMaterialBottomTabNavigator and set tabBarPosition: 'bottom' in your config you should get a createMaterialTopTabNavigator but at the bottom.
Here is what it should look like in code
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Screen1',
tabBarPosition: 'bottom' // <- add this line to your config
}
const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);
Here is a snack showing it working https://snack.expo.io/#andypandy/materialtopnavigator-at-the-bottom
I'm trying to open the browser window without leaving the app when I click a URL (for both iOS and Android).
The behavior should be as follows (with airbnb app example):
Clicks in "Terms and conditions" link: links example
Open the browser in-app:
For iOS: in-app browser iOS
Same for Android.
How can I do this? Do I need to use any specified existing library?
I'm using react-native 0.37.
You can use the new InAppBrowser plugin for React Native, check the next example:
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn';
...
async openLink() {
try {
const isAvailable = await InAppBrowser.isAvailable()
const url = 'https://www.google.com'
if (isAvailable) {
InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: 'gray',
preferredControlTintColor: 'white',
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: true,
}).then((result) => {
Alert.alert(JSON.stringify(result))
})
} else Linking.openURL(url)
} catch (error) {
Alert.alert(error.message)
}
}
...
On the other hand, you can use this plugin with deep linking, check the README of the project.
Opens Safa Module Method
On iOS SafariView 3rd party native module - https://github.com/naoufal/react-native-safari-view
On Android CustomTabs 3rd party native module - https://github.com/droibit/react-native-custom-tabs - however if the user does not have Chrome installed, it will pop open the link outside of your app in their default browser.
Alternative WebView Method
You can use a <WebView> but this is not using the real browser - http://facebook.github.io/react-native/releases/0.47/docs/webview.html#webview
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
Use React Native Custom Tabs to open in-app browser window in React native. It support both platform Android and iOS
You can use React Native In-App Browser Reborn. It works perfectly on both Android and iOS.
This library use react-native-safari-view (SafariView) on iOS and react-native-custom-tabs (ChromeView) on Android.
Use native react native linking to open a url
https://reactnative.dev/docs/linking
I'm using NativeScript with Angular.
Is there an attribute to specify on Labels/buttons to ignore the font increase due to accessibility settings?
I need a solution for both android and ios.
Thank you!
If anybody interested, I found a workaround of using FormattedString for Labels, this object does not scale.
I just had a look a NativeScript own code and noticed this:
https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/text-base/text-base.android.ts#L216
You could try this:
HTML:
<Label text="Fixed size text" (loaded)="fixedFontSize($event)"></Label>
TypeScript
import { Label } from 'ui/label';
...
fixedFontSize({object}, fontSize = 20) {
const label = <Label>object;
if (label.android) {
label.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}
}
This should lock the fontSize of the label, until the CSS is changed.