css – Style is not overwritten in react-native using styled components

I try to override the properties of a button in the calling component using styled components, but it does not work. Nothing is overridden and the component does not appear to take over the overridden properties.

I have a button defined like this:

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'
  }
});

And an app module that uses it and overrides the 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>
  );

What am I doing wrong here? I can not get the button to take the width / height, margin, etc. properties that I am trying to override.

Leave a Comment