Styled-systems doesn't appear on the web as it does on mobile in react native

Question

Today I started a project with expo and I wanted to use styled-system. I created and used a custom component with the Styled-system. While it looks fine on mobile, styles are not coming on expo web. What is the reason of this?

To show the code I wrote as an example, I wrote the text component and home screen as follows.

This is how it looks on iOS and on the web.

'Text.js
import {Text as T} from 'react-native';
import styled from 'styled-components';
import {compose, color, size, typography, space} from 'styled-system';
const Text = styled(T)(compose(typography, space, color, size));
export default Text;

'Home.js
import React from "react";

import { Text, Input, Box, Button } from "../components/style";

export default function HomeScreen({ navigation }) {
  return (
    <Box flex={1} justifyContent="center" alignItems="center">
      <Text fontSize={21}>Search a movie</Text>
      <Input
        width="90%"
        height={70}
        px={20}
        fontSize={20}
        bg={"#ddd"}
        color="black"
        mt={10}
        placeholder="movie name"
        borderRadius="normal"
      />
      <Button
        width="90%"
        mt={30}
        bg="0.dark"
        height={70}
        borderRadius="normal"
        onPress={() => navigation.navigate("Details")}
      >
        <Text color="0.light" fontWeight="bold" fontSize={18}>
          Ara
        </Text>
      </Button>
    </Box>
  );
}

Answer 1

I solved, you have to use 'styled-components/native'