I am working on a component that consists of three views - one at the top, another in the middle with a specific height, and the last one at the bottom. I want the top and bottom views to adjust their heights accordingly. Although this may seem straightforward for some, I'm still learning about flexbox...
Below is the code snippet:
export default function Cropper({ photo }) {
const { colors } = useTheme();
const [height, setHeight] = useState(WINDOW_HEIGHT / 2);
return (
<View style={styles.container}>
<BlurView intensity={100} style={{ flex: 1 }} /> {/* auto height */}
<View style={[styles.cropper, { height: height }]} />
<BlurView intensity={100} style={{ flex: 1 }} /> {/* auto height */}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "flex-start",
backgroundColor: "red",
},
cropper: {
width: "100%",
},
});