<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 { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native';
import colors from '../styles/colors';
import { moderateScale, textScale, width } from '../styles/responsiveSize';
export default function Button({
ButtonText = '',
btnStyle = {},
buttonTxt = {},
btnIcon,
onPress = () => { },
}) {
return (
<TouchableOpacity
style={{
...styles.btnStyle,
...btnStyle,
}}
onPress={onPress}>
{!!btnIcon ? <Image source={btnIcon} style={styles.imgIcon} /> : <View />}
<Text style={{
...styles.buttonTxt,
...buttonTxt
}}>{ButtonText}</Text>
<View />
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
btnStyle: {
height: moderateScale(48),
width: width-46,
backgroundColor: colors.themeredColor,
borderRadius: moderateScale(8),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
alignSelf:'center'
},
buttonTxt: {
fontSize: textScale(14),
fontWeight: '600',
textAlign: 'center',
color: colors.white,
},
imgIcon: {
marginLeft: moderateScale(19)
}
});
