Remove and fix CSS properties that are invalid in React Native
This commit is contained in:
parent
b2f56a7fff
commit
c0fb5913f4
|
@ -23,7 +23,8 @@ const BackBarJsx = (props) => {
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
nav: {
|
nav: {
|
||||||
borderBottom: "2px solid #CCC",
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: "#CCC",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Image } from "react-native";
|
import {
|
||||||
|
Image,
|
||||||
|
Dimensions,
|
||||||
|
} from "react-native";
|
||||||
|
|
||||||
import { checkUnreadNotifications } from "src/requests";
|
import { checkUnreadNotifications } from "src/requests";
|
||||||
|
|
||||||
|
@ -101,25 +104,24 @@ const TrayJsx = (props) => {
|
||||||
|
|
||||||
const iconSize = 30;
|
const iconSize = 30;
|
||||||
|
|
||||||
|
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||||
const styles = {
|
const styles = {
|
||||||
tray: {
|
tray: {
|
||||||
width: "100%",
|
width: SCREEN_WIDTH,
|
||||||
paddingTop: iconSize / 2,
|
paddingTop: iconSize / 2,
|
||||||
paddingBottom: iconSize / 2,
|
paddingBottom: iconSize / 2,
|
||||||
|
|
||||||
borderTop: "2px solid #CCC",
|
borderTopWidth: 2,
|
||||||
|
borderTopColor: "#CCC",
|
||||||
backgroundColor: "white"
|
backgroundColor: "white"
|
||||||
},
|
},
|
||||||
iconList: {
|
iconList: {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-evenly",
|
justifyContent: "space-evenly",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
|
||||||
margin: 0,
|
margin: 0,
|
||||||
paddingLeft: 0,
|
paddingLeft: 0,
|
||||||
|
|
||||||
listStyle: "none",
|
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
width: iconSize,
|
width: iconSize,
|
||||||
|
|
|
@ -83,7 +83,6 @@ const DiscoverJsx = (props) => {
|
||||||
const SCREEN_WIDTH = Dimensions.get("window").width;
|
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||||
const styles = {
|
const styles = {
|
||||||
form: {
|
form: {
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
padding: 20
|
padding: 20
|
||||||
|
|
|
@ -176,7 +176,7 @@ const styles = {
|
||||||
thumbnail: {
|
thumbnail: {
|
||||||
width: 50,
|
width: 50,
|
||||||
height: 50,
|
height: 50,
|
||||||
borderRadius: "100%",
|
borderRadius: 25,
|
||||||
marginRight: 10,
|
marginRight: 10,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,7 +78,7 @@ const styles = {
|
||||||
height: screen_width / 3,
|
height: screen_width / 3,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: "#888",
|
borderColor: "#888",
|
||||||
borderRadius: "100%",
|
borderRadius: screen_width / 6,
|
||||||
marginRight: 20,
|
marginRight: 20,
|
||||||
},
|
},
|
||||||
hashtag: {
|
hashtag: {
|
||||||
|
|
|
@ -79,13 +79,13 @@ const styles = {
|
||||||
height: screen_height - (screen_height / 12)
|
height: screen_height - (screen_height / 12)
|
||||||
},
|
},
|
||||||
interruptionOuter: {
|
interruptionOuter: {
|
||||||
borderTop: "2px solid #CCC",
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: "#CCC",
|
||||||
},
|
},
|
||||||
interruption: {
|
interruption: {
|
||||||
marginTop: 10,
|
marginTop: 10,
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
},
|
},
|
||||||
|
@ -97,7 +97,8 @@ const styles = {
|
||||||
height: screen_width * 0.3
|
height: screen_width * 0.3
|
||||||
},
|
},
|
||||||
buttonOlder: {
|
buttonOlder: {
|
||||||
border: "2px solid black",
|
borderWidth: 1,
|
||||||
|
borderColor: "#888",
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
|
|
||||||
margin: 30,
|
margin: 30,
|
||||||
|
|
|
@ -304,10 +304,9 @@ const styles = {
|
||||||
padding: screen_width / 20,
|
padding: screen_width / 20,
|
||||||
},
|
},
|
||||||
profileHeader: {
|
profileHeader: {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
marginBottom: screen_width / 20
|
marginBottom: screen_width / 20,
|
||||||
},
|
},
|
||||||
displayName: {
|
displayName: {
|
||||||
fontSize: 24
|
fontSize: 24
|
||||||
|
@ -316,8 +315,8 @@ const styles = {
|
||||||
width: screen_width / 5,
|
width: screen_width / 5,
|
||||||
height: screen_width / 5,
|
height: screen_width / 5,
|
||||||
|
|
||||||
borderRadius: "100%",
|
borderRadius: screen_width / 10,
|
||||||
marginRight: screen_width / 20
|
marginRight: screen_width / 20,
|
||||||
},
|
},
|
||||||
profileHeaderIcon: {
|
profileHeaderIcon: {
|
||||||
width: screen_width / 12,
|
width: screen_width / 12,
|
||||||
|
@ -325,7 +324,7 @@ const styles = {
|
||||||
},
|
},
|
||||||
profileContextContainer: {
|
profileContextContainer: {
|
||||||
marginLeft: "auto",
|
marginLeft: "auto",
|
||||||
marginRight: screen_width / 15
|
marginRight: screen_width / 15,
|
||||||
},
|
},
|
||||||
accountStats: {
|
accountStats: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
@ -343,10 +342,10 @@ const styles = {
|
||||||
padding: 10
|
padding: 10
|
||||||
},
|
},
|
||||||
rowName: {
|
rowName: {
|
||||||
width: "33%",
|
width: screen_width / 3,
|
||||||
textAlign: "center"
|
textAlign: "center"
|
||||||
},
|
},
|
||||||
rowValue: { width: "67%" },
|
rowValue: { width: (screen_width / 3) * 2 },
|
||||||
anchor: {
|
anchor: {
|
||||||
color: "#888",
|
color: "#888",
|
||||||
textDecoration: "underline"
|
textDecoration: "underline"
|
||||||
|
@ -354,7 +353,6 @@ const styles = {
|
||||||
|
|
||||||
button: {
|
button: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderStyle: "solid",
|
|
||||||
borderColor: "#888",
|
borderColor: "#888",
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
|
|
||||||
|
|
|
@ -178,7 +178,7 @@ const CommentJsx = (props) => {
|
||||||
style = { styles.avatar } />
|
style = { styles.avatar } />
|
||||||
<View style = { styles.contentContainer }>
|
<View style = { styles.contentContainer }>
|
||||||
<Text style = { styles.content }>
|
<Text style = { styles.content }>
|
||||||
<span style = { styles.bold }>{ props.data.username }</span>
|
<Text style = { styles.bold }>{ props.data.username }</Text>
|
||||||
{ props.data.content }
|
{ props.data.content }
|
||||||
</Text>
|
</Text>
|
||||||
<View style = { styles.commentActions }>
|
<View style = { styles.commentActions }>
|
||||||
|
@ -229,7 +229,8 @@ const ViewCommentsJsx = (props) => {
|
||||||
<View style = { { flex: 1 } }>
|
<View style = { { flex: 1 } }>
|
||||||
<BackBarJsx navigation = { props.navigation }/>
|
<BackBarJsx navigation = { props.navigation }/>
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
<View style = { { display: state.loaded ? "block" : "none" } }>
|
{ state.loaded
|
||||||
|
? <View>
|
||||||
<View style = { styles.parentPost }>
|
<View style = { styles.parentPost }>
|
||||||
<CommentJsx
|
<CommentJsx
|
||||||
data = { state.postData } />
|
data = { state.postData } />
|
||||||
|
@ -260,6 +261,8 @@ const ViewCommentsJsx = (props) => {
|
||||||
}
|
}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
: <></>
|
||||||
|
}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<View style = { styles.commentForm }>
|
<View style = { styles.commentForm }>
|
||||||
<Image
|
<Image
|
||||||
|
@ -292,7 +295,6 @@ const styles = {
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
flexShrink: 1,
|
flexShrink: 1,
|
||||||
marginTop: 10,
|
marginTop: 10,
|
||||||
|
@ -304,7 +306,7 @@ const styles = {
|
||||||
marginRight: 20,
|
marginRight: 20,
|
||||||
width: 50,
|
width: 50,
|
||||||
height: 50,
|
height: 50,
|
||||||
borderRadius: "100%"
|
borderRadius: 25,
|
||||||
},
|
},
|
||||||
contentContainer: {
|
contentContainer: {
|
||||||
flexShrink: 1
|
flexShrink: 1
|
||||||
|
@ -312,24 +314,23 @@ const styles = {
|
||||||
parentPost: {
|
parentPost: {
|
||||||
borderBottomWidth: 1,
|
borderBottomWidth: 1,
|
||||||
borderBottomColor: "#CCC",
|
borderBottomColor: "#CCC",
|
||||||
marginBottom: 10
|
marginBottom: 10,
|
||||||
},
|
},
|
||||||
sub: {
|
sub: {
|
||||||
marginLeft: SCREEN_WIDTH / 8
|
marginLeft: SCREEN_WIDTH / 8,
|
||||||
},
|
},
|
||||||
commentActions: {
|
commentActions: {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
},
|
},
|
||||||
actionText: {
|
actionText: {
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
color: "#666",
|
color: "#666",
|
||||||
paddingRight: 10
|
paddingRight: 10,
|
||||||
},
|
},
|
||||||
heart: {
|
heart: {
|
||||||
width: 15,
|
width: 15,
|
||||||
height: 15
|
height: 15,
|
||||||
},
|
},
|
||||||
|
|
||||||
commentForm: {
|
commentForm: {
|
||||||
|
@ -341,17 +342,17 @@ const styles = {
|
||||||
borderTopColor: "#CCC",
|
borderTopColor: "#CCC",
|
||||||
|
|
||||||
paddingTop: 10,
|
paddingTop: 10,
|
||||||
paddingBottom: 10
|
paddingBottom: 10,
|
||||||
},
|
},
|
||||||
commentInput: {
|
commentInput: {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
padding: 10,
|
padding: 10,
|
||||||
flexGrow: 3,
|
flexGrow: 3,
|
||||||
marginRight: 20
|
marginRight: 20,
|
||||||
},
|
},
|
||||||
submitContainer: {
|
submitContainer: {
|
||||||
marginLeft: "auto",
|
marginLeft: "auto",
|
||||||
marginRight: 20
|
marginRight: 20,
|
||||||
},
|
},
|
||||||
commentSubmit: {
|
commentSubmit: {
|
||||||
width: 30,
|
width: 30,
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { View, Dimensions, Image } from "react-native";
|
import {
|
||||||
|
View,
|
||||||
|
Dimensions,
|
||||||
|
Image,
|
||||||
|
} from "react-native";
|
||||||
|
|
||||||
import GridPostJsx from "src/components/posts/grid-post";
|
import GridPostJsx from "src/components/posts/grid-post";
|
||||||
|
|
||||||
|
@ -54,10 +58,6 @@ const styles = {
|
||||||
gridRow: {
|
gridRow: {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
margin: 0,
|
margin: 0,
|
||||||
|
|
||||||
listStyle: "none",
|
|
||||||
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row"
|
flexDirection: "row"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -77,7 +77,6 @@ const PagedGridJSX = (props) => {
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
buttonContainer: {
|
buttonContainer: {
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center"
|
alignItems: "center"
|
||||||
},
|
},
|
||||||
|
|
|
@ -87,7 +87,6 @@ const PostActionBarJsx = (props) => {
|
||||||
const SCREEN_WIDTH = Dimensions.get("window").width;
|
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||||
const styles = {
|
const styles = {
|
||||||
flexContainer: {
|
flexContainer: {
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
padding: SCREEN_WIDTH / 40
|
padding: SCREEN_WIDTH / 40
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue