0

I'm new to React, I managed to upload an image from the local phone gallery and store its URI in a global variable, but I can't find anywhere how to set the image to my phone background image (not in react!). The end goal is to allow a change by date in the background. Assuming I can use global.frstImgURI, and global.secImgURI and global.thrdImgURI as my images path (by import). How can I achieve that?

Currently, I manage to upload an image, then show it in my react native, BG, but not on my phone. My current code for choosing image:

import React from 'react';
import {View, ImageBackground, StyleSheet, Dimensions} from 'react-native';
import global from '../components/global'

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const BackgroundImg = () => {
    return <View>
                <ImageBackground
                    source={{uri: global.day1_image }}
                    resizeMode="stretch"
                    style={styles.img}>
                </ImageBackground>
            </View>
};
export default BackgroundImg;
const styles = StyleSheet.create({
    img: {
        height: screenHeight,
        width: screenWidth,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

Show it on React BG:

import * as React from 'react';
import { View } from 'react-native';
import BackgroundImg from '../components/Background_image'
const App = () => {
    return (
        <View>
            <BackgroundImg />
        </View>
    );
};
export default App;

My thought is using a dynamic list, and changing images by if statement connected to time (still didn't implement), but as said, I can't find how to change the phone image BG at all. Thanks!

Cohenis
  • 1
  • 3
  • By `phone background image` you mean actual phone wallpaper? On main screen where you have your apps/folders? – Doger Jun 14 '22 at 17:25
  • If so, then try [this](https://github.com/liuhong1happy/react-native-wallpaper-manager) or [this](https://github.com/meharbhutta/react-native-manage-wallpaper) or [this](https://stackoverflow.com/questions/49740712/how-to-add-set-as-wallpaper-option-in-react-native-app). search `react native change phone wallpaper` – Doger Jun 14 '22 at 17:30
  • Hey, thank you for answering! Home screen, lock screen, or main menu on the phone. I might be mistaken, but the link you sent doesn't work for Expo, the first link, I am asking currently its programmer, the second saw as I said after some bug, and the third is ok I hope but somewhat complicated as it seems like there isn't any easy way to do it. Good to know what should I search for. – Cohenis Jun 14 '22 at 22:04

1 Answers1

0

In the case , import image with their extension , then direct pass ImageBackground

import global from '../assets/global.png'

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const BackgroundImg = () => {
    return <View>
                <ImageBackground
                    source={global}
                    resizeMode="stretch"
                    style={styles.img}>
                </ImageBackground>
            </View>
};
Ram Sagar
  • 5
  • 3
  • Hey, thanks, but I don't need to pass global as I can get to its data via import and choose there what I need. If I understand your answer, it wasn't the main issue. My problem was "writing" the image to the Home screen, lock screen, or main menu on the phone. – Cohenis Jun 14 '22 at 20:51