Advertisement
Felanpro

React Native (justifyContent, alignItems, alignSelf)

May 15th, 2023
31
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.33 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", // horizontal
  13. justifyContent: "center", // primary axis
  14. alignItems: "center" // secondary axis
  15.  
  16. /**
  17. * Press Ctrl + Space to see for example what values flexDirection can be assigned
  18. */
  19. }}
  20. >
  21.  
  22. <View
  23. style={{
  24. backgroundColor: "dodgerblue",
  25. width: 100,
  26. height: 300,
  27. alignSelf: "flex-start"
  28. }}
  29. />
  30.  
  31. <View
  32. style={{
  33. backgroundColor: "gold",
  34. width: 100,
  35. height: 200
  36. }}
  37. />
  38.  
  39. <View
  40. style={{
  41. backgroundColor: "tomato",
  42. width: 100,
  43. height: 100
  44. }}
  45. />
  46.  
  47. </View>
  48. );
  49. }
  50.  
  51. const containerStyle = {backgroundColor: "orange"};
  52.  
  53. const styles = StyleSheet.create({
  54. container: {
  55. flex: 1,
  56. backgroundColor: 'orange'
  57. },
  58. });
  59.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement