Lesson 3: Exploring Styled Components

Exploring Styled Components

Styled Components is a library that allows you to write CSS-in-JS, bringing the full power of CSS to your JavaScript code. This approach makes it easier to manage styles and ensures they are scoped to individual components.

1. Installing Styled Components:

   npm install styled-components


2. Creating Styled Components:

   • Define styled components using the styled function.
   import styled from 'styled-components/native';

   const Container = styled.View`
   flex: 1;
   justify-content: center;
   align-items: center;
   background-color: #F5FCFF;
   `;

   const StyledText = styled.Text`
font-size: 20px;
text-align: center;
margin: 10px;
`;


3. Using Styled Components:

   <Container>
<StyledText>Hello, Styled Components!</StyledText>
</Container>


4. Benefits:

   • Scoped styles ensure no conflicts.
   • Full power of CSS available.
   • Dynamic styling based on props.

5. Limitations:

   • Learning curve for CSS-in-JS syntax.
   • Potential performance overhead.

Conclusion: Styled Components provide a powerful and flexible way to style your Expo applications. By leveraging the full power of CSS, you can create more complex and dynamic styles while ensuring they are scoped to individual components.