Flexbox

Flexbox in React Native

React Native ondersteunt flexbox. Flexbox is een manier om de layout van je app te bepalen. Je kan flexbox gebruiken om de positie van elementen te bepalen, maar ook om de grootte van elementen te bepalen. Het is ontworpen om een consistente layout aan te bieden voor verschillende scherm groottes.

In React Native zijn alle elementen by default flexbox elementen. Het is dus belangrijk om te weten hoe flexbox werkt. Het is zeer gelijkaardig met flexbox voor css op web. Met wat uitzonderingen.

Flex Properties

Flex Direction

Met flexDirection kan je de primaire as van de layout bepalen.

Er zijn twee assen in flexbox: de main axis en de cross axis:

• De main axis is de richting waarin flex items worden geplaatst.
• De cross axis is de richting die loodrecht staat op de main axis.

Als je flexDirection op row zet, dan zal de main axis horizontaal zijn. Dit wil zeggen dat alle items naast elkaar zullen staan.

Als je flexDirection op column zet, dan zal de main axis vertikaal zijn. Dit wil zeggen dat alle items onder elkaar zullen staan.

By default is de flexDirection column, maar bij web is dat row. Mobile apps zijn meer verticaal gericht.

Andere mogelijkheden zijn: column-reverse en row-reverse. Deze werken hetzelfde als column en row, maar de items worden dan in omgekeerde volgorde geplaatst.

In de voorbeelden op deze pagina pas je de code zelf aan: het scherm en de main en cross axis volgen meteen. Klik in een waarde zoals "row" om alle mogelijkheden te zien.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{flex: 1, flexDirection: "row"}}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{flex: 1, flexDirection: "row"}}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

Flex

Flex geeft aan hoe de items van de container zich moeten verhouden tot de andere items in de container. De items gaan "vechten" om de ruimte in de container. Hoe meer flex een item heeft, hoe meer ruimte het zal krijgen.

Meestal zetten we de hoofdcontainer op flex: 1. Dit zorgt ervoor dat de container de volledige ruimte inneemt.

Hier is een voorbeeld van een container met 3 items. De eerste heeft flex: 1, de tweede heeft flex: 2 en de derde heeft flex: 3. De derde item zal dus 3 keer zo groot zijn als de eerste.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{flex: 1, flexDirection: "column"}}>
            <View style={{flex: 1, backgroundColor: "lightblue"}}/>
            <View style={{flex: 2, backgroundColor: "skyblue"}}/>
            <View style={{flex: 3, backgroundColor: "steelblue"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{flex: 1, flexDirection: "column"}}> <View style={{flex: 1, backgroundColor: "lightblue"}}/> <View style={{flex: 2, backgroundColor: "skyblue"}}/> <View style={{flex: 3, backgroundColor: "steelblue"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

justifyContent

justifyContent bepaalt de verspreiding van de children over de main axis.

De mogelijkheden zijn:

• flex-start: de items worden aan de start van de main axis geplaatst.
• flex-end: de items worden aan het einde van de main axis geplaatst.
• center: de items worden in het midden van de main axis geplaatst.
• space-between: de items worden verspreid over de main axis. De eerste en laatste item staan aan de start en het einde van de main axis.
• space-around: de items worden verspreid over de main axis. Elk item krijgt evenveel ruimte links en rechts (of boven en onder), waardoor de ruimte aan de randen half zo groot is als tussen de items.
• space-evenly: de items worden verspreid over de main axis. Er is evenveel ruimte tussen de items en de start en het einde van de main axis.

Default: flex-start

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{
            flex: 1,
            flexDirection: "column",
            justifyContent: "center",
        }}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "center", }}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

alignItems

alignItems bepaalt hoe de items worden uitgelijnd over de cross axis.

De mogelijkheden zijn:

• flex-start: de items worden aan de start van de cross axis geplaatst.
• flex-end: de items worden aan het einde van de cross axis geplaatst.
• center: de items worden in het midden van de cross axis geplaatst.
• stretch: de items worden uitgerekt om de volledige hoogte van de container te vullen. Dit werkt enkel als de relevante grootte van de items niet expliciet is gezet.

Default: stretch

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{
            flex: 1,
            flexDirection: "column",
            justifyContent: "flex-start",
            alignItems: "center",
        }}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{height: 40, backgroundColor: "steelblue"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "flex-start", alignItems: "center", }}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{height: 40, backgroundColor: "steelblue"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

alignSelf

Als je een item wilt uitlijnen op een andere manier dan de rest van de items, dan kan je align self gebruiken.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{flex: 1, flexDirection: "column", alignItems: "center"}}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "steelblue",
                alignSelf: "flex-start",
            }}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{flex: 1, flexDirection: "column", alignItems: "center"}}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{ width: 40, height: 40, backgroundColor: "steelblue", alignSelf: "flex-start", }}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

