React Native "Styled-components" not working-CodePudding

I am fairly new to react-native and javascript, I recently attemped to use styled components in react native, which allows you to style components using css-like syntax. In this case, I want to change the name of a View to div and then style it, but div is not being used and therefore the styles does not apply.

Here is my code:

import { Text, View } from 'react-native';
import styled from 'styled-components/native';

const div = styled.View` // "div" is not being used
  flex: 1; 
  justify-content: center; 
  align-items: center; 
  background-color: pink; 
`

function ScreenTimePage() {
  return (
    <div>
    <Text> Some Text </Text>
    </div>
  );
}

How can I solve this?

CodePudding user response：

React requires that component names start with a capital letter so it can distinguish them from HTML elements.

Call it Div instead (better yet, name it something that describes what it is for and can’t be confused with an HTML element).