There is a problem with react native buttons that can be difficult to see and understand. When you create a button in React Native, you have the option to create a round or square button. However, when you use these buttons in your app, it can be difficult to see which one is round and which one is square. This can lead to confusion and problems when you are trying to use the buttons in your app.
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
This code is written in React Native and creates a button that says “Click Me.” When the button is clicked, an action is performed.
The first line imports the React and React Native libraries.
The second line creates a component called App. This component will render a button.
The third line renders the App component. The App component contains a TouchableOpacity element, which will render as a button. The button has a style of styles.button, which is defined in the fourth line. The button’s text will have a style of styles.text, which is defined in the fifth line.
The sixth and seventh lines define the styles for the container and button elements, respectively. The container element will have justifyContent and alignItems set to ‘center’, so that the button will be centered on the screen. The button element will have a backgroundColor of ‘#4ba37b’ and a width of 100 pixels. It will also have borderRadius set to 50, so that it appears as a circle rather than a rectangle. Finally, it will have alignItems set to ‘center’, so that the text within it is centered vertically and horizontally.
set Buttons in React
There are a few different types of buttons in React Native:
Button
TextInput
RadioButton
Checkbox
How to give styles to buttons
There are a few ways to give styles to buttons in React Native.
One way is to use the StyleSheet component. You can pass in a style object as the second argument to the StyleSheet component’s create() method. The style object can contain properties for font, color, and background color.
Another way is to use the Button component. You can pass in a style object as the second argument to the Button component’s create() method. The style object can contain properties for font, color, and background color.
