<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
import * as React from 'react';
import { useState } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native';
export default function Button({
ButtonText = '',
btnStyle = {},
onPress = () => {},
}) {
return (
<View>
<Text>hello button</Text>
<TouchableOpacity
style={{
...styles.btnStyle,
...btnStyle,
}}
onPress={onPress}>
<Text style={styles.buttonTxt}>{ButtonText}</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
btnStyle: {
height: 48,
marginHorizontal: 23,
backgroundColor: '#F43738',
borderRadius: 10,
justifyContent: 'center',
},
buttonTxt: {
fontSize: 14,
fontWeight: '600',
textAlign: 'center',
color: '#FFFFFF',
// font-family: Barlow;
},
});
<Button
ButtonText="hello"
btnStyle={{ backgroundColor: 'green', marginHorizontal:10 }}
onPress={() => alert('button onpress')}
/>