flexWrap

Flex wrap bepaalt of de items op meerdere regels moeten worden weergegeven als ze niet op de main axis passen.

De mogelijkheden zijn:

• nowrap: de items worden niet op meerdere regels weergegeven.
• wrap: de items worden op meerdere regels weergegeven.
• wrap-reverse: zoals wrap, maar de regels worden in omgekeerde volgorde over de cross axis geplaatst.

Default: nowrap

alignContent bepaalt hoe de regels worden uitgelijnd over de cross axis als er meerdere regels zijn. Dit werkt enkel als flexWrap op wrap of wrap-reverse staat. De mogelijkheden zijn dezelfde als bij justifyContent, aangevuld met stretch.

Default: flex-start (op het web is dat stretch)

Voeg items toe of verwijder ze en kijk wanneer ze naar een nieuwe regel springen.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{
            flex: 1,
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "wrap",
            alignContent: "flex-start",
        }}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "cadetblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "royalblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "powderblue"}}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "lightskyblue",
            }}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "cornflowerblue",
            }}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "lightsteelblue",
            }}/>
            <View style={{width: 40, height: 40, backgroundColor: "slategray"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{ flex: 1, flexDirection: "row", alignItems: "flex-start", flexWrap: "wrap", alignContent: "flex-start", }}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "cadetblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "royalblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "powderblue"}}/> <View style={{ width: 40, height: 40, backgroundColor: "lightskyblue", }}/> <View style={{ width: 40, height: 40, backgroundColor: "cornflowerblue", }}/> <View style={{ width: 40, height: 40, backgroundColor: "lightsteelblue", }}/> <View style={{width: 40, height: 40, backgroundColor: "slategray"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

Absolute positioning

Absolute positioning is een manier om de positie van een element te bepalen. Je moet hier zelf rekening houden met bepaalde schermgroottes.

Je gebruikt hier de properties top, bottom, left en right om de positie van het element te bepalen.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: "flex-start",
            alignItems: "center",
        }}>
            <View style={{
                width: 40, height: 40, backgroundColor: "lightblue",
                position: "absolute", top: 0, left: 0,
            }}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "skyblue",
                position: "absolute", top: 50, right: 50,
            }}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "steelblue",
                position: "absolute", bottom: 10, left: 10,
            }}/>
            <View style={{
                width: 40, height: 40, backgroundColor: "cadetblue",
                position: "absolute", bottom: 50, right: 30,
            }}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{ flex: 1, justifyContent: "flex-start", alignItems: "center", }}> <View style={{ width: 40, height: 40, backgroundColor: "lightblue", position: "absolute", top: 0, left: 0, }}/> <View style={{ width: 40, height: 40, backgroundColor: "skyblue", position: "absolute", top: 50, right: 50, }}/> <View style={{ width: 40, height: 40, backgroundColor: "steelblue", position: "absolute", bottom: 10, left: 10, }}/> <View style={{ width: 40, height: 40, backgroundColor: "cadetblue", position: "absolute", bottom: 50, right: 30, }}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

Speeltuin

Combineer alles: pas de parent aan, voeg Views toe of verwijder ze en geef elk kind zijn eigen flex, grootte en positie.

Pas de code aan, het scherm volgt meteen.

app/index.tsx

import {View} from "react-native";
const Index = () => {
    return (
        <View style={{
            flex: 1,
            flexDirection: "column",
            justifyContent: "flex-start",
            alignItems: "stretch",
            flexWrap: "nowrap",
            alignContent: "flex-start",
        }}>
            <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/>
            <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/>
        </View>
    )
}
export default Index;

import {View} from "react-native"; const Index = () => { return ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "flex-start", alignItems: "stretch", flexWrap: "nowrap", alignContent: "flex-start", }}> <View style={{width: 40, height: 40, backgroundColor: "lightblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "skyblue"}}/> <View style={{width: 40, height: 40, backgroundColor: "steelblue"}}/> </View> ) } export default Index;

Klik in een waarde zoals "row" of "center" om alle mogelijkheden te zien.

• alignItems "stretch" rekt enkel kinderen zonder vaste width uit.
• alignContent verdeelt de regels, maar zonder flexWrap "wrap" is er maar één regel.