I can't seem to find this anywhere or I might be using the wrong keyword to search, but how do I change the barStyle on React Native (light-content/dark-content) based on the rendered background image's color
edit:
I have single screen which renders different kinds of images, what I want to achieve is how to change the barStyle based on what image currently showing on the screen. Is there even any way to do that?
case 1:
light-background image with dark-content barStyle
case 2
dark-background image with light-content barStyle
import statusbar and add in render method and set barStyle according to what you want.
try this
import { StatusBar, View } from "react-native";
render() {
return (<View>
<StatusBar barStyle="light-content" />
.....
</view>);
}
Setting StatusBar as transluent along with backgroundColor as transparent, you can achieve this which is as follows:
import React, { Component } from "react";
import { ImageBackground, StyleSheet, StatusBar } from "react-native";
const image1 = { uri: "https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero.jpg" };
const image2 = { uri: "https://reactjs.org/logo-og.png" };
export default class App extends Component {
componentDidMount() {
StatusBar.setTranslucent(true);
StatusBar.setBackgroundColor("transparent");
}
render() {
return (
<ImageBackground source={image1} style={styles.image}>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
image: {
flex: 1,
resizeMode: "cover"
}
});
If you use image1, your output will be like this picture.
If you use image2, your output will be like this picture.
I am newbie in ReactNative. ( I am very familiar with Raw Android)
Yesterday when I was using AsyncStorage ( incorrectly I think) , I met a problem that the View kept re-rendering every n millionseconds.
my code:
import React, { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'
import { AsyncStorage } from "react-native"
export default class StorageDemo extends Component{
constructor(props){
super(props)
AsyncStorage.setItem("visitTimes", 100)
this.state = {
isLoaded: false,
visitTimes: 0
}
}
readData = async () => {
try{
const result = await AsyncStorage.getItem("visitTimes")
this.setState(
{
visitTimes: result,
isLoaded: true
}
)
console.info("== loaded, this.state: ")
}catch(error){
console.error(error)
}
}
render() {
this.readData()
if(this.state.isLoaded){
return(
<View>
<Text>Loaded! </Text>
</View>
)
}else{
return(
<View>
<Text>Loading... </Text>
</View>
)
}
}
}
Also I opened a logcat window to check the log, I was shocked by the log: it kept re-rendering the View every 10 ms.
My environment:
Android SDK: 27
Windows
ReactNative 0.55
Device: VIVO Y67A ( Android 6.0 , 4G RAM)
code could be found here: https://github.com/sg552/react_native_lesson_demo/blob/master/screens/StorageDemo.js
I know my code is not correct (using async, await) , so my question is:
How to read from AsyncStorage and render it to page? How to correct my code?
thanks a lot!
Okay, so the problem is that you are calling your func this.readData() inside the render, and that function itself is calling setState which whenever is called, changes the state, which triggers a re-render on the component. So in this situation you have caused an infinite loop in the code, because setState calls render, which in turn calls setState again and you run out of memory.
To fix this quickly, you can remove the function call from your render, and add it to a button, so its only called when you want it to. Something like this:
import React, { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'
import { AsyncStorage } from "react-native"
export default class StorageDemo extends Component{
constructor(props){
super(props)
this.state = {
isLoaded: false,
visitTimes: 0
}
}
readData = async () => {
try{
const result = await AsyncStorage.getItem("visitTimes")
this.setState(
{
visitTimes: result,
isLoaded: true
}
)
console.info("== loaded, this.state: ")
}catch(error){
console.error(error)
}
}
render() {
if(this.state.isLoaded){
return(
<View>
<Text>Loaded! {this.state.visitTimes} </Text>
<Button
onPress={() => {
AsyncStorage.setItem("visitTimes", "100")
this.setState({isLoaded: false})
}}
title="Set Storage Item"
/>
</View>
)
}else{
return(
<View>
<Button
onPress={this.readData}
title="Load from async storage"></Button>
</View>
)
}
}
}
Try this and this should give you the value from localStorage!
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>
);
}
This is possibly just an Android 6.0 bug. I tested the snack below in Android 5.1.1 and Android 7.0 and it didn't happen there.
I am trying to do an autocomplete whenever the user types "#". I successfully do this, however once I backspace a couple times, the value on the native side becomes some value I never had before. I have simplified the case to this code below:
Please try the snack here - https://snack.expo.io/#noitsnack/what-the-heck---autocomplete-then-backspace-bug OR copy and paste the code into a new react-native init project. I tested in RN 0.51 and RN 0.54.
Please then type Hi #
You will see it autocompletes to Hi #foobar.
Then backspace once and it properly is now Hi #fooba.
Backspace again, and now it is Hi #foHi (this is the bug, it should be Hi #foob)
This is a controlled input. I have no idea why it's turning into Hi #foHi on second backspace. If I blur then come after step 3 it doesn't come back.
I tried on two other devices, Android 7.0 and Android 5.1.1, and this bug was not there. It only happened on my Android 6.0. I think this is a OS dependent bug. Does anyone have ideas on what is actually going on? That will help me on how to work around this on all devices.
Is this really a bug on RN side?
I recorded a screencast of this behavior here in HD:
https://gfycat.com/RectangularAltruisticEuropeanfiresalamander
Here is a GIF:
The code (copied from the expo snack):
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native'
class FieldMentionable extends Component<Props, State> {
state = {
value: ''
}
render() {
const { value } = this.state;
return <TextInput onChange={this.handleChange} value={value} multiline />
}
handleChange = ({ nativeEvent:{ text }}) => {
const { value } = this.state;
if (text.endsWith(' #')) this.setState(() => ({ value:text + 'foobar' }));
else this.setState(() => ({ value:text }));
}
handleRef = el => this.input = el;
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<FieldMentionable />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 100,
backgroundColor: '#F5FCFF',
}
});
This is a bug on and its root issue has been filed here - https://github.com/facebook/react-native/issues/19085
Just started Exploring React Native but unfortunately, I am stuck with this error
App(...): A valid React element (or null) must be returned. You may
have returned undefined, an array or some other invalid object
I have tried checking and taking reference with other question but did not able to figure it out. Kindly check the attached screen shot -
Here is how my index.ios looks like
import React from 'react';
import { AppRegistry, View } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';
//Create a Component
const App = () => {
<View>
<Header headerText={'Albums'} />;
<AlbumList />
</View>;
};
//Render it to the device
AppRegistry.registerComponent('albums', () => App);
Any suggestion will be really helpfull
Thank you.
Try adding a return in the App function:
const App = () => {
return (
<View>
<Header headerText={'Albums'} />;
<AlbumList />
</View>
);
};