Scribd
Upload
23 views2 pages

Home Zaks Desktop React Pro04 App - Js

The document shows a React Native app that allows toggling between an image of a light bulb on or off by pressing a button. It uses useState hook to track if the light is on and conditionally show different images. Pressing the button calls a toggle function that changes the state and displays the other image.

Uploaded by

Raul Suchilt Fonseca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views2 pages

Home Zaks Desktop React Pro04 App - Js

The document shows a React Native app that allows toggling between an image of a light bulb on or off by pressing a button. It uses useState hook to track if the light is on and conditionally show different images. Pressing the button calls a toggle function that changes the state and displays the other image.

Uploaded by

Raul Suchilt Fonseca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

1 import React, {useState} from 'react';

2 import {
3 View,
4 Text,
5 StyleSheet,
6 Image,
7 } from 'react-native';
8  
9 import Icon from 'react-native-vector-icons/FontAwesome';
10  
11 const focoOff = require('./img/off.jpg');
12 const focoOn = require('./img/on.jpg');
13  
14  
15 const App = () {
16 const [isOn, setisOn] = useState(false);
17
18 const toggle = () {
19 let value = false;
20 isOn ? value = false : value = true;
21 setisOn(value);
22 }
23  
24 return (
25 <View style={styles.container}>
26 <Text style={styles.textWhite}>
27 Presiona el botón para encenter o apagar el foco. Text>
28 <View>
29 <Image source={isOn ? focoOn: focoOff}
30 View>
31 <View style={styles.buttons}>
32 <Icon.Button backgroundColor='#000' onPress={() {
33 toggle();
34 }}>
35 <Icon
36 , name="power-off"
37 , size={50}
38 , color='#FFF'
39 ,
40 Icon.Button>
41 View>
42 View>
43 )
44 }
45  
46 const styles = StyleSheet.create({
47 container: {
48 flex:1,
49 flexDirection: 'column',
50 justifyContent: 'center',
51 alignItems: 'center',
52 backgroundColor: '#000'
53 },
54 buttons: {
55 flexDirection: 'row',
56 justifyContent: 'space-between',
57 textAlign: 'center'
58 },
59 textWhite: {
60 color: 'white',
61 fontSize: 20,
62 textAlign: 'center',
63 padding: 50
64 }
65 })
66 export default App

You might also like