React Native — Status Bar and Image Styles

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

StatusBar

The StatusBar lets us control the status bar with our app.

For example, we can write:

import React, { useState } from 'react';
import { Button, StyleSheet, StatusBar, View } from "react-native";
import Constants from "expo-constants";

export default function App() {
  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
  const changeVisibilityStatusBar = () => {
    setVisibleStatusBar(!visibleStatusBar);
  };

  return (
    <View style={styles.container}>
      <StatusBar backgroundColor="blue" barStyle='dark-content' />
      <View>
        <StatusBar hidden={visibleStatusBar} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We added a StatusBar that can be toggled with the hidden prop.

And we also added one that has the backgroundColor set to 'blue' .

The barStyle sets the status bar style, which is 'dark-content' .

It can also be set to 'default' and ‘light-content’ .

Image Style Props

We can set our image to display with the style we want.

For example, we can write:

import React from 'react';
import { View, Image } from "react-native";

export default function App() {
  return (
    <View>
      <Image
        style={{
          resizeMode: "cover",
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

to set the width and height .

The resizeMode sets how the image is resized.

We can set it to 'cover' , 'contain' , 'stretch' , 'repeat' , or 'center' .

Also, we can set the tint color. For example, we can write:

import React from 'react';
import { View, Image } from "react-native";

export default function App() {
  return (
    <View>
      <Image
        style={{
          tintColor: "lightgreen",
          resizeMode: "contain",
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

Then we can see that the image is a light green box instead of showing the original image.

Also, we can add a border around our image.

For example, we can write:

import React from 'react';
import { View, Image } from "react-native";

export default function App() {
  return (
    <View>
      <Image
        style={{
          borderColor: "red",
          borderWidth: 5,
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://reactnative.dev/docs/assets/p_cat2.png' }}
      />
    </View>
  );
}

We set the borderColor to 'red' and borderWidth to 5 to add the border.

Also, we can add border-radius to an image by writing:

import React from 'react';
import { View, Image } from "react-native";

export default function App() {
  return (
    <View>
      <Image
        style={{
          borderTopLeftRadius: 10,
          borderTopRightRadius: 10,
          borderBottomLeftRadius: 10,
          borderBottomRightRadius: 10,
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

We set the border-radius for the image for each corner with these properties.

Conclusion

We can control the status bar and manipulate images with React Native.