Advertisement
Felanpro

React Native (FlexBox & flexDirection)

May 15th, 2023
30
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.19 KB | None | 0 0
  1. import { StatusBar } from 'expo-status-bar';
  2. import { Dimensions, useWindowDimensions, StyleSheet, Text, View, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, Alert, Image, SafeAreaView, Button } from 'react-native';
  3. import { useDeviceOrientation } from '@react-native-community/hooks';
  4.  
  5. export default function App() {
  6.  
  7. return (
  8. <View
  9. style={{
  10. backgroundColor: "white",
  11. flex: 1,
  12. flexDirection: "row"
  13.  
  14. /**
  15. * Press Ctrl + Space to see for example what values flexDirection can be assigned
  16. */
  17. }}
  18. >
  19.  
  20. <View
  21. style={{
  22. backgroundColor: "dodgerblue",
  23. width: 100,
  24. height: 100
  25. }}
  26. />
  27.  
  28. <View
  29. style={{
  30. backgroundColor: "gold",
  31. width: 100,
  32. height: 100
  33. }}
  34. />
  35.  
  36. <View
  37. style={{
  38. backgroundColor: "tomato",
  39. width: 100,
  40. height: 100
  41. }}
  42. />
  43.  
  44. </View>
  45. );
  46. }
  47.  
  48. const containerStyle = {backgroundColor: "orange"};
  49.  
  50. const styles = StyleSheet.create({
  51. container: {
  52. flex: 1,
  53. backgroundColor: 'orange'
  54. },
  55. });
  56.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement