REACT NATIVE USER INTERFACE

BUTTON

The Button component in React Native serves as a basic UI element for triggering actions or events when pressed. It provides developers with a simple and consistent way to incorporate user interactions into their applications.

PROGRAM:

import React from ‘react;
import { View, Button, Alert } from ‘react-native’;
const SampleButton = ()=>{
return(
<View>
<Button tittle = “SAMPLE BUTTON” onPress = {()=>{
alert(“Button Clicked”)
}/>
</View>
)
}
SWITCH
Switch is used used to control the state .We can be used handling state management like ON or OFF
PROGRAM
import React, { useState } from ‘react’;
import { View, Switch, Text, StyleSheet } from ‘react-native’;

const SwitchComponent = () => {
const [isEnabled, setIsEnabled] = useState(false);

const toggleSwitch = () => {
setIsEnabled(previousState => !previousState);
};

return (
<View >
<Text style={styles.text}>Toggle Switch</Text>
<Switch trackColor={{ false: “#767577”, true: “#81b0ff” }}
thumbColor={isEnabled ? “#f5dd4b” : “#f4f3f4”}
ios_backgroundColor=”#3e3e3e”
onValueChange={toggleSwitch} value={isEnabled} />
</View>
);
};

export default SwitchComponent;