Introduction
Using React Native for numerous app functionality has been helpful. As a developer, you can easily integrate third-party native libraries in the root directory of the app. React Native app development company rely on the framework to shorten the sidelines and at the same time make the app much lighter. In this tutorial blog, I will show how you can use the third-party React Native package to build the ‘SET WALLPAPER’ button in your React Native app.
Let’s understand what are the prerequisites you need to meet.
Pre-required conditions
- Get the React Native environment in your system- For this you have to download all the software. Sneak peek into the tutorial blog to get a detailed explanation of how to do it.
- You should have the basic idea of creating a React Native app. Since the current blog is an intermediate phase of creating a ‘SET WALLPAPER’ button with which users can change their wallpaper, a basic understanding of the app building process will help you to grasp the learnings. Check this article at Hire tech firms if you want a guided solution.
Third-party React Native plugin
React Native framework has two tools namely React Native CLI and Expo CLI. you can use either of the tools to create apps. If you’re wondering if both the tools can be used to create apps then whether there is any difference between them. Yes, there are a multitude of differences. The most important being the support for third-party in the React Native CLI which is not available in Expo CLI. It makes the former tool much more effective in creating apps. You don’t need to make the app size unnecessarily large. You only need to find whether the features you want to integrate with your app are available in the react Native framework or not. If it does not, you have to install the required third-party packages.
For this project, you need the third-party plugin react-native-set-wallpaper. It helps in setting wallpaper. You need to import WallPaperManager from react-native-set-wallpaper. To install the package, run npm install –save react-native-set-wallpaper on the command prompt. You will also find other dependencies installed in the package.json folder of the app’s root directory. However, they are not used for this project.
Used React Native components
- Text- A React Native component used for adding text elements to the app’s interface. You can use different props under this component. Some of them are accessible, adjustsFontSizeToFit, allowFontScaling, accessibilityActions and oneAccessibilityActions and others. You have to get the component from the ‘react-native’ using the codeline: import {Text} from ‘react-native’. This way, you can use the Text component later in your code.
- View- View component is always used while creating the UI of the app. You can hold other React Native components like Button and Text with <View></View> You can als refer to this component as a container. You can include 0 to numerous child components in a View component.
- Button- Every app needs a press able button which users use to navigate through the app. The best part about the component is that you can customize the component with various props like onPress, color, title and others. Among these props, onPress is specifically a Handler which is called after the user clicks the button.
- StyleSheet- A styling component, StyleSheet can be used differently. Here, in our project, although we have imported the component from the ‘react-native’ package, we have not used it further for styling.
Let’s get into the interpretation of the code syntax
import {Button, StyleSheet, Text, View} from ‘react-native’;
import React from ‘react’;
import WallPaperManager from ‘react-native-set-wallpaper’;
The first lines of coding specify what components are used to build the app. Here, the components are Button, Stylesheet, View, Text, React and WallPaperManager. As you notice that these components are imported from different libraries. This is the ke rues that you, as React Native developer, needs to follow. The component WallPaperManager is not available in the React Native framework. So I have to get it from the third-party native library.
export default function App () {
This syntax exports the App () function using the export default. You can easily import it in other files whenever you need to use this component or 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);
},
);
};
Const is used to introduce a constant variable handle = () => {…}. I used const to make the image source provided under the uri as wallpaper. The WallPaperManager has two arguments namely uri and res. These are the strings which you need to use as arguments. Also, you have to include the console.log () function to print the res on the log. You can add different image sources to get different images as your app wallpaper. However, for this, you need to use the WallPaperManager.setWallpaper() function.
return (
<View>
<Text>Wallpaper</Text>
<Button title=”Set Wallpaper” onPress={handle} />
</View>
);
}
const styles = StyleSheet.create({});
Now the syntax specifies the use of the View component. It holds the Text and Button component. You can see that the Button has a title “SET WALLPAPER” on it. It also has onPress props which will call the constant Handle variable and change the wallpaper of the user.
Let’s get started with starting the emulator
It will require one or two steps and your app will start on the virtual device you have set up at the beginning.
- Open a command prompt on your system and pass npm install. This way, you will get the dependencies required for this project.
- Then pass a command npx react-native run-android on the same terminal. You need to wait for some time until the emulator bundles and starts.
- Your app will show a blue clickable button with a title ‘SET WALLPAPER’. Don’t forget to check the initial wallpaper before clicking the button or else you won’t notice the change.
- After clicking the button, go to the homepage and you will see a changed wallpaper similar to the source image you provided in the codebase.
Conclusion
Now you are done with creating a button with which you can easily change the wallpaper. Happy coding!!!