Attempting to customize the properties of a button in the calling component using styled-components, but encountering issues. The overriding of properties does not seem to be successful, and the button appears unchanged.
The button is defined as follows:
import React from 'react';
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';
type ButtonProps = {
text: string;
};
export const RegularButton = ({text}: (ButtonProps)) => {
var [ isPress, setIsPress ] = React.useState(false);
var touchProps = {
activeOpacity: 1,
underlayColor: '#111111',
style: isPress ? (styles.btnPress) : (styles.btnNormal),
onHideUnderlay: () => setIsPress(false),
onShowUnderlay: () => setIsPress(true),
onPress: () => console.log('HELLO'),
};
return (
<TouchableHighlight {...touchProps}>
<Text style={styles.textStyle}>{text}</Text>
</TouchableHighlight>
);
}
var styles = StyleSheet.create({
btnNormal: {
backgroundColor: '#333333',
borderColor: 'black',
borderWidth: 1,
borderRadius: 10,
},
btnPress: {
borderColor: 'black',
borderWidth: 1,
borderRadius: 10,
},
textStyle: {
color: '#a7a7a7',
margin: 'auto'
}
});
An example App module that utilizes the button and attempts to override its style using styled-components:
import React from 'react';
import styled from "styled-components";
import { RegularButton } from './components/core/RegularButton'
const MainView = styled.div`
width: 100%;
height: 100%;
background-color: #1a1a1a;
flex: 1;
align-items: 'center';
justify-content: 'center';
`;
const LevelButton = styled(RegularButton)`
width: 100%;
height: 60px;
margin-left: 16px;
margin-right: 16px;
`;
export default function App() {
return (
<MainView>
<LevelButton text={"hello"}/>
<LevelButton text={"hello"}/>
</MainView>
);
Trouble arises as the button fails to adopt the overridden width, height, or margin properties. What could be causing this issue?