flexboxtest/App.js at master · Vizorous/flexboxtest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export  default class App extends React.Component {

  constructor(props){
    super(props);
   // this.handleClick = this.handleClick.bind(this);

  }
  handleClick () {
    Alert.alert("testing alert check");
  }
  render(){
  return (
      <View style={s.mainContainer}>
        <View style={s.header}>
        <View style={s.proPicHolder}>
          <Text style={s.proPic}> Picture </Text>
        </View>
        </View>
        <View style={s.subHeader}>
          <Text style={{fontSize:40, fontWeight: "bold",color: "black"}}> sgdjsjgdksgdkgn.m</Text>
          <Text style={{fontSize: 30, fontWeight: "normal",color: "black"}}>ssgshshwrhwhsg </Text>
        </View>
        <View style={s.details}>
          <View style={s.detailsLeftRow}>
            <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Left 1</Text>
            <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Left 1</Text>
            <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Left 1</Text>

          </View>
          <View style={s.detailsRightRow}>
          <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Right 1</Text>
          <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Right 1</Text>
          <Text style={{fontSize:20, fontWeight: "normal",color: "black"}}> Right 1</Text>
          </View>
        </View>
      </View>
  );
  }
}
const s = StyleSheet.create({
  mainContainer: {flex:1, flexDirection: "column", alignItems: "stretch", justifyContent: "flex-start", marginTop:20},
  header: {flex: 2,alignItems:"stretch",justifyContent:"center"},
  subHeader: {flex:1,alignItems:"center"},
  details: {flex: 3,alignItems:"stretch",flexDirection:"row"},
  detailsLeftRow: {flex:1,alignItems:"center",justifyContent:"space-around",flexDirection:"column"},
  detailsRightRow: {flex:1,alignItems:"center",justifyContent:"space-around",flexDirection:"column"},
  proPic: { fontSize: 20,alignSelf:"center",justifyContent: "center"},
  proPicHolder: {alignSelf:"center",justifyContent:"center",width: 100, height: 100, borderRadius: 50,backgroundColor: "grey"}
});
const styles = StyleSheet.create({
  container: {flexDirection: 'row',
  padding: 20,
  backgroundColor:'yellow',
alignItems: 'center',
    justifyContent: 'center',
  },
  container1:{
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',

  }
});

// <View>
//       <Text style={
//         styles_dark.textView
//         }>sdgsgdsgsh</Text>
//       <View style={
//         styles_dark.fancyBox
//       }></View>
//       <View style={
//         styles_dark.fancyBox2
//       }></View>
//       <View style={
//         styles_dark.fancyBox3
//       }></View>
//     </View>