I have the following component:
<Switch trackColor={{true: COLORS.accent, false: COLORS.grey}} style={styles.switch} value={this.state.notifyOnEntry} onValueChange={(value) => {this.onToggle('notifyOnEntry', value)}} />
I want to change the thumbColor and set it two different colours for when it is enabled or disabled as I did it for the trackColor. I was expecting this to be the same as for trackColor but thumbColor is a single colour and not an object.
Is it possible to change it?
You can provide the color by a condition like below
import React, { useState } from "react";
import { View, Switch, StyleSheet } from "react-native";
export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<View style={styles.container}>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? COLORS.accent : COLORS.grey}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
}
You can also use notifyOnEntry for the condition instead of the isenabled value.
I am using React Navigation 2 for a simple RN project with Expo. I am trying to get the header and tabs on the bottom to display over a blurred background so I have done a HOC to wrap the library Header with a BlurView to provide that functionality. It renders the blur fine but unfortunately the title, back buttons etc. are lost in the process. Is there a way to do that in React Navigation, the code I use is as follows:
const wrappedHeader = props => (
<BlurView tint="light" intensity={80} style={styles.header}>
<Header {...props}/>
</BlurView>
);
class HomeScreen extends React.Component {
static navigationOptions = {
header: props => wrappedHeader(props),
headerTitle: "Home Screen",
};
....
}
This is a tricky question that truly got me thinking for awhile.
Here's the solution I've found to get a native iOS feeling for a tab bar navigator:
import React from 'react';
import { StyleSheet } from 'react-native';
import { BlurView } from 'expo';
import { BottomTabBar } from 'react-navigation-tabs';
const styles = StyleSheet.create({
blurView: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
},
bottomTabBar: {
backgroundColor: 'transparent',
},
});
export default function TabBar(props) {
return (
<BlurView tint="light" intensity={90} style={styles.blurView}>
<BottomTabBar {...props} style={styles.bottomTabBar} />
</BlurView>
);
}
The problem seemed to be related to the BlurView styling.
Note: this code will only work after setting the tabBarComponent option on your navigator as the following:
export default createBottomTabNavigator({
// This part should be different on your side
Feed: FeedScreen,
Me: MeScreen,
Settings: SettingsScreen,
}, {
tabBarComponent: TabBar,
});
For the header, I guess it must be the same trick, but you would need to replace bottom: 0 with top: 0.
I'm developing an app with React Native and I'm testing with my OnePlus 6 and it has a notch. The SafeAreaView is a solution for the iPhone X but for Android, it seems there is no solution.
How to solve this kind of issue?
Do something like
import { StyleSheet, Platform, StatusBar } from "react-native";
export default StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
});
And then In your App.js
import SafeViewAndroid from "./components/SafeViewAndroid";
<SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
<Layout screenProps={{ navigation: this.props.navigation }} /> //OR whatever you want to render
</SafeAreaView>
This should work good as get height will take care of the knotch in android device by calculating the statusBar height and it will arrange accordingly.
A work around I had to use recently:
GlobalStyles.js:
import { StyleSheet, Platform } from 'react-native';
export default StyleSheet.create({
droidSafeArea: {
flex: 1,
backgroundColor: npLBlue,
paddingTop: Platform.OS === 'android' ? 25 : 0
},
});
It is applied like so:
App.js
import GlobalStyles from './GlobalStyles';
import { SafeAreaView } from "react-native";
render() {
return (
<SafeAreaView style={GlobalStyles.droidSafeArea}>
//More controls and such
</SafeAreaView>
);
}
}
You'll probably need to adjust it a bit to fit whatever screen you're working on, but this got my header just below the icon strip at the top.
Late 2020 answer: For anyone stumbling across this issue themselves, they have added support for this.
Follow this documentation page
You could also create helper component with this style applied right away like this
import React from 'react';
import { StyleSheet, Platform, StatusBar, SafeAreaView } from 'react-native';
export default props => (
<SafeAreaView style={styles.AndroidSafeArea} {...props} >
{props.children}
</SafeAreaView>
);
const styles = StyleSheet.create({
AndroidSafeArea: {
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
}
});
Make note that I also deleted unnecessary styles which breaks natural behavior of SafeAreaView which in my case broke styling.
As for use you simply use it like normal SafeAreaView:
import React from 'react';
import SafeAreaView from "src/Components/SafeAreaView";
render() {
return (
<SafeAreaView>
// Rest of your app
</SafeAreaView>
);
}
}
for more consistency import:
import { Platform, StatusBar } from "react-native";
and then use it like so:
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
if you're seeing this in 2020 and you also need the web support with the Android and iOS, type this in your terminal.
expo install react-native-safe-area-context
this will install the updated safe area context.
Then import the following stuffs into your app.js
import { SafeAreaView, SafeAreaProvider} from "react-native-safe-area-context";
add <SafeAreaProvider> before all the tags in your main function in app.js, also remember to close it at the end.
and finally, instead of view, add SafeAreaView.
Read more at the official expo website : SafeAreaContext
Although the docs says it is relevant only for iOS, when I used React's SafeAreaView it acted differently on different screens on Android.
I managed to fix the problem by implementing my version of SafeAreaView:
import React from "react";
import { Platform, View, StatusBar } from "react-native";
import { GeneralStyle } from "../styles";
export function SaferAreaView({ children }) {
if (Platform.OS == "ios") {
return <SaferAreaView style={{ flex: 1 }}>{children}</SaferAreaView>;
}
if (Platform.OS == "android") {
return <View style={{flex: 1, paddingTop: StatusBar.currentHeight}}>{children}</View>;
}
}
This was tested on an old device (with hardware navigation) and new notch devices (with software navigation) - different screen sizes.
This is currently the best or easiest way to implement SafeAreaView on Android and ios for both vanilla RN and Expo.
import { SafeAreaView } from 'react-native-safe-area-context';
function SomeComponent() {
return (
<SafeAreaView>
<View />
</SafeAreaView>
);
}
1 - expo install expo-constants
2- and do like this for example
import React from "react";
import Constants from "expo-constants";
import { Text, StyleSheet, SafeAreaView, View } from "react-native";
export default function HeaderTabs({ style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>
<Text>Hello this is status bar</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
},
view: {
flex: 1,
},
});
Instead of using Platform API, you can use expo constants.
npm i expo-constants
then import it in your component as
import Constants from "expo-constants"
and then in the styles you can use it like this
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight
} });
To see all the properties of Constants console log it you will find some more useful things.
Well, I had the same problem. I solved this using this lib React Native Status Bar Height, and I recommend because it´s a piece of cake to use.
And if you are using style-components you can add the getStatusBarHeight() on your styles.js like I did on the example below:
import styled from 'styled-components/native';
import { getStatusBarHeight} from 'react-native-status-bar-height';
export const Background = styled.View`
flex:1;
background:#131313;
margin-top: ${getStatusBarHeight()};
`
In the SafeAreaView Docs was told:
It is currently only applicable to iOS devices with iOS version 11 or later.
So now I definitely use it in my project but I use Platform to recognize device platform and for Android, I make a manual safe area for the status bar.
you can use react-native-device-info for device info and apply styling also with a notch
I used StatusBar from react-native instead of expo-status-bar and this worked for me on my OnePlus as well as other Android devices.
import { StatusBar } from 'react-native';
Expo solution(docs - android only):
import { setStatusBarTranslucent } from 'expo-status-bar';
Then in the component you can use useEffect hook:
useEffect(() => {
setStatusBarTranslucent(false)
},[])
for iOS you can use the <SafeAreaView> component from react-native.
ENRICO SECCO was right (i cant comment due to my stackoverflow reputation lol)! any safeareaview thingy doesn't work for me as well, so i get around with
import { getStatusBarHeight} from 'react-native-status-bar-height';
here how execute it, keep in mind that this is in my app.js, where i put all my stack.navigator + bottomtab.navigator
export default function App() {
//IGNORE ALL OF THIS, JUMP TO THE RETURN() FUNCTION!
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
await SplashScreen.preventAutoHideAsync();
await Font.loadAsync(AntDesign.font);
await Font.loadAsync({
'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'),
'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'),
});
await new Promise(resolve => setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
// Tell the application to render
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
//HERE!
<NavigationContainer>
<View style = {{
flex: 1, <- TO MAKE IT FULL SCREEN (PLEASE DELETE THIS)
marginTop: getStatusBarHeight(), <- TO PUSH IT DOWN FROM OFF SCREEN, MINE RAN OFF TO THE TOP LMAO (PLEASE DELETE THIS)
}} onLayout={onLayoutRootView}>
<Tabs/>
</View>
</NavigationContainer>
);
}
I'm trying to make the following example become fullscreen:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Alert } from 'react-native';
import BarcodeScanner from 'react-native-barcode-scanner-google';
export default class BarcodeApp extends Component {
render() {
return (
<View style={{
flex: 1
}}>
<BarcodeScanner
style={{
flex: 1
}}
onBarcodeRead={({data, type}) => {
// handle your scanned barcodes here!
// as an example, we show an alert:
Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`);
}}
/>
</View>
);
}
}
AppRegistry.registerComponent('brcodegooglern', () => BarcodeApp);
The problem is: At the moment, on my physical device, the screen renders only at half of its size.
I also wish to place elements like text and image on top of the camera visualization screen.
How to accomplish that?
PS: I'm using react-native-barcode-scanner-google instead of react-native-camera because the performance of onBarcodeRead seems to be slightly better.
I followed the instruction(https://facebook.github.io/react-native/docs/image.html) on using Image.resizeMode to resize my image to fit the content of the view. Below is my code.
import React, {Component} from 'react';
import {View, Image,StyleSheet, Dimensions} from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
class MainComponent extends Component {
render() {
return (
<TabNavigator tabBarStyle={style.tab}>
<TabNavigator.Item
title="护士说"
renderIcon={()=> <Image source={require('../../icons/main/tab-button_01_pre.png') }
resizeMode={Image.resizeMode.cover}/>}
>
</TabNavigator.Item>
</TabNavigator>
)
}
}
const screenHeight = Dimensions.get('window').height;
const style=StyleSheet.create({
tab: {
alignSelf: 'stretch',
height: screenHeight * 0.1
}
})
export default MainComponent
Below is the screenshot of my app. The image at the bottom got clipped. I have tried with the Image.resizeMode to be Image.resizeMode.cover, Image.resizeMode.contain and Image.resizeMode.stretch. All of them doesn't have any different on showing the image. What wrong with my code? How can I set the image size to fit the height of the tab bar?
After using uiautomatorviewer to check the view layout I found that the image height is bigger than the navigation item. So after add below style on the Image it works now.
image: {
height: screenHeight * 0.05
}