How do you create a basic button in React Native?

1.	How do you create a basic button in React Native?
Answer» React NATIVE provides Button component which displays platform specific button. Following example shows how we create a platform-specific default button in React native. Platform-specific button means that the look and feel on a button will depend on WHETHER the application is running on IOS or Android. Button component exposes two main props: title and onPress. Title props are USED to display text on the button. onPress props is a callback which is invoked when the user presses the button. This is very much similar to the click event on a web browser. We can’t style the Button component provided by React native. import React from 'react'; import { View, Alert, Button, StyleSheet } from "react-native"; const SimpleButton = (props) => { return ( <Button style={styles.button} onPress={() => Alert.alert("You PRESSED button")} title="Click Me"/> ); }; const styles = StyleSheet.create({ button: { padding: 5, color: '#000' } }); export default SimpleButton; Above example will show platform specific alert when the user presses the button. Alert is the component provided by React native framework to show platform specific modal. As I mentioned above that we can’t style Button component of React native, we can try this by changing the text colour of a button or changing the padding via style props but it won’t change the appearance of the button.

Answer»

React NATIVE provides Button component which displays platform specific button. Following example shows how we create a platform-specific default button in React native. Platform-specific button means that the look and feel on a button will depend on WHETHER the application is running on IOS or Android. Button component exposes two main props: title and onPress. Title props are USED to display text on the button. onPress props is a callback which is invoked when the user presses the button. This is very much similar to the click event on a web browser. We can’t style the Button component provided by React native.

import React from 'react'; import { View, Alert, Button, StyleSheet } from "react-native"; const SimpleButton = (props) => { return ( <Button style={styles.button} onPress={() => Alert.alert("You PRESSED button")} title="Click Me"/> ); }; const styles = StyleSheet.create({ button: { padding: 5, color: '#000' } }); export default SimpleButton;

Above example will show platform specific alert when the user presses the button. Alert is the component provided by React native framework to show platform specific modal. As I mentioned above that we can’t style Button component of React native, we can try this by changing the text colour of a button or changing the padding via style props but it won’t change the appearance of the button.

How do you create a basic button in React Native?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment