nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove and fix CSS properties that are invalid in React Native

This commit is contained in:
Nat 2021-04-18 15:56:33 -03:00
parent b2f56a7fff
commit c0fb5913f4
11 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/navigation/back-bar.js
View File

@ -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",

14
src/components/navigation/tray.js
View File

@ -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,

1
src/components/pages/discover.js
View File

@ -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

2
src/components/pages/discover/search.js
View File

@ -176,7 +176,7 @@ const styles = {
thumbnail: { thumbnail: {
width: 50, width: 50,
height: 50, height: 50,
borderRadius: "100%", borderRadius: 25,
marginRight: 10, marginRight: 10,
} }
} }

2
src/components/pages/discover/view-hashtag.js
View File

@ -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: {

7
src/components/pages/feed.js
View File

@ -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,

14
src/components/pages/profile.js
View File

@ -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,

83
src/components/pages/view-comments.js
View File

@ -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>&nbsp; <Text style = { styles.bold }>{ props.data.username }</Text>&nbsp;
{ props.data.content } { props.data.content }
</Text> </Text>
<View style = { styles.commentActions }> <View style = { styles.commentActions }>
@ -229,37 +229,40 @@ 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 style = { styles.parentPost }> ? <View>
<CommentJsx <View style = { styles.parentPost }>
data = { state.postData } /> <CommentJsx
data = { state.postData } />
</View>
<View>
{
state.descendants.map((thread, i) => {
const comment = thread[0];
const subs = thread.slice(1);
return (
<View key = { i }>
<CommentJsx data = { comment }/>
{
subs.map((sub, j) => {
return (
<View
key = { j }
style = { styles.sub }>
<CommentJsx
data = { sub }/>
</View>
)
})
}
</View>
);
})
}
</View>
</View> </View>
<View> : <></>
{ }
state.descendants.map((thread, i) => {
const comment = thread[0];
const subs = thread.slice(1);
return (
<View key = { i }>
<CommentJsx data = { comment }/>
{
subs.map((sub, j) => {
return (
<View
key = { j }
style = { styles.sub }>
<CommentJsx
data = { sub }/>
</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,

10
src/components/posts/grid-view.js
View File

@ -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"
} }
}; };

1
src/components/posts/paged-grid.js
View File

@ -77,7 +77,6 @@ const PagedGridJSX = (props) => {
const styles = { const styles = {
buttonContainer: { buttonContainer: {
display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center" alignItems: "center"
}, },

1
src/components/posts/post-action-bar.js
View File

@ -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
}, },