Creating a Custom Button react native

Question

I'm trying to create a custom button in react native that have some default styles, but I want that the button allows me to change it's default styles for new ones depending the situation.

the code is this:

import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';

export default function custom_button({txt, onPress}){
    return(
        <TouchableOpacity style={styles.container} onPress={onPress} >
            <Text style={styles.text}>{txt}</Text>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#3F51B5',
        padding:10,
        margin:20,
        width:'80%',
        borderRadius:15,
        alignItems:'center'
    },
    text:{
        fontWeight:'bold', 
        color:'white', 
        fontSize:16
    }
});

I need a hero please

score 0 · Answer 1 · answered May 08 '21 at 03:44

0

You can make a globalstyle for the similar use , and when you need to modify the styles you can do this style={[styles.container,{add what you want to modify here}]} I hope that this will help you to solve your problem

answered May 08 '21 at 03:44

Firas

13
1
5

score 0 · Accepted Answer · answered May 08 '21 at 05:55

Its a very simple implementation:

import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';

export default function custom_button({txt, onPress, txtStyle, buttonStyle}){
    return(
         <TouchableOpacity style={[styles.container1,buttonStyle && buttonStyle]} onPress={onPress} >
            <Text style={[styles.text1,txtStyle && txtStyle]}>{txt}</Text>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#3F51B5',
        padding:10,
        margin:20,
        width:'80%',
        borderRadius:15,
        alignItems:'center'
    },
    text:{
        fontWeight:'bold', 
        color:'white', 
        fontSize:16
    }
});

Also created a snack for you. You can experiment and play-around here.

starkcontrarian416 · Answer 3 · 2021-05-08T04:56:43.140

-1

You should look into the "Button" from react native. make sure to import { Button } from 'react-native';

This is an example:

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

I also agree with Faris's answer, you can create global styles. Just change the style from container/text to something else

Check this out for more information https://reactnative.dev/docs/button

edited May 08 '21 at 04:56

answered May 08 '21 at 04:04

starkcontrarian416

91
1
3
8

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/28928376) – Lin Du May 08 '21 at 04:39
i updated the answer, its no longer just a link – starkcontrarian416 May 08 '21 at 04:51

Creating a Custom Button react native

3 Answers3