We mostly use touchable Opacity
as a button in React Native
app because we have no deeper access to React Native button that’s why.
Below is the use of Button made with Touchable Opacity
import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import colors from '../../constants/colors';
const Button = props => { // normalText | whiteTheme
const style = props.normalText ? { fontWeight: 'bold', fontSize: 15, fontFamily: undefined } : {}
return (
<TouchableOpacity style={{ ...styles.button, ...props.style, backgroundColor: props.whiteTheme ? colors.secondary : colors.primary }} onPress={props.onPress}>
<Text style={{ ...styles.text, color: props.whiteTheme ? colors.primary : colors.secondary, ...style, ...props.textStyle }} numberOfLines={1} adjustsFontSizeToFit={true}>
{props.title}
</Text>
</TouchableOpacity>
);
}
export default Button;
const styles = StyleSheet.create({
button: {
backgroundColor: colors.secondary,
height: 40,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center'
},
text: {
color: colors.primary,
fontSize: 17.5,
fontFamily: 'bold'
},
});
I hope you got it!
CLICK HERE to find out more related problems solutions.