https://github.com/aditri1001/background-color-changer
https://github.com/aditri1001/background-color-changer
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/aditri1001/background-color-changer
- Owner: aditri1001
- Created: 2025-01-20T11:15:05.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-20T11:32:23.000Z (4 months ago)
- Last Synced: 2025-01-20T12:32:38.552Z (4 months ago)
- Language: Kotlin
- Size: 234 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Random Background Color Generator App
This is a simple React Native application that generates a random background color when a button is pressed. The generated color is displayed on the screen as well.
## Features
- Generates random background colors.
- Displays the hex code of the generated color.
- User-friendly button interface.
## Installation
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd
```
3. Install dependencies:
```bash
npm install
```
4. Run the app:
```bash
npm start
```
## Usage
1. Launch the app on your emulator or physical device.
2. Press the "Press me" button to generate a random background color.
3. The background color of the app will change, and the hex code of the color will be displayed.
## Code Overview
Below is the main code used in the application:
```javascript
import React, { useState } from 'react';
import {
StatusBar,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
export default function App(): React.JSX.Element {
const [randomBackground, setRandomBackground] = useState("#ffffff");
const generateColor = () => {
const hexRange = "0123456789ABCDEF"
let color = "#"
for (let i=0; i<6; i++) {
color += hexRange[Math.floor(Math.random() * 16)]
}
setRandomBackground(color)
}
return (
<>
Press me
Color: {randomBackground}
>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
actionBtn: {
borderRadius: 12,
backgroundColor: "#6a1b4d",
paddingVertical: 10,
paddingHorizontal: 40,
},
actionBtnTxt: {
fontSize: 24,
color: "#ffffff",
textTransform: 'uppercase',
},
});
```
## Screenshots
#default color :-
#after click :-
