CODEWITHSUNDEEP
react-nativestyled-components
Lucas Alvares
Lucas Alvares

Reputation: 236

React Native - Styling buttons with styled-components

I created a button with styled-components, but the styles are not applying. I tried with the stylesheet and it didn't work either.

How can I style this button?

Styled-Components area:

const CalcButton = styled.Button`
  margin-top:10px;
`;

My function:

 return (
    <Page>
      <HeaderText>Calculadora de Gorjeta</HeaderText>
      <Input
        placeholder="Quanto deu a conta?"
        keyboardType="numeric"
        value={bill}
        onChangeText={n=>setBill(n)}
      />
      <PctArea>
        <PctItem title="5%"  onPress={()=>setPct(5)}/>
        <PctItem title="10%" onPress={()=>setPct(10)}/>
        <PctItem title="15%" onPress={()=>setPct(15)}/>
        <PctItem title="20%" onPress={()=>setPct(20)}/>
      </PctArea>
      <CalcButton
        title={`Calcular ${pct}%`}
        onPress={calc}
      />
      {tip > 0 &&
        <ResultArea>
          <ResultItemTitle>Valor da Conta</ResultItemTitle>
          <ResultItem>R$ {parseFloat(bill).toFixed(2)}</ResultItem>

          <ResultItemTitle>Valor da Gorjeta</ResultItemTitle>
          <ResultItem>R$ {tip.toFixed(2)} ({pct}%)</ResultItem>

          <ResultItemTitle>Valor Total</ResultItemTitle>
          <ResultItem>R$ {(parseFloat(bill) + tip).toFixed(2)}</ResultItem>
        </ResultArea>
      }
    </Page>

Upvotes: 2

Views: 928

Answers (1)

Jefferson Soares
Jefferson Soares

Reputation: 141

First of all I recommend change the Button styled for TouchableOpacity.

The TouchableOpacity style is more like a div then a button, so u have to think about a div when u go style it.

The title attribute will be replaced for a Text component of React-Native itself

So the style code will be more like:

const CalcButton = styled.TouchableOpacity`
  `Your style`
`;

And the JSX code will be more like:

<CalcButton>
   <Text>What ever you want</Text>

</CalcButton>

Upvotes: 6

Related Questions