Applying styles in react native with styled components

Question

I have a component, Logo, where I'm trying to apply a width and a height:

import styledNative from "styled-components/native";
import {Image, View} from "react-native"
import companyIcon from "../svg/companyIcon.svg";

const Logo = () => (
  <Image source={{uri: companyIcon}} />;
);

const StyledLogo = styledNative(Logo)`
  width: 48px;
  height: 48px;
`;

const Header = () => {
  return (
    <View>
      <StyledLogo />
    </View>
  );
};

This leaves us with an invisible logo, with a width of 0. Styled-components docs seems to suggest using a passed in className property (https://www.styled-components.com/docs/advanced#existing-css), however this seems to be for standard styled-components, not react-native / react-native-web implementation, because it's just not passed to my component. When I examine the passed props for Logo (by console logging them), there is a style object, but this doesn't appear to be anything I can use and there's not much mention of it in the styled component documentation:

style: Array(2)
  0: 91
  1: undefined
  length: 2

So I'm not really sure what to do with it. How can components be styled by styled-components?

stinodes stinodes · Accepted Answer · 2018-10-19T09:07:03

You aren't applying your styles to the image.

What is happening now, is that your Logo component is receiving those style-props, but it's not passing them through.

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} />;
);

So what you would want to do is to spread your Logos props over your Image, so it gets the data it needs.

const Logo = (props) => ( // <-- containing style props
  <Image {...props} source={{uri: companyIcon}} />;  // <-- styles now applied to Image
);

Or alternatively you can pass through just the style-props.

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} style={props.style}/>;
);

Edit: It also appears you are passing invalid styles. React Native expects the values you pass in to not have units. As such, your styles should be width: 48; instead, dropping the ...px.

Applying styles in react native with styled components

1 Answers