What is the difference between StyleSheet and styled-components in React Native?

Question

Accepted Answer

**StyleSheet** — React Native built-in. **styled-components** — CSS-in-JS library.

**StyleSheet:**
- Built-in, no extra dependency.
- Optimized performance.
- Static styles.
- Limited dynamic styling.

```tsx
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff" },
  text: { fontSize: 16, color: "#000" },
});
```

**styled-components:**
- CSS-in-JS syntax.
- Dynamic styles easy.
- Theming support.
- Extra bundle size.

```tsx
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  background-color: ${props => props.theme.bg};
`;

const Title = styled.Text`
  font-size: 16px;
  color: ${props => props.color};
`;
```

**When to use:**
- **StyleSheet** — most cases.
- **styled-components** — complex theming.

React Native: What is the difference between StyleSheet and styled-components in React Native?