import React from "react" ; import { View , SafeAreaView } from "react-native" ; import { styled , ThemeProvider , defaultTheme } from "react-native-reflect" ; const theme = { ... defaultTheme , colors : { red : "#FF4B48" , blue : "#2AB7CA" , yellow : "#FFD766" , grey : "#E6E6EA" } } ; const Flex = styled ( View , { display : "flex" , flexDirection : "row" , flexWrap : "wrap" } ) ; const Box = styled ( View , { width : [ "100%" , "50%" ] , height : 6 } ) ; const RedBox = styled ( Box , { backgroundColor : "red" } ) ; const BlueBox = styled ( Box , { backgroundColor : "blue" } ) ; const YellowBox = styled ( Box , { backgroundColor : "yellow" } ) ; const GreyBox = styled ( Box , { backgroundColor : "grey" } ) ; export default function GettingStarted ( ) { return ( < SafeAreaView > < ThemeProvider value = { theme } > < Flex > < RedBox /> < BlueBox / > < YellowBox /> < GreyBox / > < /Flex> < /ThemeProvider> < /SafeAreaView>); }