How to change wallpaper in React Native app

React Native as an app development framework provides a wide range of functionalities. Not only can you build a cross-platform app with small lines of coding but you can add different features to the app with ease. Here, I will show you the process to build a wallpaper interface in your app. Starting the emulator and testing the app is also an important task, which I will explain in this blog. Moreover, React Native development company are at ease in adding different functionalities in their app; thereby making the app more dynamic.

Prerequisites context

  • Set up the React Native environment. Since I am using the React Native CLI tool, you have to cover only the section of React Native CLI and not the Expo CLI section.
  • Get a brief idea of the customization of React Native components. This will help you understand the proper use of these components.

Components and React Native packages used

  1. StyleSheet– It is an RN (React Native) component and is used for transforming values and processing colors. If you have used CSS StyleSheets, you may have known that the StyleSheets used in React Native are similar to that of CSS. to use the component, you have to import the component from the react-native package. 
  2. Text- Text is one of the important React Native components which you can use in your codebase if you want to add text elements to your app interface. With the text component, you can render touch handling, styling, and nesting to your app interface. Here, in our current project, I have used the Text component to display a text ‘Wallpaper’ on the screen. Consider the following code syntax.
 <Text>Wallpaper</Text>
  1. Button- To get a clickable button for your app, you have to import the Button component from the react-native package. You can style the Button with designing properties such as colour, title, accessibilityLabel, onPress, and others. Here, in this project, I have provided a title “Set Wallpaper” on the pressable button and an onPress props to activate the handler. 
  2. React-native-set-wallpaper- It is a third-party React Native plugin that you can use if needed. In this case, since I am building a ‘wallpaper changing’ interface for our app, this package will be of immense help. For this project, I have used the WallPaperManager native components from the package. For this, you need to import the same component from the package: react-native-set-wallpaper.
  3. View- You can consider the View component as a container. It is because you can hold the text element, button, and other UI-based elements with the View component. However, to use the View component, you have to import it from the react-native package. It is one of the most significant components used in every project.

Let’s understand the code-syntax (How to change wallpaper in React Native app)

import {Button, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import WallPaperManager from 'react-native-set-wallpaper';
export default function App() {
  • To use the components later in the codebase, Imported the Text, View, StyleSheet, and Button components from the ‘react-native’ package. 
  • Based on the criteria of the project, you have to get the WallPapaerManager from the react-native-set-wallpaper’.  
  • Export default is considered to export the App function.
const handle = () => {
WallPaperManager.setWallpaper(
{
uri: 'https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg',
},
res => {
        console.log(res);
   },
);
};
  • () => {} is a type of argument type used in the code syntax.
  • A constant handle() function is introduced. Users can call this function when they press the Wallpaper button. 
  • This function further introduces the object  WallPaperManager. It has two arguments namely res and uri. 
  • You have to use the uri in projects like building wallpaper interfaces. This will allow you to direct the source. Here, I have included a  website under uri. It is the image that I want to set as my app’s wallpaper. Similarly, you can add your own. 
  • Res is used in react native to get data from a web server. It can allow you to focus on the significant segment of the response and thereby convert the fetched information to javascript
  • You use the console.log() function to print the value it holds. Here, as you can see, it will log the res on the console.
return (
    <View>
      <Text>Wallpaper</Text>
      <Button title="Set Wallpaper" onPress={handle} />
    </View>
  );
}
const styles = StyleSheet.create({});
  • return() function is used in the codebase to render the Text, Button, and View components. 
  • Further, the <Text></Text>  component is wrapped under the View component with the text ‘Wallpaper’. 
  • The View component has a Button component with an onPress function and a title. 
  • Later in the last line, the StyleSheet component is mentioned but not used.

Navigating through the emulator

I will guide you through the straps of starting the virtual device and running the built wallpaper app.

  • You have to run a few commands on the command prompt to get the emulator started. 
  • Firstly, run npm install. This will install all the needed dependencies in your system.
  • Secondly, run npx react-native run-android after you install the dependencies. 
  • Wait for a few minutes until the emulator appears on your laptop or PC screen. 
  • The app on the emulator will show a blue button ‘SET WALLPAPER’. You have to click on the button to change the existing wallpaper. 
  • Refer to the below-shown image for a change in my wallpaper.
  • I will suggest you check your initial wallpaper so that you are not confused about whether the wallpaper has changed or not.

Final words

Isn’t it quite an easy step to build a button that can change your phone’s wallpaper?  The most important task is to clear the basic concepts such as utilization and customization of React Native components. Also, it is necessary to assess the utility of React Native third-party plugins. Get some hands-on practice and create your own customized ‘Set Wallpaper’ button for your react native app.

Write for us
GeekyBeginners articles are written by software geeks like you. If you also would like to contribute to GeekyBeginners by writing paid articles, you can check the write for us page.

Leave a Comment