Change barStyle React Native based on the rendered background image

user_11362347 0
Viewed 481

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

react-native statusbar android ios
2 Answers

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>);
    }
user_26852260

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"
  }
});
  1. If you use image1, your output will be like this picture.
  2. If you use image2, your output will be like this picture.
user_61742710
Related