React Native -Buttons || How to create button in react native

React Native -Button

A button  basic component, on click it an action perform. I this tutorial we will see ‘How to create button in react native’. There is several action performer like Button , Pressable.

 

App.js

import React from "react";
import {View, Text, Pressable, StyleSheet} from 'react-native'

const CustomButton = ({onPress, text, topMargin, bottomMargin}) => {

    return(
        <Pressable onPress={onPress} style={[styles.container, {marginTop:topMargin, marginBottom: bottomMargin}]}>
           <Text style={styles.text}>{text}</Text>
        </Pressable>
    )
}

const styles = StyleSheet.create({

    container:{
        backgroundColor: '#0a607c',
        width: '100%',
        height:40,
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    text:{
    fontWeight: 'bold',
    color:'white'
    }

    });
export default CustomButton

 

Output:

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *