---
title: Exploded layers
---

import { View, Text } from "react-native";
import { ExplodedLayers } from "slides:presenting/Composition";

export const layers = [
  { id: "view", label: "View", content: <Text style={{ color: "white", fontSize: 34 }}>What the user sees</Text>, color: "#155e75" },
  { id: "state", label: "State", content: <Text style={{ color: "white", fontSize: 34 }}>The current model</Text>, color: "#214b74" },
  { id: "data", label: "Data", content: <Text style={{ color: "white", fontSize: 34 }}>Where it comes from</Text>, color: "#312e81" },
];

# Exploded layers

<View style={{ width: 1696, height: 650 }}>
<Steps count={2}>{step => <ExplodedLayers expanded={step > 0} layers={layers} style={{ width: 1696, height: 580 }} />}</Steps>
</View>